Một trong những thách thức mã / thuật toán đầu tiên mà chúng tôi đặt ra để giải quyết với tư cách là kỹ sư phần mềm và nhà phát triển web mới chớm nở là xem liệu chúng tôi có thể tìm ra cách đảo ngược một chuỗi hay không. Hãy nhớ rằng một chuỗi chỉ là một tập hợp các ký tự và khoảng trắng. Những gì chúng ta cần làm là cố gắng đảo ngược, chẳng hạn như chuỗi “Hello World!” và trả về “! dlroW olleH”. Có một số cách chúng tôi có thể giải quyết vấn đề này và chúng tôi sẽ đề cập đến một số cách trong số đó ở đây trong bài viết này.
Lời nhắc
Viết một hàm, reverseString , đảo ngược một chuỗi và trả về nó. Chuỗi cần đảo ngược được đưa ra dưới dạng đối số trong hàm.
Giải pháp # 1:Vòng lặp cho
Giải pháp đầu tiên và có lẽ là một trong những giải pháp đơn giản nhất là sử dụng vòng lặp for và quay ngược lại chuỗi. Chúng tôi sẽ cần khởi tạo hoặc tạo một biến chứa chuỗi đảo ngược mới khi chúng tôi chuyển từng ký tự trong chuỗi:
function reverseString(str) {
let newStr = '';
for(let i = str.length - 1; i >= 0; i--) {
newStr += str[i];
}
return newStr;
}
Chúng tôi chỉ định i đến chỉ mục cuối cùng (được tìm ra khi chúng tôi lấy 1 từ độ dài của chuỗi) ⇒ đây là lần khởi tạo của chúng tôi và sẽ đóng vai trò là chỉ mục đầu tiên mà chúng tôi lặp qua. Phần thứ hai của vòng lặp for là điều kiện của chúng tôi ⇒ điều này cho vòng lặp biết khi nào thì dừng lại. Phần thứ ba và phần cuối cùng của vòng lặp for là mức độ mà tôi sẽ tăng sau khi hoàn thành vòng lặp và điều kiện vẫn đúng:i– về cơ bản lấy i của chúng ta và gán lại cho i - 1;
Khi chúng ta lặp qua mỗi lần lặp, chúng ta lấy từng ký tự tại str [i] và thêm nó vào newStr. Sau đó, chúng tôi trả về newStr bên ngoài vòng lặp for của chúng tôi và kết thúc hàm.
Hãy tự mình thử trong trình soạn thảo mã:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title></title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="" />
<script>
function reverseString(str) {
let newStr = '';
for(let i = str.length - 1; i >= 0; i--) {
newStr += str[i];
}
return newStr;
}
function showInput(e) {
e.preventDefault();
const inputStr = document.getElementById('user_input').value;
if(inputStr.length < 1) {
alert("Must enter a string to reverse. Try again.")
}
let reversed = reverseString(inputStr);
document.getElementById(
'display'
).innerHTML = reversed;
document.getElementById('user_input').value = '';
}
</script>
<style>
* {
box-sizing: border-box;;
}
body {
width: 100%;
max-width: 500px;
height: 100vh;
background: lightblue;
margin: 0 auto;
display: flex;
flex-flow: column wrap;
align-items: center;
justify-content: center;
}
div {
display: flex;
flex-flow: column wrap;
align-items: flex-start;
width: 100%;
}
form {
display: flex;
flex-flow: column wrap;
width: 100%;
background: lightgray;
padding: 20px;
border: 5px double slategray;
}
#user_input {
width: 100%;
}
#submit_button {
width: 25%;
align-self: flex-end;
margin-top: 10px;
}
#display {
font-size: 1.4rem;
height: 50px;
}
</style>
</head>
<body>
<div>
<form onsubmit="showInput(event);">
<label id="label">Enter a String to Reverse:</label>
<input type="text" name="message" id="user_input"/>
<input type="submit" onclick="showInput(event);" id="submit_button"/><br />
<label>Your input: </label>
<p><span id="display"></span></p>
</form>
</div>
</body>
</html> Giải pháp # 2:Phương pháp bản đồ ES6 của JavaScript
JavaScript có một phương thức mảng tích hợp mới cho ES6 được gọi là bản đồ . Điều này làm là nó trả về một mảng mới với các giá trị được chỉ định. Phương thức bản đồ có ba tham số:Mục hiện tại, chỉ mục của mục và bản sao của mảng mà nó đến. Chúng tôi sẽ sử dụng hai tham số cuối cùng trong giải pháp.
Điều đầu tiên chúng ta cần làm là chia chuỗi thành một mảng bằng cách sử dụng split() phương pháp. Nếu chúng ta tách trên một chuỗi trống, phương thức sẽ cung cấp cho chúng ta một mảng với mỗi ký tự riêng lẻ trong đó. Sau đó, chúng tôi sử dụng mảng mới đó để lập bản đồ.
81% người tham gia cho biết họ cảm thấy tự tin hơn về triển vọng công việc công nghệ của mình sau khi tham gia một cuộc thi đào tạo. Kết hợp với bootcamp ngay hôm nay.
Sinh viên tốt nghiệp bootcamp trung bình đã dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được công việc đầu tiên của họ.
function reverseString(str) {
let newArr = str.split('');
let rev = newArr.map((letter, index, array) => {
let swapIndex = array.length - index - 1;
return array[swapIndex];
});
return rev.join('')
}
Vì chúng tôi muốn hoán đổi các chỉ mục về cơ bản, chúng tôi cần tìm ra chỉ mục của ký tự mà chúng tôi muốn đặt vào vị trí của chỉ mục hiện tại. Đó sẽ là nhân vật mà chúng tôi quay trở lại.
Để làm điều đó, chúng tôi tìm độ dài của mảng, trừ đi một vì chúng tôi là mảng dựa trên 0, và sau đó lấy đi vị trí của chỉ mục hiện tại. Mảng [swapIndex] mà chúng ta trả về về cơ bản thay thế cho chỉ mục hiện tại. Điều này cho chúng ta một mảng các ký tự được đảo ngược trong một chuỗi.
Điều cuối cùng chúng ta cần làm là nối các mảng lại với nhau thành một chuỗi và trả về nó.
Kiểm tra giải pháp trong trình chỉnh sửa mã!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title></title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="" />
<script>
function reverseString(str) {
let newArr = str.split('');
let rev = newArr.map((letter, index, array) => {
let newIndex = array.length - index - 1;
return array[newIndex];
});
return rev.join('')
}
function showInput(e) {
e.preventDefault();
const inputStr = document.getElementById('user_input').value;
if(inputStr.length < 1) {
alert("Must enter a string to reverse. Try again.")
}
let reversed = reverseString(inputStr);
document.getElementById(
'display'
).innerHTML = reversed;
document.getElementById('user_input').value = '';
}
</script>
<style>
* {
box-sizing: border-box;;
}
body {
width: 100%;
max-width: 500px;
height: 100vh;
background: lightblue;
margin: 0 auto;
display: flex;
flex-flow: column wrap;
align-items: center;
justify-content: center;
}
div {
display: flex;
flex-flow: column wrap;
align-items: flex-start;
width: 100%;
}
form {
display: flex;
flex-flow: column wrap;
width: 100%;
background: lightgray;
padding: 20px;
border: 5px double slategray;
}
#user_input {
width: 100%;
}
#submit_button {
width: 25%;
align-self: flex-end;
margin-top: 10px;
}
#display {
font-size: 1.4rem;
height: 50px;
}
</style>
</head>
<body>
<div>
<form onsubmit="showInput(event);">
<label id="label">Enter a String to Reverse:</label>
<input type="text" name="message" id="user_input"/>
<input type="submit" onclick="showInput(event);" id="submit_button"/><br />
<label>Your input: </label>
<p><span id="display"></span></p>
</form>
</div>
</body>
</html>
Điều quan trọng cần nhớ là bản đồ trả về một mảng mới - vì vậy chúng tôi không sửa đổi mảng str / ban đầu được truyền vào.
Giải pháp # 3:Phương pháp JavaScript tích hợp
Phương pháp giải quyết thách thức mã này sử dụng các hàm / phương thức tích hợp sẵn split() , reverse() và join() để giải quyết nó trong một lớp lót này:
function reverseString(str) {
return str.split('').reverse().join('');
} Hãy thử chạy đoạn mã dưới đây và tự mình kiểm tra nó để xem nó hoạt động!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title></title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="" />
<script>
function reverseString(str) {
return str.split('').reverse().join('');
}
function showInput(e) {
e.preventDefault();
const inputStr = document.getElementById('user_input').value;
if(inputStr.length < 1) {
alert("Must enter a string to reverse. Try again.")
}
let reversed = reverseString(inputStr);
document.getElementById(
'display'
).innerHTML = reversed;
document.getElementById('user_input').value = '';
}
</script>
<style>
* {
box-sizing: border-box;;
}
body {
width: 100%;
max-width: 500px;
height: 100vh;
background: lightblue;
margin: 0 auto;
display: flex;
flex-flow: column wrap;
align-items: center;
justify-content: center;
}
div {
display: flex;
flex-flow: column wrap;
align-items: flex-start;
width: 100%;
}
form {
display: flex;
flex-flow: column wrap;
width: 100%;
background: lightgray;
padding: 20px;
border: 5px double slategray;
}
#user_input {
width: 100%;
}
#submit_button {
width: 25%;
align-self: flex-end;
margin-top: 10px;
}
#display {
font-size: 1.4rem;
height: 50px;
}
</style>
</head>
<body>
<div>
<form onsubmit="showInput(event);">
<label id="label">Enter a String to Reverse:</label>
<input type="text" name="message" id="user_input"/>
<input type="submit" onclick="showInput(event);" id="submit_button"/><br />
<label>Your input: </label>
<p><span id="display"></span></p>
</form>
</div>
</body>
</html>
Về cơ bản, reverse() được tích hợp sẵn là gì phương thức nào là map() phương pháp (phương pháp chúng tôi đã nêu trong giải pháp trước đây của chúng tôi) dưới mui xe; tuy nhiên , nó biến đổi mảng ban đầu thay vì trả lại mảng mới vì nó đảo ngược tại chỗ . Nếu bạn đang giải quyết một vấn đề lớn hơn, bạn có thể cần tạo một bản sao của mảng ban đầu để bạn vẫn có thể truy cập bản gốc nếu cần.
Đây không phải là cách dứt điểm duy nhất để giải quyết vấn đề này - đây chỉ là một số cách phổ biến hơn để giải quyết nó. Thử nghiệm và xem liệu bạn có thể tìm thấy các giải pháp khác cho mình trong trình chỉnh sửa mã ở trên hay không. Chỉ cần chỉnh sửa reverseString() và không có gì khác nếu bạn muốn xem nó trên màn hình.