การจัดเรียงข้อมูลในอาเรย์ ในภาษา JavaScript
อาเรย์เก็บข้อมูลในรูปแบบของชุดลำดับ และในการทำงานกับอาเรย์เราอาจต้องการเรียงค่าในอาเรย์จากน้อยไปมากหรือจากมากไปน้อย ในภาษา JavaScript นั้นมีสองเมธอดสำหรับเรียงข้อมูลในอาเรย์ และนี่เป็นเนื้อหาที่คุณจะได้เรียนรู้ในบทเรียนนี้
- การเรียงข้อมูลด้วยเมธอด sort
- การใช้ฟังก์ชัน Callback ของเมธอด sort
- การใช้งานเมธอด reverse
การเรียงข้อมูลด้วยเมธอด sort
ในการทำงานกับอาเรย์การเรียงข้อมูลในอาเรย์เป็นการทำงานพื้นฐานที่เราจะต้องเจอ ในกรณีที่เราต้องการเรียงข้อมูลในอาเรย์ ในภาษา JavaScript เราสามารถใช้เมธอด sort
ได้ นี่เป็นตัวอย่าง
let numbers = [30, 10, 50, 40, 20];
numbers.sort();
console.log("Sorted:", numbers);
let names = ["Chris", "Metin", "John", "Brendan", "Mateo"];
names.sort();
console.log("Sorted:", names);
นี่เป็นผลลัพธ์การทำงานของโปรแกรม
Sorted: [ 'Brendan', 'Chris', 'John', 'Mateo', 'Metin' ]
Sorted: [ 10, 20, 30, 40, 50 ]
เมธอด sort
นั้นใช้สำหรับเรียงข้อมูลในอาเรย์จากน้อยไปมาก มันสามารถใช้ได้กับข้อมูลทุกประเภทไม่ว่าจะเป็นตัวเลขหรือข้อความ ในตัวอย่างเป็นการเรียงข้อมูลในอาเรย์ numbers
และ names
จากน้อยไปมากและแสดงผลออกทางหน้าจอ
เนื่องจากการทำงานพื้นฐานของเมธอด sort
นั้นใช้สำหรับเรียงข้อมูลจากน้อยไปมาก ถ้าหากเราต้องการเรียงข้อมูลจากมากไปน้อย วิธีที่ง่ายที่สุดคือการใช้เมธอด reverse
กลับลำดับของอาเรย์หลังจากที่เรียงไปแล้ว นี่เป็นตัวอย่าง
let numbers = [30, 10, 50, 40, 20];
numbers.sort();
console.log("Sorted asc:", numbers);
let sortedDesc = numbers.reverse();
console.log("Sorted desc:", numbers);
นี่เป็นผลลัพธ์การทำงานของโปรแกรม
Sorted asc: [ 10, 20, 30, 40, 50 ]
Sorted desc: [ 50, 40, 30, 20, 10 ]
เมธอด reverse
ทำการกลับลำดับของสมาชิกในอาเรย์ สมาชิกตัวสุดท้ายมาอยู่ในตำแหน่งแรก และสมาชิกตัวแรกจะไปอยู่ที่ตำแหน่งสุดท้ายแทน ดังนั้นถ้าเรามีอาเรย์ที่จัดเรียงจากน้อยไปมากแล้ว การเรียกใช้เมธอด reverse
จะได้ทำให้ได้อาเรย์ที่เรียงจากมากไปน้อยนั่นเอง
การทำงานของเมธอด sort
นั้นทำการเปลี่ยนแปลงค่าในอาเรย์ปัจจุบัน นั่นหมายความว่าเราจะสูญเสียลำดับเดิมก่อนการจัดเรียง ในกรณีที่ต้องการรักษาลำดับเดิมของอาเรย์เอาไว้ เราสามารถทำการคัดลอกอาเรย์ก่อนการจัดเรียงได้ ยกตัวอย่างเช่น
let chars = ["B", "E", "A", "F", "C", "D"];
let copy = chars.slice();
copy.sort();
console.log("Sorted:", copy);
console.log("Original:", chars);
นี่เป็นผลลัพธ์การทำงานของโปรแกรม
Sorted: [ 'A', 'B', 'C', 'D', 'E', 'F' ]
Original: [ 'B', 'E', 'A', 'F', 'C', 'D' ]
เนื่องจากเราต้องการรักษาลำดับเดิมของอาเรย์เอาไว้ อาจเป็นเพราะต้องการใช้มันในภายหลัง วิธีที่ง่ายที่สุดคือการคัดลอกอาเรย์ด้วยเมธอด slice
จากนั้นทำการจัดเรียงกับตัวแปรอาเรย์ copy
แทน นั่นทำให้ลำดับในอาเรย์เดิมยังคงอยู่เนื่องจากเราไม่ได้ทำการเปลี่ยนแปลงที่อาเรย์เดิม
การใช้ฟังก์ชัน Callback ของเมธอด sort
การทำงานเริ่มต้นของเมธอด sort
นั้นข้อมูลจะถูกจัดเรียงจากน้อยไปมาก และอย่างที่คุณเห็นถ้าหากเราต้องการเรียงจากมากไปน้อย เราสามารถใช้ร่วมกับเมธอด reverse
แต่นั่นไม่สามารถแก้ได้ในทุกกรณี เช่น เมื่อค่าในอาเรย์เป็นออบเจ็คและเราต้องการเรียงด้วย Property ของมัน
ดังนั้นในการใช้งานเมธอด sort
เราสามารถส่งพารามิเตอร์เป็นฟังก์ชัน Callback เพื่อกำหนดวิธีการเรียงข้อมูลในอาเรย์แบบกำหนดเองได้ นี่เป็นรูปแบบการใช้งาน
arr.sort([compareFunction])
ฟังก์ชัน Callback รับพารามิเตอร์สองตัว a
และ b
ซึ่งเป็นค่าในอาเรย์ และเราต้องสร้างเงื่อนไขและส่งค่ากลับเป็นหนึ่งในสามค่าต่อไปนี้
-1
: ทำการสลับตำแหน่งของa
และb
ในกรณที่a
อยู่ทางด้านขวาของb
1
: ทำการสลับตำแหน่งของa
และb
ในกรณที่a
อยู่ทางด้านซ้ายของb
0
: ไม่มีการสลับตำแหน่ง ทั้งสองค่าอยู่ที่ตำแหน่งเดิม
กล่าวคือเมื่อค่าที่ส่งกลับไม่เท่ากับ 0
เมธอดจะทำการสลับตำแหน่งเพื่อจัดเรียงข้อมูลในอาเรย์จากเงื่อนไขที่กำหนด และจากตัวอย่างก่อนหน้า เพื่อเรียงตัวเลขจากน้อยไปมาก เราสามารถเขียนเงื่อนไขในฟังก์ชัน Callback ได้เป็น
let numbers = [30, 10, 50, 40, 20];
numbers.sort(function (a, b) {
if (a < b)
return -1;
else if (a > b)
return 1;
else
return 0;
});
console.log("Sorted:", numbers);
นี่เป็นผลลัพธ์การทำงานของโปรแกรม ซึ่งได้ผลลัพธ์เหมือนในตัวอย่างก่อนหน้า ในความเป็นจริง แล้วเมื่อเราไม่ส่งฟังก์ชัน Callback เมธอด sort
จะเรียงอาเรย์ด้วยวิธีนี้
Sorted: [ 10, 20, 30, 40, 50 ]
ต่อไปจะเป็นการอธิบายการทำงานของตัวอย่างนี้ว่าในแต่ละขั้นตอนนั้นทำงานอย่างไร
ในการทำงาน เมธอด sort
จะวนค่าในอาเรย์ด้วยอัลกอรึมทึมของการจัดเรียง และส่งค่าสมาชิกในอาเรย์ a
และ b
มาเพื่อให้เราสร้างเงื่อนไข สิ่งที่เราต้องทำก็คือส่งค่ากลับตามเงื่อนไขที่กำหนดขึ้น และนี่เป็นเงื่อนไขสำหรับการเรียงจากน้อยไปมาก
- เงื่อนไข a < b: เมื่อ
a
น้อยกว่าb
ส่งค่ากลับเป็น-1
เพื่อสลับไปอยู่ทางซ้ายของb
- เงื่อนไข a > b: เมื่อ
a
มากกว่าb
ส่งค่ากลับเป็น1
เพื่อสลับไปอยู่ทางด้านขวาของb
- ในกรณีที่ค่าเท่ากัน (else): ส่งค่ากลับ
0
ไม่มีการจัดเรียงเกิดขึ้น
ในทางกลับกัน ในกรณีที่เราต้องการเรียงตัวเลขในอาเรย์จากมากไปน้อย เราเพียงแค่สลับเงื่อนไขของการส่งค่ากลับจาก -1
เป็น 1
และจาก 1
เป็น -1
แทน ดังนี้
let numbers = [30, 10, 50, 40, 20];
numbers.sort(function (a, b) {
if (a < b)
return 1;
else if (a > b)
return -1;
else
return 0;
});
console.log("Sorted:", numbers);
// Output: Sorted: [ 50, 40, 30, 20, 10 ]
ในตอนนี้ ตัวเลขในอาเรย์จะเรียงจากมากไปน้อยแทน จะเห็นว่าการใช้งานไม่ได้ซับซ้อนเลย การใช้งานเมธอด sort
ในรูปแบบ Callback นั้นมักใช้ในกรณีที่เราต้องการเรียงค่าในอาเรย์ของประเภทข้อมูลที่ซับซ้อนหรือเมื่อค่าในอาเรย์ไม่สามารถนำมาเปรียบเทียบกันได้โดยตรง ในตัวอย่างนี้ มาเรียงค่าในอาเรย์โดยใช้คะแนนจากออบเจ็ค
let students = [
{ name: "Chris", score: 68 },
{ name: "Metin", score: 91 },
{ name: "John", score: 30 },
{ name: "Brendan", score: 52 },
{ name: "Mateo", score: 82 },
];
students.sort(function (a, b) {
if (a.score < b.score) {
return -1;
} else if (a.score > b.score) {
return 1;
} else {
return 0;
}
});
console.log(students);
นี่เป็นผลลัพธ์การทำงานของโปรแกรม
[
{ name: 'John', score: 30 },
{ name: 'Brendan', score: 52 },
{ name: 'Chris', score: 68 },
{ name: 'Mateo', score: 82 },
{ name: 'Metin', score: 91 }
]
เนื่องจากค่าของอาเรย์เป็นออบเจ็ค ดังนั้นเราไม่สามารถเรียกใช้งานเมธอด sort
เพื่อจัดเรียงโดยตรงได้ และในกรณีนี้เมธอดจะนำค่าของออบเจ็คมาเปรียบเทียบกันโดยตรงซึ่งจะให้ผลลัพธ์ที่ไม่ถูกต้อง ดังนั้นที่เราต้องทำคือกำหนดฟังก์ชัน Callback เพื่อกำหนดวิธีการเรียงให้กับมัน
if (a.score < b.score) {
return -1;
} else if (a.score > b.score) {
return 1;
} else {
return 0;
}
เงื่อนไขของการส่งค่ากลับนั้นเหมือนในตัวอย่างก่อนหน้า คือการเรียงจากมากไปน้อยด้วยคะแนน แต่เนื่องจากค่าในอาเรย์นั้นเป็นออบเจ็ค ดังนั้น a
และ b
ที่ส่งเข้ามาจึงเป็นออบเจ็ค และเราเข้าถึงคะแนนจาก Property score
แทน
ก่อนหน้านี้เราได้บอกไปว่าฟังก์ชัน Callback จะต้องส่งค่ากลับเป็น -1
, 1
หรือ 0
แต่นั่นเพื่อให้เข้าใจง่าย ในความเป็นจริงแล้ว เราสามารถส่งค่ากลับเป็นตัวเลขลบสำหรับ -1
และส่งค่ากลับเป็นตัวเลขบวกสำหรับ 1
ได้ นั่นทำให้เราสามารถเขียนได้เป็น
// Sort ascending
let numbers = [30, 10, 50, 40, 20];
numbers.sort(function (a, b) {
return a - b;
});
console.log("Sorted:", numbers);
ผลลัพธ์การทำงานยังคงเป็นเช่นเดิม นั่นเป็นเพราะเมื่อ a
น้อยกว่า b
ผลลัพธ์จากการลบจะเป็นค่าลบเสมอ และเป็นค่าบวกในกรณีที่ a
มากกว่า b
และสุดท้ายเมื่อทั้งสองมีค่าเท่ากัน ผลลัพธ์จะเป็น 0
ดังนั้นเมื่อเราต้องการเรียงจากมากไปน้อยแค่กลับค่าโดยการคูณ -1
เข้าในนิพจน์จะได้ดังนี้
// Sort descending
let numbers = [30, 10, 50, 40, 20];
numbers.sort(function (a, b) {
return (a - b) * -1;
});
console.log("Sorted:", numbers);
นั่นเป็นการทำให้อาเรย์เรียงจากมากไปน้อย อย่างไรก็ตาม มันไม่ได้บังคับว่าคุณต้องเขียนแบบไหน แต่สำหรับโปรแกรมเมอร์ที่มีประสบการณ์แล้วพวกเขามักใช้แบบที่สั้นกว่า แต่ถ้าคุณยังใหม่กับการเขียนโปรแกรม มันโอเคที่จะเขียนในแบบที่ยาวกว่าเพื่อให้โค้ดเข้าใจง่าย
เราสามารถเขียนมันให้สั้นลงได้อีกโดยการใช้ Arrow function และมันสามารถช่วยลดเวลาในการพิมพ์โค้ดได้
// Using arrow function
let numbers = [30, 10, 50, 40, 20];
numbers.sort((a, b) => a - b);
console.log("Sorted:", numbers);
หมายเหตุ: สำหรับการกำหนดเงื่อนไขแบบสั้น
a - b
นั้นสามารถทำได้ในกรณีที่ค่าในอาเรย์เป็นตัวเลขเท่านั้น สำหรับค่าในอาเรย์ที่เป็น String หรือออบเจ็คอื่นๆ เราอาจต้องกำหนดเงื่อนการจัดเรียงด้วยตัวเองเช่นเดิม
การใช้งานเมธอด reverse
เมธอด reverse
ใช้สำหรับกลับลำดับสมาชิกในอาเรย์ สมาชิกตัวสุดท้ายจะมาอยู่ที่ตำแหน่งแรก สมาชิกตัวรองสุดท้ายจะมาอยู่ตำแหน่งที่สอง ถัดไปเรื่อยๆ จนกระทั่งสมาชิกตัวแรกไปอยู่ที่ตำแหน่งสุดท้ายของอาเรย์ นี่เป็นตัวอย่าง
let numbers = [1, 2, 3, 4, 5, 6, 7, 8];
let reversed = numbers.reverse();
console.log("Reversed:", reversed);
let names = ["Chris", "Metin", "John", "Brendan", "Mateo"];
console.log("Reversed:", names.reverse());
นี่เป็นผลลัพธ์การทำงานของโปรแกรม
Reversed: [
8, 7, 6, 5,
4, 3, 2, 1
]
Reversed: [ 'Mateo', 'Brendan', 'John', 'Metin', 'Chris' ]
เมธอด reverse
นั้นส่งค่ากลับเป็นอาเรย์ที่ได้รับการกลับลำดับแล้ว คุณได้เห็นตัวอย่างการใช้งานไปแล้วในตอนต้นของบทนี้ เราได้ใช้มันร่วมกับเมธอด sort
เพื่อทำให้อาเรย์ที่จัดเรียงจากน้อยไปมาก กลับลำดับเป็นจากมากไปน้อย
ในบทนี้ คุณได้เรียนรู้เกี่ยวกับการจัดเรียงข้อมูลในอาเรย์ด้วยเมธอด sort
เราสามารถกำหนดวิธีการจัดเรียงด้วยตัวเองได้โดยการใช้ฟังก์ชัน Callback และเมธอด reverse
เพื่อใช้สำหรับกลับลำดับของอาเรย์