หนึ่งในความท้าทายด้านโค้ด/อัลกอริทึมแรกๆ ที่เราตั้งเป้าไว้เพื่อแก้ไขในฐานะวิศวกรซอฟต์แวร์รุ่นเยาว์และนักพัฒนาเว็บคือการดูว่าเราสามารถหาวิธีย้อนกลับสตริงได้หรือไม่ โปรดจำไว้ว่าสตริงเป็นเพียงชุดของอักขระและช่องว่าง สิ่งที่เราต้องทำคือพยายามย้อนกลับ เช่น สตริง “Hello World!” และส่งคืน “!dlroW olleH” มีหลายวิธีในการแก้ปัญหานี้ และเราจะพูดถึงสองสามวิธีในบทความนี้
การเตือน
เขียนฟังก์ชัน reverseString ที่กลับสตริงและส่งคืน สตริงที่จะย้อนกลับจะได้รับเป็นอาร์กิวเมนต์ในฟังก์ชัน
โซลูชัน # 1:สำหรับลูป
วิธีแรกและอาจเป็นหนึ่งในวิธีแก้ปัญหาที่ตรงไปตรงมาที่สุดคือการใช้ for loop และย้อนกลับผ่านสตริง เราจะต้องยกตัวอย่างหรือสร้างตัวแปรที่เก็บสตริงที่ย้อนกลับใหม่เมื่อเราส่งอักขระแต่ละตัวในสตริง:
function reverseString(str) {
let newStr = '';
for(let i = str.length - 1; i >= 0; i--) {
newStr += str[i];
}
return newStr;
}
เรามอบหมาย ฉัน ไปยังดัชนีสุดท้าย (ซึ่งจะหาได้เมื่อเราเอา 1 จากความยาวของสตริง) ⇒ นี่คือ การเริ่มต้น ของเรา และจะทำหน้าที่เป็นดัชนีแรกที่เราวนซ้ำ ส่วนที่สองของ for loop คือ condition . ของเรา ⇒ สิ่งนี้จะบอกวงเมื่อจะหยุด ส่วนที่สามและสุดท้ายของ for loop คือจำนวนที่ฉันจะ เพิ่มขึ้น หลังจากวนซ้ำเสร็จแล้วเงื่อนไขยังคงเป็นจริง :i– โดยพื้นฐานแล้วใช้ i ของเราและกำหนดใหม่เป็น i – 1;
ขณะที่เราวนซ้ำแต่ละครั้ง เราจะนำอักขระแต่ละตัวที่ str[i] และเพิ่มลงใน newStr จากนั้นเราส่งคืน newStr นอก for loop ของเราและยุติฟังก์ชัน
ลองด้วยตัวคุณเองในโปรแกรมแก้ไขโค้ด:
<!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> โซลูชัน # 2:วิธีการแมป ES6 ของ JavaScript
JavaScript มีเมธอดอาร์เรย์ในตัวที่ใหม่เอี่ยมสำหรับ ES6 ที่เรียกว่า แผนที่ . สิ่งนี้ทำคือส่งคืนอาร์เรย์ใหม่ด้วยค่าที่ระบุ วิธีการแผนที่มีสามพารามิเตอร์:รายการปัจจุบัน ดัชนีของรายการ และสำเนาของอาร์เรย์ที่มันมาจาก เราจะใช้สองพารามิเตอร์สุดท้ายในโซลูชัน
สิ่งแรกที่เราต้องทำคือแบ่งสตริงออกเป็นอาร์เรย์โดยใช้ split() กระบวนการ. ถ้าเราแยกสตริงว่าง เมธอดจะให้อาร์เรย์ที่มีอักขระแต่ละตัวอยู่ในนั้น จากนั้นเราใช้อาร์เรย์ใหม่นั้นเพื่อทำแผนที่
81% ของผู้เข้าร่วมกล่าวว่าพวกเขารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสในการทำงานด้านเทคโนโลยีหลังจากเข้าร่วม bootcamp จับคู่กับ Bootcamp วันนี้
ผู้สำเร็จการศึกษาจากหลักสูตร bootcamp โดยเฉลี่ยใช้เวลาน้อยกว่าหกเดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มต้น bootcamp ไปจนถึงหางานแรก
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('')
}
เนื่องจากเราต้องการสลับดัชนีเป็นหลัก เราจึงต้องหาดัชนีของอักขระที่เราต้องการใส่ในตำแหน่งของดัชนีปัจจุบัน นั่นจะเป็นตัวละครที่เรากลับมา
ในการทำเช่นนั้น เราหาความยาวของอาร์เรย์ ลบหนึ่งเพราะเราเป็นอาร์เรย์ที่ไม่มีฐาน จากนั้นจึงนำตำแหน่งของดัชนีปัจจุบันออกไป อาร์เรย์[swapIndex] ที่เราส่งคืนโดยพื้นฐานแล้วจะแทนที่ดัชนีปัจจุบัน สิ่งนี้ทำให้เรามีอาร์เรย์ของอักขระที่ย้อนกลับในสตริง
สิ่งสุดท้ายที่เราต้องทำคือการรวมอาร์เรย์เข้าด้วยกันเป็นสตริงแล้วส่งคืน
ทดสอบโซลูชันในตัวแก้ไขโค้ด!
<!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>
สิ่งสำคัญที่ต้องจำไว้คือแผนที่จะคืนค่าอาร์เรย์ใหม่ ดังนั้นเราจึงไม่ได้แก้ไข str/array เดิมที่ส่งผ่านเข้ามา
โซลูชัน #3:เมธอด JavaScript ในตัว
วิธีการแก้ปัญหาโค้ดนี้ใช้ฟังก์ชัน/เมธอดในตัว split() , reverse() และ join() เพื่อแก้ปัญหาในซับเดียวนี้:
function reverseString(str) {
return str.split('').reverse().join('');
} ลองรันโค้ดด้านล่างและทดสอบด้วยตัวคุณเองว่าใช้งานได้จริง!
<!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>
โดยพื้นฐานแล้วสิ่งที่ในตัว reverse() วิธีการทำคือ map() วิธีการ (วิธีการที่เราสรุปไว้ในโซลูชันก่อนหน้านี้) ภายใต้ประทุน; อย่างไรก็ตาม มันเปลี่ยนอาร์เรย์เดิมแทนที่จะส่งคืนอาร์เรย์ใหม่เนื่องจากจะกลับ ในตำแหน่ง . หากคุณกำลังแก้ปัญหาที่ใหญ่กว่า คุณอาจต้องสร้างสำเนาของอาร์เรย์ต้นฉบับ เพื่อให้คุณยังคงสามารถเข้าถึงต้นฉบับได้หากต้องการ
สิ่งเหล่านี้ไม่ใช่วิธีแก้ปัญหาที่ชัดเจนเพียงวิธีเดียว – นี่เป็นเพียงวิธีแก้ปัญหายอดนิยมบางส่วนเท่านั้น ทดลองและดูว่าคุณสามารถหาวิธีแก้ปัญหาอื่นๆ สำหรับตัวคุณเองในโปรแกรมแก้ไขโค้ดด้านบนได้หรือไม่ เพียงแก้ไข reverseString() ฟังก์ชั่นและไม่มีอะไรอื่นหากคุณต้องการเห็นบนหน้าจอ
