JavaScript Sort Array:คู่มือวิธีการ

คุณสามารถใช้เมธอด JavaScript sort() เพื่อจัดเรียงอาร์เรย์ วิธีการ sort() ยอมรับอาร์เรย์เป็นอาร์กิวเมนต์และจัดเรียงค่าในลำดับจากน้อยไปมาก อาร์เรย์ถูกจัดเรียงในตำแหน่งซึ่งหมายความว่าอาร์เรย์เดิมได้รับการแก้ไข ไม่ได้สร้างอาร์เรย์ใหม่

คุณอาจตัดสินใจว่าต้องการจัดเรียงอาร์เรย์ของคุณตามลำดับเฉพาะ ตัวอย่างเช่น คุณอาจมีรายชื่อที่คุณต้องการแสดงให้ผู้ใช้ทราบโดยเรียงตามตัวอักษร

ขึ้นอยู่กับว่าคุณต้องการจัดเรียงองค์ประกอบในอาร์เรย์อย่างไร มีฟังก์ชัน JavaScript ในตัวที่สามารถช่วยได้ ตัวอย่างเช่น คุณสามารถใช้ฟังก์ชัน sort() เพื่อจัดเรียงอาร์เรย์ตามลำดับตัวอักษร ฟังก์ชัน reverse() เพื่อจัดเรียงอาร์เรย์ในลำดับที่กลับกัน และฟังก์ชัน sort() ที่มีฟังก์ชันซ้อนกันเพื่อสร้างการจัดเรียงของคุณเอง

ในบทช่วยสอนนี้ เราจะอธิบายวิธีการใช้ sort() และ reverse() เพื่อใช้งานฟังก์ชัน sort array ใน JavaScript

JavaScript sort() วิธีการ

JavaScript sort() วิธีการอ่านค่าในอาร์เรย์และส่งกลับค่าเหล่านั้นในลำดับจากน้อยไปมากหรือจากมากไปน้อย สามารถจัดเรียงสตริงที่มีตัวเลขหรือสตริงได้

พิจารณาไวยากรณ์ต่อไปนี้:

const values = [1, 2, 8, 9, 3];
values.sort();

รหัสนี้จัดเรียงรายการ "ค่า" ของเรา รายการถูกจัดเรียงในสถานที่ซึ่งหมายความว่ารายการเดิมของเราได้รับการแก้ไข sort() ไม่ได้สร้างรายการเวอร์ชันใหม่

เป็นที่น่าสังเกตว่าเมธอด sort() จะแก้ไขอาร์เรย์ดั้งเดิมและเปลี่ยนลำดับ หากเราต้องการเก็บอาร์เรย์เดิมไว้เหมือนเดิม เราสามารถเรียกใช้ฟังก์ชัน sort() และเก็บค่าไว้ในตัวแปรใหม่ได้

81% ของผู้เข้าร่วมกล่าวว่าพวกเขารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสในการทำงานด้านเทคโนโลยีหลังจากเข้าร่วม bootcamp จับคู่กับ Bootcamp วันนี้

ผู้สำเร็จการศึกษาจากหลักสูตร bootcamp โดยเฉลี่ยใช้เวลาน้อยกว่าหกเดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มต้น bootcamp ไปจนถึงหางานแรก

หากคุณกำหนดเนื้อหาของเมธอด sort() ให้กับตัวแปรใหม่ รายการเดิมจะยังคงมีการเปลี่ยนแปลง

ตัวอย่างการจัดเรียง JavaScript

ในการจัดเรียงอาร์เรย์ใน JavaScript เราใช้เมธอด sort() ดีฟอลต์ในตัว ในรูปแบบที่ง่ายที่สุด วิธีการ sort() จะเรียงลำดับอาร์เรย์โดยเรียงตามตัวอักษรจากน้อยไปมาก นี่คือตัวอย่างวิธีการ sort() ที่ใช้งานจริง:

var students = ['Alex', 'Cathy', 'Lincoln', 'Jeff'];
var sorted_students = students.sort();

console.log(sorted_students);

รหัสของเราส่งคืนดังต่อไปนี้:

["Alex", "Cathy", "Jeff", "Lincoln"]

อาร์เรย์ของเราได้รับการเรียงลำดับจากน้อยไปมาก เราใช้เมธอด sort() เพื่อจัดเรียงตัวแปร JavaScript ที่เรียกว่า “students” จากนั้น เราพิมพ์ค่าของ “นักเรียน” ไปยังคอนโซล JavaScript

JavaScript Array sort():สั่งซื้อ Numeric Array

เราสามารถใช้วิธี sort() เพื่อจัดเรียงค่าในรายการตัวเลขโดยเรียงลำดับจากน้อยไปมาก

สมมติว่าเรามีรายการเกรดนักเรียนที่เราต้องการเรียงลำดับจากน้อยไปมาก เราสามารถจัดเรียงได้โดยใช้เมธอด sort():

var grades = [67, 75, 62, 78];
grades.sort();

console.log(grades);

ผลลัพธ์จากโค้ดของเรามีดังนี้:

[62, 67, 75, 78]

