Array methods ในภาษา JavaScript

25 September 2020

ในบทนี้จะเป็นการแนะนำการใช้งานเมธอดของอาเรย์ในภาษา JavaScript อาเรย์นั้นมีเมธอดเป็นจำนวนมากที่เราสามารถใช้เพื่ออำนวยความสะดวกในการเขียนโปรแกรม นี่เป็นเนื้อหาที่คุณจะได้เรียนรู้ในบทนี้

  • การวนรอบอาเรย์
  • การเชื่อมต่ออาเรย์
  • การค้นหาค่าในอาเรย์
  • การตรวจสอบค่าในอาเรย์
  • เมธอด slice อาเรย์
  • เมธอด toString และ join
  • เมธอดจากคลาส Array

อาเรย์เป็นออบเจ็คจากคลาส Array มันมีเมธอดสองประเภทที่เราสามารถใช้งานได้ ได้แก่ Instance method เป็นเมธอดที่สามารถเรียกใช้ผ่านอาเรย์ออบเจ็คได้โดยตรง หรือคลาสเมธอดที่เรียกจาก เช่น เมธอด Array.from เป็นต้น

การวนรอบอาเรย์

อย่างที่ได้ทราบไปแล้วในบทก่อนหน้าของอาเรย์ว่า เราสามารถใช้คำสั่ง for loop เพื่อวนรอบค่าในอาเรย์ อย่างไรก็ตาม อาเรย์นั้นมีเมธอด forEach ที่เราสามารถใช้สำหรับวนรอบอาเรย์ได้เช่นกัน นี่เป็นตัวอย่าง

foreach.js
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

concat.js
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 เพื่อเชื่อมต่ออาเรย์แบบต่อเนื่องกันในคำสั่งเดียวได้ นี่เป็นตัวอย่าง

concat_chaining.js
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

มาดูตัวอย่างการใช้งานเมธอดเหล่านี้เพื่อตรวจสอบว่ามีผลไม้ที่เราต้องการค้นหาอยู่ในอาเรย์หรือไม่ นี่เป็นตัวอย่าง

array_search.js
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 ของสมาชิกสุดท้ายที่พบในอาเรย์แทน หรือกล่าวอีกนัยหนึ่ง เมธอดตรวจสอบจากสมาชิกตัวสุดท้ายของอาเรย์มา นี่เป็นตัวอย่าง

array_search2.js
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" หรือไม่

every.js
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 เท่านั้น นี่เป็นตัวอย่าง

some.js
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 เพื่อค้นหาว่าในอาเรย์มีตัวเลขจำนวนคี่อยู่หรือไม่

some2.js
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 สิ้นสุดของการตัด (แบบไม่นับรวม) และถ้าพารามิเตอร์ที่สองถูกละเว้น เมธอดจะตัดเอาไปจนถึงสมาชิกตัวสุดท้ายของอาเรย์ นี่เป็นตัวอย่างการใช้งาน

array_slice.js
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 หมายถึงสมาชิกถัดมาก่อนตัวสุดท้าย ถัดมาเรื่อยๆ ตามลำดับ นี่เป็นตัวอย่าง

negative_slice_indices.js
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 เพื่อลบข้อมูลจากตำแหน่งที่ต้องการออกจากอาเรย์ นี่เป็นตัวอย่าง

splice_delete.js
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 สำหรับแทนที่ค่าในอาเรย์ด้วยค่าใหม่ได้ นี่เป็นตัวอย่างการใช้งาน

splice_replace.js
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 ที่ต้องการ นี่เป็นตัวอย่าง

splice_insert.js
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 ในรูปแบบที่เรียบง่าย โดยคั่นแต่ละค่าในอาเรย์ด้วยเครื่องหมายคอมมา (,) ยกตัวอย่างเช่น

tostring.js
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 นอกจากการใช้คอมมาได้ นี่เป็นตัวอย่าง

join.js
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 ใช้เพื่อตรวจสอบว่าออบเจ็คนั้นเป็นอาเรย์หรือไม่ นี่เป็นเมธอดที่มีประโยชน์ในกรณีที่เราต้องการตรวจสอบว่าค่าในตัวแปรหรือออบเจ็คนั้นเป็นอาเรย์จริงๆ หรือปล่าว นี่เป็นตัวอย่างการใช้งาน

is_array.js
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 ออบเจ็ค

array_from.js
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 มาช่วยในการเขียนโปรแกรม

array_from2.js
// 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 ของอาเรย์ และส่งค่ากลับเป็นค่าที่ต้องการในการสร้างอาเรย์ได้ ในตัวอย่างนี่คือสิ่งที่เราทำ

  1. เราสามารถใช้เมธอด Array.from เพื่อแปลงค่าในอาเรย์เป็นค่าใหม่เหมือนกับเมธอด map ได้ โดยการส่งค่าใหม่ออกมาจากฟังก์ชัน Callback
  2. ไม่เหมือนเมธอด map เมธอด Array.from สามารถรับค่าเป็นออบเจ็คอื่นนอกจากอาเรย์ได้ ในกรณีนี้เป็นการแปลง String ให้เป็นอาเรย์ของรหัสตัวอักษรของมัน
  3. เราสามารถใช้มันเพื่อสร้างอาเรย์ของตัวเลขจาก 1 - N ได้ ในการส่งอาเร์กิวเมนต์แรกเป็น {length: 5} เมธอดจะมองว่านี่เป็นอาเรย์ที่มีสมาชิก 5 ตัวแต่ค่าของมันเป็น undefined และเราใช้ Index ในการสร้างค่าของอาเรย์แทน
  4. จากคำสั่งก่อนหน้า ในคำสั่งนี้เป็นการปรับปรุงให้สามารถสร้างอาเรย์จากช่วงที่กำหนด และเพิ่มค่าตามที่ต้องการได้ คุณสามารถเปลี่ยนค่าในตัวแปร min, count และ step เป็นค่าที่ต้องการได้

ในบทนี้ คุณได้เรียนรู้เกี่ยวกับการใช้งานเมธอดพื้นฐานของอาเรย์ในภาษา JavaScript

บทความนี้เป็นประโยชน์หรือไม่? Yes · No