Array methods ในภาษา JavaScript
ในบทนี้จะเป็นการแนะนำการใช้งานเมธอดของอาเรย์ในภาษา JavaScript อาเรย์นั้นมีเมธอดเป็นจำนวนมากที่เราสามารถใช้เพื่ออำนวยความสะดวกในการเขียนโปรแกรม นี่เป็นเนื้อหาที่คุณจะได้เรียนรู้ในบทนี้
- การวนรอบอาเรย์
- การเชื่อมต่ออาเรย์
- การค้นหาค่าในอาเรย์
- การตรวจสอบค่าในอาเรย์
- เมธอด slice อาเรย์
- เมธอด toString และ join
- เมธอดจากคลาส Array
อาเรย์เป็นออบเจ็คจากคลาส Array
มันมีเมธอดสองประเภทที่เราสามารถใช้งานได้ ได้แก่ Instance method เป็นเมธอดที่สามารถเรียกใช้ผ่านอาเรย์ออบเจ็คได้โดยตรง หรือคลาสเมธอดที่เรียกจาก เช่น เมธอด Array.from
เป็นต้น
การวนรอบอาเรย์
อย่างที่ได้ทราบไปแล้วในบทก่อนหน้าของอาเรย์ว่า เราสามารถใช้คำสั่ง for loop เพื่อวนรอบค่าในอาเรย์ อย่างไรก็ตาม อาเรย์นั้นมีเมธอด forEach
ที่เราสามารถใช้สำหรับวนรอบอาเรย์ได้เช่นกัน นี่เป็นตัวอย่าง
let names = ["Chris", "Metin", "John", "Brendan"];
names.forEach(function (value, index) {
console.log(`numbers[${index}]: ${value}`);
});
let sum = 0;
[10, 20, 30, 40, 50].forEach(function (value) {
sum += value;
});
console.log("Sum: ", sum);
นี่เป็นผลลัพธ์การทำงานของโปรแกรม
numbers[0]: Chris
numbers[1]: Metin
numbers[2]: John
numbers[3]: Brendan
Sum: 150
ในตัวอย่าง เป็นการใช้งานเมธอด forEach
สำหรับวนค่าในอาเรย์ names
และแสดงรายชื่อพร้อมกับ Index ของมันออกทางหน้าจอ จากนั้นวนรอบอาเรย์ของตัวเลขซึ่งเป็น Array literal เพื่อหาผลรวมของตัวเลขในอาเรย์ และแสดงผลรวมออกทางหน้าจอ
numbers.forEach(function (value, index) {
console.log(`numbers[${index}]: ${value}`);
});
เมธอด forEach
รับพารามิเตอร์เป็นฟังก์ชัน Callback ที่จะถูกเรียกใช้งานพร้อมกับค่าและ Index เข้ามายังฟังก์ชันผ่านพารามิเตอร์ value
และ index
ตามลำดับ และในกรณีที่เราไม่ต้องการใช้ index
สามารถละเว้นมันได้เหมือนในตัวอย่างที่สอง
[10, 20, 30, 40, 50].forEach(function (value) {
sum += value;
});
และนี่เป็นรูปแบบการใช้งานเต็มของเมธอด forEach
arr.forEach(callback(currentValue [, index [, array]])[, thisArg])
โดยที่ฟังก์ชัน Callback นั้นมีสามพารามิเตอร์โดยพารามิเตอร์ที่สาม array
คือออบเจ็คของอาเรย์ปัจจุบันที่กำลังทำงานอยู่ และ thisArg
เป็นออบเจ็คเพื่อใช้งานเป็น this
ภายในฟังก์ชัน Callback
การเชื่อมต่ออาเรย์
เมธอด concat
เป็นเมธอดที่ใช้สำหรับเชื่อมต่อสองอาเรย์เข้าด้วยกัน และส่งค่ากลับเป็นอาเรย์ใหม่ที่ได้รับการเชื่อมต่อแล้ว นี่เป็นตัวอย่างการเชื่อมต่ออาเรย์ในภาษา JavaScript
let a = [1, 2, 3, 4, 5];
let b = [6, 7, 8, 9, 10];
let c = a.concat(b);
console.log("c:", c);
นี่เป็นผลลัพธ์การทำงานของโปรแกรม
c: [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]
ในตัวอย่าง เป็นการเชื่อมต่ออาเรย์ b
เข้ากับอาเรย์ a
และโดยเมธอดนี้ส่งค่ากลับและเราเก็บผลลัพธ์ไว้ในอาเรย์ c
นั่นทำให้อาเรย์ c
เป็นอาเรย์ที่มีข้อมูลจากอาเรย์ทั้งหมด และลำดับของข้อมูลนั้นจะเรียงจาก a
ไป b
เนื่องจากผลลัพธ์ของการเชื่อมต่อนั้นส่งค่ากลับเป็นอาเรย์ใหม่ ดังนั้นเราสามารถเรียกใช้เมธอด concat
เพื่อเชื่อมต่ออาเรย์แบบต่อเนื่องกันในคำสั่งเดียวได้ นี่เป็นตัวอย่าง
let numbers = [10, 20, 30, 40];
let languages = ["Python", "JavaScript", "GO"];
let chars = ["A", "B", "C"];
let newArray = numbers.concat(languages).concat(chars);
console.log(newArray);
นี่เป็นผลลัพธ์การทำงานของโปรแกรม
[ 10, 20, 30, 40, 'Python', 'JavaScript', 'GO', 'A', 'B', 'C' ]
เราได้เชื่อมต่ออาเรย์ของตัวเลข ชื่อของภาษาเขียนโปรแกรม และตัวอักษรเข้าด้วยกัน ผลลัพธ์การเชื่อมต่อนั้นถูกเก็บไว้ในตัวแปรอาเรย์ newArray
และแสดงค่าของอาเรย์ออกทางหน้าจอ
การค้นหาค่าในอาเรย์
- includes()
- indexOf()
- lastIndexOf()
- find()
- findIndex()
ในการทำงานกับอาเรย์ สิ่งหนึ่งที่เรามักทำก็คือการตรวจสอบหรือค้นหาในอาเรย์เพื่อดูว่ามีค่าที่ต้องการอยู่หรือไม่ ในภาษา JavaScript นั้นมีหลายเมธอดที่สามารถใช้สำหรับค้นหาค่าในอาเรย์ เมธอดกลุ่มแรกที่เราจะพูดถึงคือเมธอด includes
, indexOf
และ lastIndexOf
มาดูตัวอย่างการใช้งานเมธอดเหล่านี้เพื่อตรวจสอบว่ามีผลไม้ที่เราต้องการค้นหาอยู่ในอาเรย์หรือไม่ นี่เป็นตัวอย่าง
let fruits = ["Apple", "Banana", "Orange", "Grapes"];
console.log("Contain Orange?", fruits.includes("Orange"));
console.log("Contain Tomato?", fruits.includes("Tomato"));
console.log("Contain Orange?", fruits.indexOf("Orange"));
console.log("Contain Tomato?", fruits.indexOf("Tomato"));
นี่เป็นผลลัพธ์การทำงานของโปรแกรม
Contain Orange? true
Contain Tomato? false
Contain Orange? 2
Contain Tomato? -1
อาเรย์ของผลไม้ fruits
เก็บรายชื่อของผลไม้จำนวนสี่ชนิดเอาไว้ จากนั้นเราใช้เมธอด includes
เพื่อตรวจสอบว่าค่าที่ส่งเป็นอาร์กิวเมนต์มีอยู่ในอาเรย์หรือไม่ โดยเมธอดจะส่งค่ากลับเป็น true
ถ้าหากมี และ false
หากไม่มี
ส่วนเมธอด indexOf
นั้นใช้สำหรับค้นหาค่าในอาเรย์เช่นกัน แต่มันส่งค่ากลับเป็น Index ของอาเรย์แทนในกรณีที่พบ และส่งค่ากลับเป็น -1
หากไม่พบ เมธอดนี้มักใช้ในกรณีที่ต้องการทราบ Index ของอาเรย์เพื่อนำไปใช้งานอย่างอื่นต่อ
นอกจากนี้ยังมีเมธอด lastIndexOf
ที่ใช้สำหรับค้นหาค่าในอาเรย์ ที่ทำงานตรงกันข้ามกับเมธอด indexOf
ซึ่งมันส่งค่ากลับเป็น Index ของสมาชิกสุดท้ายที่พบในอาเรย์แทน หรือกล่าวอีกนัยหนึ่ง เมธอดตรวจสอบจากสมาชิกตัวสุดท้ายของอาเรย์มา นี่เป็นตัวอย่าง
let stuff = ["iPhone", "iPad", "Watch", "Mac", "iPad"];
console.log("Searching for iPad using");
console.log("indexOf:", stuff.indexOf("iPad"));
console.log("lastIndexOf:", stuff.lastIndexOf("iPad"));
นี่เป็นผลลัพธ์การทำงานของโปรแกรม
Searching for iPad using
indexOf: 1
lastIndexOf: 4
อาเรย์ stuff
นั้นเก็บรายชื่อของสิ่งของที่อาจจะซ้ำกันได้ จากนั้นเราใช้เมธอด indexOf
และ lastIndexOf
เพื่อค้นหา "iPad"
ในอาเรย์ เมธอดส่งค่ากลับเป็น Index แรกสุดและท้ายสุดที่พบค่านี้ในอาเรย์ตามลำดับ
การตรวจสอบค่าในอาเรย์
- every()
- some()
เมธอด every
และเมธอด some
ใช้สำหรับตรวจสอบว่าสมาชิกในอาเรย์มีค่าเป็นไปตามเงื่อนไขที่กำหนดหรือไม่ โดยการกำหนดเงื่อนไขจากการส่งค่ากลับของฟังก์ชัน Callback ซึ่งมันมีการทำงานดังนี้
- เมธอด
every
ส่งค่ากลับเป็นtrue
ถ้าทุกค่าในอาเรย์ทำให้เงื่อนไขในฟังก์ชัน Callback เป็นจริง - เมธอด
some
ส่งค่ากลับเป็นtrue
ถ้ามีอย่างน้อยหนึ่งค่าในอาเรย์ที่ทำให้เงื่อนไขในฟังก์ชัน Callback เป็นจริง
ในตัวอย่างนี้ เป็นการใช้งานเมธอด every
เพื่อตรวจสอบว่าสมาชิกทุกตัวในอาเรย์เป็นตัวเลขจำนวนเต็มบวกหรือไม่ และตรวจสอบว่ารายชื่อทั้งหมดในอาเรย์ขึ้นต้นด้วยตัวอักษร "A"
หรือไม่
let numbers = [15, 14, 10, 17, 8, 3, 14, 5];
let isPositive = numbers.every(function (value) {
return value > 0;
});
let names = ["Andrew", "Brenthal", "Aaron", "Anthony"];
let startWithA = names.every(function (value) {
return value.startsWith("A");
});
console.log("Is all numbers are positive:", isPositive);
console.log("Is all names start with A:", startWithA);
นี่เป็นผลลัพธ์การทำงานของโปรแกรม
Is all numbers are positive: true
Is all names start with A: false
ในตัวอย่าง เป็นการใช้เมธอด every
เพื่อตรวจสอบว่าตัวเลขในอาเรย์ทุกตัวเป็นจำนวนเต็มบวกหรือไม่ เมธอดรับพารามิเตอร์เป็นฟังก์ชัน Callback ที่จะต้องส่งค่ากลับเป็น Boolean ซึ่งเป็นเงื่อนสำหรับการตรวจสอบ เนื่องจากค่าทั้งหมดในอาเรย์ทำให้เงื่อนไข value > 0
เป็นจริง ดังนั้นผลลัพธ์การทำงานของเมธอดมีค่าเป็น true
จากนั้นเป็นการตรวจสอบว่าชื่อทั้งหมดในอาเรย์ขึ้นต้นด้วยตัวอักษร "A"
หรือไม่ เนื่องจากในอาเรย์นั้นมีชื่อที่ขึ้นต้นด้วยตัวอักษร "B"
อยู่นั่นทำให้เงื่อนไข value.startsWith("A")
ไม่เป็นจริงสำหรับทุกค่าในอาเรย์ และเมื่อมีอย่างน้อยหนึ่งค่าที่ทำให้เงื่อนไขเป็นไม่จริง เมธอดส่งค่ากลับเป็น false
ทันที
ในขณะที่เมธอด every
ต้องการทุกค่าในอาเรย์ที่ทำให้เงื่อนไขเป็นจริงเพื่อให้ได้ผลลัพธ์เป็นจริง เมธอด some
ต้องการเพียงอย่างน้อยหนึ่งค่าที่ทำให้เงื่อนไขเป็นจริงเท่านั้น
ในตัวอย่างนี้เป็นการใช้เมธอด some
เพื่อหาว่าคุณสอบตกหรือไม่ โดยมีเงื่อนไขอยู่ว่าถ้าหากคะแนนสอบที่ได้ในทุกวิชาเกิน 50 คะแนน หมายความว่าคุณสอบผ่าน แต่ถ้าหากมีอย่างน้อยหนึ่งวิชาที่ได้น้อยกว่า 50 คะแนน หมายความว่าคุณสอบตก ดังนั้นสิ่งที่เราต้องการทำคือหาแค่บางวิชาที่ได้คะแนนน้อยกว่า 50 เท่านั้น นี่เป็นตัวอย่าง
let scores = [
{ subject: "Mathematics", score: 80 },
{ subject: "Technology", score: 75 },
{ subject: "Astronomy", score: 45 },
{ subject: "Technology", score: 23 }
];
let failed = scores.some(function (value) {
return value.score < 50;
});
if (failed) {
console.log("You have failed some subjects including:");
scores.filter(value => value.score < 50)
.forEach(function (value, index) {
console.log(index + 1, value.subject);
});
} else {
console.log("Congrats! You have passed all subjects");
}
นี่เป็นผลลัพธ์การทำงานของโปรแกรม
You have failed some subjects including:
1 Astronomy
2 Technology
ในตัวอย่าง เราได้ประกาศอาเรย์ของผลการเรียนในตัวแปร scores
ที่เก็บออบเจ็คที่ประกอบไปด้วยชื่อวิชา subject
และคะแนนสอบที่ได้ score
สำหรับวิชานั้นๆ เราต้องการตรวจสอบว่าคะแนนทั้งหมดในอาเรย์นั้นผ่านหรือไม่ผ่านจากเกณฑ์ที่กำหนดไว้สำหรับ 50 คะแนน
let failed = scores.some(function (value) {
return value.score < 50;
});
ในคำสั่งนี้เป็นการใช้เมธอด some
เพื่อตรวจสอบว่าคะแนนในอาเรย์นั้นน้อยกว่า 50
หรือไม่ ถ้าหากมีอย่างน้อยหนึ่งค่าที่ทำให้เงื่อนไขเป็นจริง ผลลัพธ์ในตัวแปร failed
จะเป็น true
ซึ่งหมายถึงคุณสอบตกนั้นเอง
เนืื่องจากในอาเรย์นั้นมีวิชา "Astronomy"
ที่ทำคะแนนได้เพียง 45
นั่นทำให้ผลลัพธ์ที่ได้ในตัวแปร failed
เป็นจริง ซึ่งหมายความว่าสอบไม่ผ่าน เนื่องจากมีบางวิชาที่ทำคะแนนสอบได้น้อยกว่า 50 คะแนน
console.log("You have failed some subjects including:");
scores.filter(value => value.score < 50)
.forEach(function (value, index) {
console.log(index + 1, value.subject);
});
จากนั้นเรานำผลลัพธ์ที่ได้มาตรวจสอบเงื่อนไขด้วยคำสั่ง if ในกรณีที่สอบตก โดยแสดงรายชื่อของวิชาที่ได้คะแนนไม่ถึง 50
ด้วย เราใช้เมธอด filter
เพื่อเลือกเอาเฉพาะออบเจ็คที่มีคะแนนไม่เกิน 50
และใช้เมธอด forEach
วนอาเรย์เพื่อแสดงชื่อของวิชาออกมาทางหน้าจอ
เมธอด some
นั้นจะส่งค่ากลับเป็นจริงถ้าหากมีอย่างน้อยหนึ่งค่าในอาเรย์ที่ทำให้เงื่อนไขเป็นจริง และในการที่เมธอดจะส่งค่ากลับเป็นเท็จได้ ค่าทั้งหมดในอาเรย์ต้องทำให้เงื่อนไขไม่เป็นจริง ในตัวอย่างนี้ จะเป็นการใช้เมธอด some
เพื่อค้นหาว่าในอาเรย์มีตัวเลขจำนวนคี่อยู่หรือไม่
let numbers = [2, 4, 6, 8, 10];
let containOddNumber = numbers.some(function (value) {
return value % 2 == 1;
});
if (containOddNumber) {
console.log("There is some odd numbers in array.");
} else {
console.log("All the numbers are even numbers.");
}
นี่เป็นผลลัพธ์การทำงานของโปรแกรม
All the numbers are even numbers.
ในตัวอย่างนี้เป็นการค้นหาว่าภายในอาเรย์มีตัวเลขจำนวนคี่อยู่หรือไม่ จากเงื่อนไข value % 2 == 1
เนื่องจากตัวเลขในอาเรย์นั้นเป็นเลขคู่ทั้งหมด นั่นทำให้เงื่อนไขเป็นเท็จสำหรับทุกค่า ส่งผลให้ผลลัพธ์การทำงานของเมธอด some
ที่เก็บในตัวแปร containOddNumber
เป็น false
นั่นเอง
การใช้งานเมธอดทั้งสองทำให้เราสามารถทำงานได้เร็วขึ้น ในกรณีที่ต้องการตรวจสอบว่าค่าทั้งหมดในอาเรย์เป็นไปตามเงื่อนไขที่กำหนดหรือไม่ด้วยเมธอด every
หรือมีเพียงแค่บางค่าเท่านั้นที่เป็นไปตามเงื่อนไขที่กำหนดโดยการใช้เมธอด some
เมธอด slice อาเรย์
- slice()
- splice()
เมธอด slice
ใช้สำหรับตัดส่วนของอาเรย์ตามช่วง Index ที่กำหนดและส่งค่ากลับเป็นอาเรย์ใหม่ นี่เป็นรูปแบบการใช้งาน
array.slice(startIndex [, endIndex]);
ในรูปแบบการใช้งานของเมธอด startIndex
เป็น Index เริ่มต้นสำหรับการตัดอาเรย์ และ endIndex
เป็น Index สิ้นสุดของการตัด (แบบไม่นับรวม) และถ้าพารามิเตอร์ที่สองถูกละเว้น เมธอดจะตัดเอาไปจนถึงสมาชิกตัวสุดท้ายของอาเรย์ นี่เป็นตัวอย่างการใช้งาน
let animals = [
"ants", "birds", "cats", "dogs", "elephants", "fishes"
];
console.log(animals.slice(2, 5));
console.log(animals.slice(1, 3));
console.log(animals.slice(2));
นี่เป็นผลลัพธ์การทำงานของโปรแกรม
[ 'cats', 'dogs', 'elephants' ]
[ 'birds', 'cats' ]
[ 'cats', 'dogs', 'elephants', 'fishes' ]
ในตัวอย่าง เป็นการใช้งานเมธอด slice
สำหรับตัดเอาสมาชิกภายในอาเรย์ ในสองคำสั่งแรกการทำงานของเมธอดจะตัดเอาจาก Index เริ่มต้นและจนถึงก่อน Index สิ้นสุด และในกรณีที่ไม่ส่งอาร์กิวเมนต์ตัวที่สอง เมธอดจะตัดเอาจนถึงสมาชิกตัวสุดท้ายของอาเรย์
นอกจากนี้ เรายังสามารถใช้ค่า Index ที่เป็นลบกับเมธอด slice
ได้ โดยที่ -1
นั้นหมายถึงสมาชิกตัวสุดท้ายในอาเรย์ -2
หมายถึงสมาชิกถัดมาก่อนตัวสุดท้าย ถัดมาเรื่อยๆ ตามลำดับ นี่เป็นตัวอย่าง
let langs = ["PHP", "Ruby", "Python", "JS", "GO"];
console.log(langs.slice(1, -2));
console.log(langs.slice(-5, -1));
console.log(langs.slice(-2));
นี่เป็นผลลัพธ์การทำงานของโปรแกรม
[ 'Ruby', 'Python' ]
[ 'PHP', 'Ruby', 'Python', 'JS' ]
[ 'JS', 'GO' ]
การทำงานของเมธอดนั้นยังคงเป็นเช่นเดิม แต่ในกรณีนี้ เราใช้ Index ที่เป็นค่าลบสำหรับตัดค่าจากอาเรย์แทน และจะเห็นว่าเราสามารถใช้ Index ที่เป็นบวกและลบพร้อมกันได้ ซึ่งในความเป็นจริงแล้ว -1
ก็คือ Index ที่ arr.length - 1
นั่นเอง
นอกจากเมธอด slice
แล้วยังมีอีกเมธอดที่ทำงานกับ Index ของอาเรย์ นั่นคือเมธอด splice
เมธอดนี้สามารถทำได้หลายอย่างในเมธอดเดียว เราสามารถใช้มันเพื่อเพิ่มค่าใหม่เข้าไปยังอาเรย์ แทนที่ค่าในอาเรย์ หรือลบค่าออกจากอาเรย์จากช่วงของ Index ที่กำหนดได้
สำหรับตัวอย่างแรก มาเริ่มกับการใช้เมธอด splice
เพื่อลบข้อมูลจากตำแหน่งที่ต้องการออกจากอาเรย์ นี่เป็นตัวอย่าง
let days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday"];
days.splice(1, 1);
console.log(days);
let colors = ["Blue", "Green", "Red", "Pink", "Yellow", "Menthe"];
colors.splice(2, 3);
console.log(colors);
นี่เป็นผลลัพธ์การทำงานของโปรแกรม
[ 'Sunday', 'Tuesday', 'Wednesday', 'Thursday' ]
[ 'Blue', 'Green', 'Menthe' ]
ในตัวอย่าง เรามีอาเรย์ของชื่อวันในสัปดาห์และชื่อของสี จากนั้นเราใช้เมธอด splice
เพื่อลบข้อมูลออกจากอาเรย์โดยการระบุ Index เริ่มต้นในพารามิเตอร์แรก และจำนวนที่ต้องการลบในพารามิเตอร์ที่สอง
days.splice(1, 1);
ในคำสั่งนี้เป็นการลบค่าออกจากอาเรย์ days
โดยเริ่มจาก Index 1
และในพารามิเตอร์ที่สองเป็นจำนวนที่เราต้องการลบนับจาก Index เริ่มต้น ซึ่งสามารถตีความหมายได้เป็นลบค่าออกจากอาเรย์เริ่มจาก Index 1 ไปหนึ่งค่า ดังนั้นในคำสั่งนี้จะทำให้ "Monday"
ถูกลบออกไปจากอาเรย์
colors.splice(2, 3);
ถัดมาเป็นการลบชื่อของสีออกจากอาเรย์ colors
เราได้กำหนด Index เริ่มต้นเป็น 2
ดังนั้นเมธอดจะเริ่มลบจาก "Red"
และนับไปอีก 3
ค่า นั่นส่งผลให้ "Red"
, "Pink"
และ "Yellow"
ถูกลบออกไปจากอาเรย์
หลังจากที่สามารถลบข้อมูลออกไปจากอาเรย์ได้แล้ว นอกจากนี้ เรายังสามารถใช้เมธอด splice
สำหรับแทนที่ค่าในอาเรย์ด้วยค่าใหม่ได้ นี่เป็นตัวอย่างการใช้งาน
let cities = [
"Tokyo", "New York", "Delhi", "Mexico City",
"Shanghai", "Sao Paulo"
];
cities.splice(2, 3, "Bangkok");
console.log(cities);
let genres = ["Pop", "Classic", "Country", "Jazz", "Folk"];
genres.splice(1, 2, "Blue", "Soul");
console.log(genres);
นี่เป็นผลลัพธ์การทำงานของโปรแกรม
[ 'Tokyo', 'New York', 'Bangkok', 'Shanghai', 'Sao Paulo' ]
[ 'Pop', 'Blue', 'Soul', 'Jazz', 'Folk' ]
ในตัวอย่างนี้ เป็นการใช้เมธอด splice
เพื่อแทนค่าข้อมูลในอาเรย์เป็นค่าใหม่ เรามีอาเรย์ที่เก็บชื่อของเมืองและเก็บประเภทของเพลงเอาไว้ในตัวแปร cities
และ genres
ตามลำดับ สำหรับการแทนที่นั้นจะเหมือนกับการลบค่าออกจากอาเรย์ เราจะต้องลบค่าออกไปก่อน จากนั้นค่าใหม่ทีต้องการเพิ่มเข้าหรือแทนที่ค่าที่ถูกลบออกไปในอาร์กิวเมนต์ที่สามของเมธอด
cities.splice(2, 3, "Bangkok");
ในคำสั่งนี้ได้ลบข้อมูลเริ่มจาก Index ที่ 2
ออกไปเป็นจำนวน 3
ค่าจากนั้นเพิ่ม "Bangkok"
เข้าไปยังตำแหน่ง Index ดังกล่าว หรือกล่าวอีกนัยหนึ่ง เราแทนที่ค่าที่เราลบออกไปจากช่วง Index ที่กำหนดด้วยค่าใหม่นั่นเอง
genres.splice(1, 2, "Blue", "Soul");
คำสั่งนี้ก็เช่นเดียวกัน ได้ลบสองค่าออกจากอาเรย์เริ่มจาก Index 1
และเพิ่มสองค่าเข้ามาในตำแหน่ง Index ดังกล่าว จะเห็นว่าเราสามารถเพิ่มหลายค่าในการเรียกใช้เมธอดครั้งเดียวได้ โดยกำหนดค่าที่ต้องการเพิ่มตั้งแต่พารามิเตอร์ที่สามเป็นต้นไป
ต่อมาเป็นตัวอย่างสำหรับการใช้เมธอด splice
เพื่อแทรกหรือเพิ่มข้อมูลเข้าไปในอาเรย์ในตำแหน่ง Index ที่ต้องการ นี่เป็นตัวอย่าง
let sports = ["Soccer", "Hockey", "Tennis", "Baseball"];
// Insert at index 2
sports.splice(2, 0, "Cricket");
console.log(sports);
let numbers = [10, 20, 30, 40, 50];
// Insert 3 elements starting from index 1
numbers.splice(1, 0, "A", "B", "C");
console.log(numbers);
นี่เป็นผลลัพธ์การทำงานของโปรแกรม
[ 'Soccer', 'Hockey', 'Cricket', 'Tennis', 'Baseball' ]
[
10, 'A', 'B', 'C',
20, 30, 40, 50
]
ในตัวอย่าง เรามีสองตัวแปรอาเรย์สำหรับเก็บชื่อของกีฬาและตัวเลข จากนั้นเราต้องการแทรกข้อมูลเข้าไปยังอาเรย์เหล่านี้ในตำแหน่งที่กำหนด
sports.splice(2, 0, "Cricket");
ในคำสั่งนี้เป็นการเพิ่มกีฬา "Cricket"
เข้าไปยัง Index ตำแหน่งที่ 2
ของอาเรย์ สำหรับการเพิ่มข้อมูลนั้นจะส่งอาร์กิวเมนต์ที่สองเป็น 0
เสมอ เนื่องจากว่าเราไม่ต้องการลบค่าใดๆ ออกจากอาเรย์ แค่ต้องการเพิ่มเท่านั้น
numbers.splice(1, 0, "A", "B", "C");
และเช่นเดิม เราสามารถเพิ่มหลายค่าจากการเรียกใช้งานเมธอดเพียงครั้งเดียว โดยส่งค่าที่ต้องการเพิ่มตั้งแต่อาร์กิวเมนต์ที่สามเป็นต้นไป ในคำสั่งนี้ เราได้แทรกสามตัวอักษรเข้าไปยังอาเรย์ที่ Index 1
ทุกครั้งของการใช้งานเมธอด splice
สำหรับเพิ่ม แทนที่ หรือลบข้อมูลในอาเรย์; Index ของอาเรย์จะถูกอัพเดทใหม่เสมอ
ข้อควรระวัง: การทำงานของเมธอด
splice
จะเปลี่ยนแปลงค่าของอาเรย์ปัจจุบัน และส่งค่ากลับเป็นอาเรย์ของสมาชิกที่ถูกลบออกไปแทน สิ่งที่เมธอดส่งกลับมาในการเรียกใช่งานคืออาเรย์ของค่าที่ถูกลบออกไปอาเรย์
เมธอด toString และ join
- toString()
- join()
เมธอด toString ใช้สำหรับแปลงค่าในอาเรย์ให้เป็น String ในรูปแบบที่เรียบง่าย โดยคั่นแต่ละค่าในอาเรย์ด้วยเครื่องหมายคอมมา (,
) ยกตัวอย่างเช่น
let numbers = [1, 2, 3, 4, 5, 6, 7, 8];
console.log(numbers.toString());
let names = ["Chris", "Metin", "John", "Brendan", "Mateo"];
console.log(names.toString());
นี่เป็นผลลัพธ์การทำงานของโปรแกรม
1,2,3,4,5,6,7,8
Chris,Metin,John,Brendan,Mateo
ในตัวอย่างเรามีอาเรย์ของตัวเลขและ String จากนั้นเรียกใช้เมธอด toString
เพื่อแปลงค่าในอาเรย์เป็น String และผลลัพธ์ที่ได้แต่ละค่าจะถูกแปลงเป็น String และนำมารวมกันโดยคั่นด้วยเครื่องหมายคอมมา
นอกจากนี้เรายังสามารถใช้เมธอด join
เพื่อแปลงอาเรย์เป็น String ได้ การใช้เมธอดนี้ทำให้เราสามารถกำหนดตัวคั่นแต่ละ String นอกจากการใช้คอมมาได้ นี่เป็นตัวอย่าง
let numbers = [1, 2, 3, 4, 5, 6, 7, 8];
console.log(numbers.join("."));
console.log(numbers.join("/"));
let names = ["Chris", "Metin", "John", "Brendan", "Mateo"];
console.log(names.join(", "));
console.log(names.join("---"));
นี่เป็นผลลัพธ์การทำงานของโปรแกรม
1.2.3.4.5.6.7.8
1/2/3/4/5/6/7/8
Chris, Metin, John, Brendan, Mateo
Chris---Metin---John---Brendan---Mateo
ในการใช้งานเมธอด join
เราสามารถแปลงค่าในอาเรย์เป็น String และคั่นด้วยตัวอักษรที่ต้องการได้ ถ้าหากคุณไม่ต้องการให้มีตัวคั่นระหว่างแต่ละค่า แค่ส่ง String ว่างเข้าไปแทน เช่น arr.join("")
เมธอดจากคลาส Array
สำหรับเมธอดทั้งหมดที่คุณได้เรียนรู้ไปในตัวอย่างก่อนหน้านั้นเรียกว่า Instance method มันคือเมธอดทีทำงานกับออบเจ็คของอาเรย์ที่ถูกเรียกใช้โดยตรง นอกจากนี้อาเรย์ยังมีคลาสเมธอด ซึ่งเป็น Helper ที่ใช้สำหรับทำงานกับอาเรย์ ยกตัวอย่างเช่น
เมธอด Array.isArray
ใช้เพื่อตรวจสอบว่าออบเจ็คนั้นเป็นอาเรย์หรือไม่ นี่เป็นเมธอดที่มีประโยชน์ในกรณีที่เราต้องการตรวจสอบว่าค่าในตัวแปรหรือออบเจ็คนั้นเป็นอาเรย์จริงๆ หรือปล่าว นี่เป็นตัวอย่างการใช้งาน
console.log(Array.isArray([1, 2, 3, 4])); // true
console.log(Array.isArray({ a: 1 })); // false
console.log(Array.isArray("hello")); // false
console.log(Array.isArray(5)); // false
เมธอดส่งค่ากลับเป็น true
ในกรณีที่ออบเจ็คที่ต้องการตรวจสอบเป็นอาเรย์ และ false
ถ้าหากไม่ใช่
อีกเมธอดที่มีการใช้งานบ่อยๆ ก็คือเมธอด Array.from
มันใช้สำหรับแปลง Iterable ออบเจ็คให้เป็นอาเรย์ Iterable ออบเจ็คคือออบเจ็คที่สามารถวนซ้ำได้หรือมีการกำหนดการทำงานให้กับ Symbol [Symbol.iterator]
ยกตัวอย่างเช่น String
, Set
หรือ Map
นั้นถือว่าเป็น Iterable ออบเจ็ค
console.log(Array.from("marcuscode"));
console.log(Array.from([1, 2, 3, 4]));
let map = new Map();
map.set("a", 1);
map.set("b", 2);
map.set("c", 3);
console.log(Array.from(map));
นี่เป็นผลลัพธ์การทำงานของโปรแกรม
[
'm', 'a', 'r', 'c',
'u', 's', 'c', 'o',
'd', 'e'
]
[ 1, 2, 3, 4 ]
[ [ 'a', 1 ], [ 'b', 2 ], [ 'c', 3 ] ]
ในตัวอย่างเราได้ใช้เมธอด Array.from
สำหรับแปลงออบเจ็คให้อาเรย์ ผลลัพธ์ที่ได้ขึ้นอยู่กับการทำงานของ [Symbol.iterator]
ของออบเจ็คแต่ละประเภทที่ถูกส่งเป็นอาเรย์กิวเมนต์
- String: ผลลัพธ์ที่ได้จะเป็นอาเรย์ของตัวอักษรภายใน String
- อาเรย์: ได้ผลลัพธ์เช่นเดิม
- Map หรือ Set: ได้ผลลัพธ์เป็นอาเรย์ของ Key และ Value ของออบเจ็คดังกล่าว
- และออบเจ็คประเภทอื่นๆ อาจให้ผลลัพธ์ที่ต่างออกไป
นี่เป็นตัวอย่างเพิ่มเติมในการประยุกต์ใช้งานเมธอด Array.from
มาช่วยในการเขียนโปรแกรม
// 1. Using like arr.map method
let numbers = [1, 2, 3, 4];
console.log(Array.from(numbers, n => n * 2));
// 2. Convert string to array of char code
let names = "Metin"
console.log(Array.from(names, ch => ch.charCodeAt(0)));
// 3. Create array from 1 - 5
console.log(Array.from({ length: 5 }, (v, i) => i + 1));
// 4. Create array from custom ranges and step
let min = 10;
let count = 5;
let step = 10;
console.log(Array.from({ length: count }, function (value, index) {
return (index * step) + min;
}));
นี่เป็นผลลัพธ์การทำงานของโปรแกรม
[ 2, 4, 6, 8 ]
[ 77, 101, 116, 105, 110 ]
[ 1, 2, 3, 4, 5 ]
[ 10, 20, 30, 40, 50 ]
เราสามารถส่งอาร์กิวเมนต์ตัวที่สองซึ่งเป็นฟังก์ชัน Callback ที่รับค่าและ Index ของอาเรย์ และส่งค่ากลับเป็นค่าที่ต้องการในการสร้างอาเรย์ได้ ในตัวอย่างนี่คือสิ่งที่เราทำ
- เราสามารถใช้เมธอด
Array.from
เพื่อแปลงค่าในอาเรย์เป็นค่าใหม่เหมือนกับเมธอดmap
ได้ โดยการส่งค่าใหม่ออกมาจากฟังก์ชัน Callback - ไม่เหมือนเมธอด
map
เมธอดArray.from
สามารถรับค่าเป็นออบเจ็คอื่นนอกจากอาเรย์ได้ ในกรณีนี้เป็นการแปลง String ให้เป็นอาเรย์ของรหัสตัวอักษรของมัน - เราสามารถใช้มันเพื่อสร้างอาเรย์ของตัวเลขจาก
1 - N
ได้ ในการส่งอาเร์กิวเมนต์แรกเป็น{length: 5}
เมธอดจะมองว่านี่เป็นอาเรย์ที่มีสมาชิก 5 ตัวแต่ค่าของมันเป็นundefined
และเราใช้ Index ในการสร้างค่าของอาเรย์แทน - จากคำสั่งก่อนหน้า ในคำสั่งนี้เป็นการปรับปรุงให้สามารถสร้างอาเรย์จากช่วงที่กำหนด และเพิ่มค่าตามที่ต้องการได้ คุณสามารถเปลี่ยนค่าในตัวแปร
min
,count
และstep
เป็นค่าที่ต้องการได้
ในบทนี้ คุณได้เรียนรู้เกี่ยวกับการใช้งานเมธอดพื้นฐานของอาเรย์ในภาษา JavaScript