อาร์เรย์ของเราได้รับการเรียงลำดับจากน้อยไปมาก! เมื่อโปรแกรมของเราเริ่มดำเนินการ sort() องค์ประกอบภายในอาร์เรย์ของเราจะถูกจัดเรียงตามค่า/

เนื่องจาก sort() จัดเรียงรายการในสถานที่ เราจึงไม่จำเป็นต้องกำหนดผลลัพธ์ของ sort() ให้กับตัวแปรใหม่ รหัสของเราจะพิมพ์อาร์เรย์ "เกรด" ที่จัดเรียงใหม่ไปยังคอนโซล

JavaScript Sort Array ของออบเจ็กต์

วิธีการ sort() สามารถใช้เพื่อจัดเรียงอาร์เรย์ของวัตถุได้ เช่น เราอาจมีอาร์เรย์ของออบเจ็กต์ JSON ที่เก็บทั้งชื่อและอายุของนักเรียน

นี่คือตัวอย่างของฟังก์ชัน sort() ที่จะจัดเรียงอาร์เรย์ดังกล่าวตามอายุของนักเรียนของเรา:

var students = [
	{ name: "Alex", age: 16 },
{ name: "Cathy", age: 14 },
{ name: "Lincoln", age: 14 },
{ name: "Jeff", age: 15 }
];

var sorted_students = students.sort(function(a, b) {
	return a.age - b.age;
});

console.log(sorted_students);

รหัสของเราส่งคืนดังต่อไปนี้:

[
  { "name": "Cathy", "age": 14},
  { "name": "Lincoln", "age": 14},
  { "name": "Jeff", "age": 15},
  { "name": "Alex", "age": 16}
]

รหัสของเราส่งคืนอาร์เรย์ของวัตถุ JSON ตามลำดับอายุของนักเรียน

ในบรรทัดแรก เราประกาศตัวแปร "นักเรียน" กับนักเรียนสี่คน จากนั้นเราสร้างฟังก์ชันที่จัดเรียงตัวแปรนักเรียนของเราตามค่า "อายุ" ในแต่ละวัตถุ JSON โดยการเปรียบเทียบอายุ สุดท้าย โปรแกรมของเราจะพิมพ์รายชื่อนักเรียนที่จัดเรียงไว้

JavaScript Array sort():เรียงลำดับย้อนกลับ

นอกจากนี้ยังมีฟังก์ชัน JavaScript ในตัวที่ให้คุณจัดเรียงอาร์เรย์ในลำดับย้อนกลับ:reverse()

วิธี reverse() จะกลับอาร์เรย์เพื่อให้องค์ประกอบแรกกลายเป็นองค์ประกอบสุดท้าย และองค์ประกอบสุดท้ายกลายเป็นองค์ประกอบแรก ดังนั้น อาร์เรย์นี้จึงไม่เรียงลำดับอาร์เรย์จากมากไปหาน้อยตามตัวอักษร

หากเราเรียงลำดับรายการก่อนโดยใช้วิธี sort() เราสามารถใช้ reverse() เพื่อดูอาร์เรย์ของเราในลำดับจากมากไปน้อย

นี่คือตัวอย่างการทำงานของฟังก์ชัน reverse():

var students = ['Alex', 'Cathy', 'Lincoln', 'Jeff'];
var reversed_students = students.reverse();

console.log(reversed_students);

รหัสของเราส่งคืนดังต่อไปนี้:

[“Jeff”, “Lincoln”, “Cathy”, “Alex”]

ก่อนอื่นเราเรียงลำดับรายการของเราในลำดับจากน้อยไปมากโดยใช้ sort() จากนั้นเรากลับรายการโดยใช้ reverse() รายชื่อของเราตอนนี้แสดงชื่อของเราในลำดับจากมากไปหาน้อยตามตัวอักษร

ฟังก์ชัน reverse() เช่นเดียวกับฟังก์ชัน sort() จะปรับเปลี่ยนลำดับของรายการของเรา เราไม่สามารถกำหนดผลลัพธ์ของ reverse() ให้กับตัวแปรใหม่โดยไม่ต้องแก้ไขอาร์เรย์เดิม เราได้พูดถึงเรื่องนี้ก่อนหน้านี้ด้วยวิธีการ sort()

บทสรุป

JavaScript sort() วิธีการเรียงลำดับเนื้อหาของรายการในลำดับจากน้อยไปมากหรือจากมากไปน้อย sort() แก้ไขรายการในตำแหน่งซึ่งหมายความว่าวิธีการจะไม่สร้างรายการใหม่ reverse() เมื่อใช้หลัง sort() จะเรียงลำดับรายการจากมากไปหาน้อย

ในบทช่วยสอนนี้ เราได้แบ่งย่อยวิธีการจัดเรียงอาร์เรย์ใน JavaScript โดยใช้ sort() เราได้หารือเกี่ยวกับการจัดเรียงอาร์เรย์ตัวเลข วิธีจัดเรียงอาร์เรย์ของวัตถุ และการใช้ reverse() เพื่อย้อนกลับเนื้อหาของอาร์เรย์

สำหรับคำแนะนำเกี่ยวกับแหล่งข้อมูลการเรียนรู้ JavaScript ชั้นนำและหลักสูตรออนไลน์ โปรดดูบทความ How to Learn JavaScript