อาเรย์ ในภาษา JavaScript

ในบทนี้ คุณจะได้เรียนรู้เกี่ยวกับอาเรย์ในภาษา JavaScript เราจะพูดถึงการประกาศ การใช้งาน และการดำเนินการพื้นฐานเกี่ยวกับอาเรย์ นี่เป็นเนื้อหาในบทนี้

• การประกาศและใช้งานอาเรย์
• การเข้าถึงข้อมูลในอาเรย์
• การหาขนาดของอาเรย์
• การเพิ่มและลบข้อมูลในอาเรย์
• การวนค่าในอาเรย์ด้วยคำสั่ง for
• การคัดลอกอาเรย์
• อาเรย์สองมิติ
• เมธอดของอาเรย์

การประกาศและใช้งานอาเรย์

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

อาเรย์นั้นเป็นออบเจ็คหรือตัวแปรที่เราจะต้องประกาศก่อนใช้งานเหมือนกับข้อมูลประเภทอื่นๆ นี่เป็นตัวอย่างของการประกาศอาเรย์ในภาษา JavaScript

let numbers = [10, 20, 30, 40, 50];
let countries = [
    "Thailand", "Japanese", 
    "Singapore", "United Kingdom"
];

console.log(numbers);
console.log(countries);

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

[ 10, 20, 30, 40, 50 ]
[ 'Thailand', 'Japanese', 'Singapore', 'United Kingdom' ]

ในตัวอย่าง เราได้ประกาศตัวแปรอาเรย์สองตัวได้แก่ numbers สำหรับเก็บตัวเลข 5 จำนวนตัว และ countries สำหรับเก็บชื่อของประเภทจำนวน 4 รายชื่อ โดยการใช้ Array literal ซึ่งค่าของอาเรย์จะต้องอยู่ในวงเล็บ [...] และคั่นแต่ละสมาชิกในอาเรย์ด้วยคอมมา (,) จะเห็นว่าเราสามารถเก็บข้อมูลเป็นจำนวนมากไว้ในอาเรย์ได้

จากนั้นเราแสดงค่าในตัวแปรอาเรย์ด้วยฟังก์ชัน console.log ข้อมูลจะถูกแสดงในรูปแบบของอาเรย์ Literal โดยทั่วไปแล้วเรามักจะใช้ฟังก์ชันนี้สำหรับการตรวจสอบข้อมูลและโครงสร้างในอาเรย์

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

let numbers = [];
numbers.push(10);
numbers.push(20);
numbers.push(30);
numbers.push(40);
// [10, 20, 30, 40]

let languages = ["Ruby"];
languages.push("Python");
languages.push("JavaScript");
// ["Ruby", "Python", "JavaScript"]

ในตัวอย่าง เราได้ประกาศตัวแปรอาเรย์ numbers ซึ่งเป็นอาเรย์ว่างเปล่า จากนั้นเพิ่ม 4 ตัวเลขเข้าไปยังอาเรย์ด้วยเมธอด push ต่อมาประกาศตัวแปรอาเรย์ languages ที่มีสมาชิกหนึ่งตัว จากนั้นเพิ่มชื่อของภาษาเขียนโปรแกรมเข้าไปอีกสองชื่อด้วยเมธอดเดียวกัน

เมธอด push นั้นเป็นเมธอดหลักที่ใช้สำหรับเพิ่มข้อมูลเข้าไปยังอาเรย์ ข้อมูลจะถูกเพิ่มไปยังตำแหน่งสุดท้ายในอาเรย์ และเรียงตามลำดับที่มันถูกเพิ่มเข้าไปตามลำดับของการเรียกใช้เมธอด

นอกจากนี้ เรายังสามารถเก็บข้อมูลหลายประเภทไว้ในตัวแปรอาเรย์เดียวกันได้ ยกตัวอย่างเช่น

let mixedTypes = [10, 3.14, true, "JavaScript", new Date()];

เราได้ประกาศตัวแปรอาเรย์ mixedTypes สำหรับเก็บข้อมูลที่เป็นตัวเลข Boolean, String และออบเจ็คของวันที่ แต่ในทางปฏิบัติแล้วเรามักเก็บข้อมูลประเภทเดียวกันไว้ในอาเรย์ ยกเว้นแต่ว่าคุณต้องการทำแบบนี้จริงๆ เพื่อวัตถุประสงค์บางอย่าง

การเข้าถึงข้อมูลในอาเรย์

อาเรย์เก็บข้อมูลด้วย Index และ Index ของอาเรย์นั้นเริ่มต้นจาก 0 นั่นหมายความว่าเมื่ออาเรย์ของเรามีสมาชิกทั้งหมด N ตัว เราสามารถเข้าถึงค่าของอาเรย์ได้จาก Index 0 ถึง N - 1 โดยที่ N เป็นขนาดของอาเรย์ที่สามารถอ่านค่าได้จาก Property length นี่เป็นตัวอย่าง

let numbers = [10, 20, 30, 40, 50];
console.log("numbers[0]:", numbers[0]);
console.log("numbers[1]:", numbers[1]);
console.log("numbers[2] + numbers[3]:", numbers[2] + numbers[3]);
console.log("numbers[4]:", numbers[4]);
console.log("numbers[4]:", numbers[numbers.length - 1]);

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

numbers[0]: 10
numbers[1]: 20
numbers[2] + numbers[3]: 70
numbers[4]: 50
numbers[4]: 50

ในตัวอย่าง เป็นการเข้าถึงสมาชิกในอาเรย์ numbers ด้วย Index ของมัน โดยที่ numbers[0] นั้นหมายถึงสมาชิกตัวเลขในอาเรย์ numbers[1] หมายถึงสมาชิกตัวที่สอง และเนื่องจากอาเรย์นี้มีขนาดเป็น 5 ดังนั้น numbers[4] หมายถึงสมาชิกตัวสุดท้ายในอาเรย์

console.log("numbers[2] + numbers[3]:", numbers[2] + numbers[3]);

การใช้งานค่าในอาเรย์นั้นจะเหมือนกับตัวแปร นั่นหมายความว่า numbers[0] เป็นเหมือนกับตัวแปรตัวแปรหนึ่งที่สามารถอ่านและเปลี่ยนแปลงค่าได้ ในคำสั่งนี้ เราหาผลรวมของสมาชิกใน Index ที่สอง 2 และ 3 ของอาเรย์ และแสดงออกทางหน้าจอ

console.log("numbers[4]:", numbers[numbers.length - 1]);

นอกจากนี้เรายังสามารถเข้าถึงสมาชิกตัวสุดท้ายในอาเรย์โดยการคำนวณจากขนาดของอาเรย์ลบด้วย 1 ได้ ในคำสั่งนี้ เราอ่านค่าขนาดของอาเรย์จาก Property length ที่มีค่าเป็น 5 จากนั้นนำมันลบด้วยหนึ่งและเราจะได้ Index ของสมาชิกตำแหน่งสุดท้ายของอาเรย์

การเข้าถึงสมาชิกในอาเรย์นั้นเหมือนกับตัวแปรปกติ เราสามารถเข้าถึงสมาชิกใน Index ของอาเรย์เพื่ออ่านค่าและเปลี่ยนแปลงค่าได้ ในตัวอย่างนี้เป็นการเปลี่ยนแปลงค่าในอาเรย์ผ่าน Index ของมัน

let names = ["Brendan", "Chris", "Metin", "John"];
console.log(names);

names[0] = "Joseph";
names[2] = "Metin M";
console.log(names);

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

[ 'Brendan', 'Chris', 'Metin', 'John' ]
[ 'Joseph', 'Chris', 'Metin M', 'John' ]

เราได้เปลี่ยนค่าที่เก็บในอาเรย์ที่ Index ตำแหน่งที่ 0 (สมาชิกตัวแรก) และตำแหน่งที่ 2 (สมาชิกตัวทีสาม) เป็น "Joseph" และ "Metin M" ตามลำดับ และแสดงข้อมูลในอาเรย์ทั้งก่อนและหลังจากการเปลี่ยนค่าเพื่อให้คุณได้เห็นว่าเกิดอะไรขึ้น

การหาขนาดของอาเรย์ด้วย Property length

เราสามารถหาขนาดของอาเรย์ได้ด้วยการอ่านค่าจาก Property length โดย Property นั้นจะส่งค่ากลับเป็นจำนวนสมาชิกทั้งหมดในอาเรย์ นี่เป็นตัวอย่าง

let fruits  = ["Apple", "Banana", "Orange"];
console.log(fruits);
console.log("Length of fruits: ", fruits.length);

// Add two items to array
fruits.push("Grape");
fruits.push("Tomato");
console.log(fruits);
console.log("Length of fruits: ", fruits.length);

fruits.pop();
console.log(fruits);
console.log("Length of fruits: ", fruits.length);

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

[ 'Apple', 'Banana', 'Orange' ]
Length of fruits:  3
[ 'Apple', 'Banana', 'Orange', 'Grape', 'Tomato' ]
Length of fruits:  5
[ 'Apple', 'Banana', 'Orange', 'Grape' ]
Length of fruits:  4

ในตัวอย่าง เราได้ประกาศตัวแปรอาเรย์ fruits สำหรับเก็บชื่อผลไม้สามรายชื่อ และนับจำนวนสมาชิกของอาเรย์ด้วยการอ่านค่าจาก Property length และแสดงออกทางหน้าจอ

fruits.push("Grape");
fruits.push("Tomato");

จากนั้นเพิ่มผลไม้เข้าไปยังอาเรย์ด้วยเมธอด push อีกสองรายชื่อ และแสดงจำนวนของสมาชิกที่มีอยู่ในอาเรย์อีกครั้ง จะเห็นว่าค่าของ Property length จะเปลี่ยนไปในทันทีตามจำนวนสมาชิกที่มีอยู่ในอาเรย์

fruits.pop();

สุดท้ายเราใช้เมธอด pop เพื่อนำข้อมูลในตำแหน่งสุดท้ายออกไปจากอาเรย์ นั่นทำให้ในตอนนี้อาเรย์เหลือสมาชิกทั้งหมด 4 ตัวในตอนสุดท้าย

ถึงแม้ว่าเราจะบอกว่า Property length ส่งค่ากลับเป็นจำนวนสมาชิกทั้งหมดในอาเรย์ แต่นั่นเพื่อให้เข้าใจง่ายและเกิดขึ้นในกรณีที่เรากำหนดค่าให้กับอาเรย์ในรูปแบบปกติเท่านั้น ในความเป็นจริงแล้ว Property length ส่งค่ากลับเป็น Index ที่สูงที่สุดในอาเรย์ที่มีค่าบวกด้วย 1 (maxIndex + 1) นี่เป็นตัวอย่าง

let chars = ["A", "B"];
chars[9] = "J";

console.log(chars);
console.log("Length of chars:", chars.length);
console.log('chars[3]:', chars[3]);

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

[ 'A', 'B', <7 empty items>, 'J' ]
Length of chars: 10
chars[3]: undefined

ในกรณีนี้ เมื่อเรากำหนดค่าให้กับตัวแปรผ่าน Index โดยตรงโดยมีการข้ามช่วงของ Index ไป ในตัวอย่างเราได้กำหนดค่าให้กับอารเรย์ chars ใน Index ตำแหน่งที่ 9 เป็นตัวอักษณ "J" นั่นทำให้ค่าของ Index สุดของอาเรย์นี้เป็น 9

console.log("Length of chars:", chars.length);
console.log('chars[3]:', chars[3]);

จากนั้นเมื่อเราอ่านค่าจาก Property length เพื่อหาขนาดของอาเรย์ ผลลัพธ์ที่ได้จะเป็น Index สูงสุด +1 (9 + 1) ซึ่งเท่ากับ 10 นั่นเอง และในขณะเดียวกันค่าใน Index ตำแหน่งที่ 3 - 8 ที่ถูกข้ามการกำหนดค่าไปจะมีค่าเป็น undefined โดยอัตโนมัติ

การเพิ่มและนำข้อมูลออกจากอาเรย์

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

• เมธอด push - เพิ่มสมาชิกใหม่เข้าไปยังตำแหน่งสุดท้ายของอาเรย์
• เมธอด pop - ลบสมาชิกที่ตำแหน่งสุดท้ายออกจากอาเรย์ และส่งค่าดังกล่าวกลับมา
• เมธอด unshift - เพิ่มสมาชิกใหม่เข้าไปยังตำแหน่งแรกของอาเรย์
• เมธอด shift - ลบสมาชิกที่ตำแหน่งแรกออกจากอาเรย์ และส่งค่าดังกล่าวกลับมา

ในการใช้งานเมธอดเหล่านี้สำหรับเพิ่มหรือลบข้อมูลในอาเรย์ Property length จะอัพเดทในทันทีตามจำนวนสมาชิกที่มีอยู่ในอาเรย์ และ Index จะถูกจัดเรียงใหม่เพื่อให้สอดคล้องกับลำดับใหม่ที่เกิดขึ้นหลังจากการเปลี่ยนแปลง นี่เป็นตัวอย่าง

let numbers = [1, 2, 3, 4];
console.log("Before:", numbers);

numbers.push(5);
numbers.push(6);
console.log("After push:", numbers);

numbers.unshift(0);
numbers.unshift(-1);
console.log("After unshift:", numbers);

console.log("numbers[0]:", numbers[0]);
console.log("numbers[2]:", numbers[2]);

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

Before: [ 1, 2, 3, 4 ]
After push: [ 1, 2, 3, 4, 5, 6 ]
After unshift: [ -1, 0, 1, 2, 3, 4, 5, 6 ]
numbers[0]: -1
numbers[2]: 1

ในตัวอย่าง แสดงการใช้งานเมธอด push สำหรับเพิ่มข้อมูลเข้าไปที่ท้ายอาเรย์ และเมธอด unshift สำหรับเพิ่มข้อมูลเข้าไปที่ด้านหน้าของอาเรย์ หลังจากที่การเพิ่มเสร็จสิ้นทำให้ Index ของอาเรย์ถูกจัดเรียงใหม่ ดังนั้นสมาชิกตัวแรกของอาเรย์ได้กลายมาเป็น -1 แทน

สำหรับการนำข้อมูลออกจากอาเรย์ เมธอด pop นำสมาชิกตัวสุดท้ายออกจากอาเรย์และส่งค่าดังกล่าวกลับมา นี่เป็นตัวอย่าง

let items = ["One", "Two", "Three"];
console.log("Current in array:", items);

let item = items.pop();
console.log("Removed:", item);
console.log("Current in array:", items);

console.log("Removed two items");
items.pop();
items.pop();
console.log("Current in array:", items);

console.log("Is an array empty?", items.length == 0);
// Call pop on an empty array
console.log(items.pop());

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

Current in array: [ 'One', 'Two', 'Three' ]
Removed: Three
Current in array: [ 'One', 'Two' ]
Removed two items
Current in array: []
Is an array empty? true
undefined

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

เมธอด shift นำข้อมูลที่ตัวแรกออกจากอาเรย์และส่งค่านั้นกลับมา การใช้งานเมธอด shift ร่วมกับเมธอด push สามารถแสดงการทำงานของโครงสร้างข้อมูลแบบ Queue ได้

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

// Customers' queue
let queue = [];

console.log("MARCUSCODE SHOP OPENED");

console.log("2 customers enter the queue.");
queue.push("Metin");
queue.push("Chris");
console.log("Current queue:", queue);

console.log("\nJohn enters the queue.");
queue.push("John");
console.log("Current queue:", queue);

console.log("\nThe first order has finished");
let first = queue.shift();
console.log(first + " picked an order and leave the queue");
console.log("Current queue:", queue);

console.log("\nSecond order has finished");
let second = queue.shift();
console.log(second + " picked an order and leave the queue");
console.log("Current queue:", queue);

console.log("\nBrendan enters the queue.");
queue.push("Brendan");
console.log("Current queue:", queue);

console.log("\nThird order has finished");
let third = queue.shift();
console.log(third + " picked an order and leave the queue");
console.log("Current queue:", queue);

console.log("\nMARCUSCODE SHOP CLOSED");

if (queue.length == 0) {
    console.log("No customers left in the queue");
} else {
    console.log(queue.length + " customer(s) left in the queue");
    console.log("They have to comeback tomorrow :("); 
}

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

MARCUSCODE SHOP OPENED
2 customers enter the queue.
Current queue: [ 'Metin', 'Chris' ]

John enters the queue.
Current queue: [ 'Metin', 'Chris', 'John' ]

The first order has finished
Metin picked an order and leave the queue
Current queue: [ 'Chris', 'John' ]

Second order has finished
Chris picked an order and leave the queue
Current queue: [ 'John' ]

Brendan enters the queue.
Current queue: [ 'John', 'Brendan' ]

Third order has finished
John picked an order and leave the queue
Current queue: [ 'Brendan' ]

MARCUSCODE SHOP CLOSED
1 customer(s) left in the queue
They have to comeback tomorrow :(

ในตัวอย่างเป็นโปรแกรมจำลองการทำงานของ Queue โดยการใช้เมธอด push และ shift ของอาเรย์

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

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

การวนค่าในอาเรย์ด้วยคำสั่ง for

• คำสั่ง for of
• คำสั่ง for in
• คำสั่ง for loop

อาเรย์นั้นเก็บข้อมูลเป็นแบบชุดลำดับและนั่นทำให้มันสามารถวนรอบได้ ในภาษา JavaScript เราสามารถวนรอบอาเรย์ได้หลายรูปแบบ โดยทั่วไปแล้วมักจะใช้คำสั่งวนซ้ำ เช่น คำสั่ง for of หรือคำสั่ง for เป็นต้น มาดูตัวอย่างการใช้คำสั่ง for ในรูปแบบต่างๆ สำหรับวนค่าในอาเรย์

คำสั่ง for of นั้นเป็นคำสั่งที่เรียบง่ายที่สุดในการวนรอบอาเรย์ มันถูกออกแบบมาสำหรับให้วนรอบออบเจ็คที่สามารถวนรอบได้ (Iterable object) และอาเรย์ก็เป็นหนึ่งในออบเจ็คดังกล่าว นี่เป็นตัวอย่างการใช้งานคำสั่ง for of สำหรับวนสมาชิกในอาเรย์

let numbers = [10, 20, 30, 40, 50];
let sum = 0;
for (let item of numbers) {
    sum += item;
    console.log(item);
}
console.log("Sum:", sum);

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

10
20
30
40
50
Sum: 150

คำสั่ง for of จะวนรอบสมาชิกทั้งหมดในอาเรย์ และนำค่าของการวนแต่ละรอบกำหนดไว้ในตัวแปร item จากนั้นเราได้หาผลรวมของตัวเลขทั้งหมดในอาเรย์ และเก็บไว้ในตัวแปร sum และแสดงผลออกทางหน้าจอ

และต่อมาเป็นการใช้งานคำสั่ง for loop ซึ่งเป็นคำสั่งวนซ้ำพื้นฐานในภาษา JavaScript ในการใช้วิธีนี้ เราจะต้องสร้าง Index เพื่อเข้าถึงสมาชิกในอาเรย์ด้วยตัวเอง ยกตัวอย่างเช่น

let days = [
    "Sunday", "Monday", "Tuesday", "Wednesday", 
    "Thursday", "Friday", "Saturday"
];
console.log("Iterate over array");
for (let i = 0; i < days.length; i++) {
    console.log(i, days[i]);
}

console.log("Iterate in reversed order");
for (let i = days.length - 1; i >= 0; i--) {
    console.log(i, days[i]);
}

console.log("Iterate by two steps");
for (let i = 0; i < days.length; i += 2) {
    console.log(i, days[i]);
}

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

Iterate over array
0 Sunday
1 Monday
2 Tuesday
3 Wednesday
4 Thursday
5 Friday
6 Saturday
Iterate in reversed order
6 Saturday
5 Friday
4 Thursday
3 Wednesday
2 Tuesday
1 Monday
0 Sunday
Iterate by two steps
0 Sunday
2 Tuesday
4 Thursday
6 Saturday

ในตัวอย่าง เป็นการใช้งานคำสั่ง for loop เพื่อวนรอบสมาชิกในอาเรย์ในรูปแบบต่างๆ จะเห็นว่าการใช้วิธีนี้ให้ความยืดหยุ่นกับการควบคุมวิธีที่เราต้องการอ่านค่ามากขึ้น เช่น วนตามลำดับ วนจากสมาชิกตัวสุดท้ายมา หรือวนโดยกระโดดข้ามไปทีละสอง Index เป็นต้น

นอกจากนี้ ในกรณีที่เราต้องการค่า Index ของอาเรย์เราสามารถใช้คำสั่ง for in โดยคำสั่งนี้ส่งค่ากลับเป็น Index ของอาเรย์แทนค่าของข้อมูล และเราสามารถนำ Index ไปใช้สำหรับเข้าถึงข้อมูลในภายหลังได้ ยกตัวอย่างเช่น

let numbers = [10, 20, 30, 40, 50];
for (let index in numbers) {
    console.log(`numbers[${index}]: ${numbers[index]}`);
}

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

numbers[0]: 10
numbers[1]: 20
numbers[2]: 30
numbers[3]: 40
numbers[4]: 50

ในการกรณีที่คุณต้องการเข้าถึง Index ของอาเรย์ด้วย วิธีที่ง่ายที่สุดก์คือการใช้คำสั่ง for in มันส่งค่ากลับเป็น Index ของอาเรย์แทน และเราสามารใช้ Index เพื่อเข้าถึงข้อมูลได้อีกที ยกตัวอย่างเช่น numbers[index]

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

let numbers = [10, 20, 30, 40, 50];
numbers.somekey = "Hello";

for (let index in numbers) {
    console.log(`numbers[${index}]: ${numbers[index]}`);
}

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

numbers[0]: 10
numbers[1]: 20
numbers[2]: 30
numbers[3]: 40
numbers[4]: 50
numbers[somekey]: Hello

ในกรณีนี้ คำสั่ง for in วน Index และ Key ทั้งหมดภายในตัวแปรอาเรย์ และนี่เป็นวิธีการทำงานของมันที่คุณควรทราบ ถ้าหากคุณแน่ใจว่าอาเรย์ของคุณถูกสร้างโดยคุณและมีเพียง Index ที่เป็นตัวเลขเท่านั้น คุณสามารถใช้งานมันได้อย่างปลอดภัย

การคัดลอกอาเรย์

อาเรย์ในภาษา JavaScript นั้นเป็นออบเจ็ค นั่นหมายความว่าเราไม่สามารถคัดลอกอาเรย์ในวิธีที่เรียบง่ายด้วยการใช้ตัวดำเนินการกำหนดค่าได้ ยกตัวอย่างเช่น

let a = [1, 2, 3, 4, 5];
let b = a;

// Intended to add new element only to b
b.push(6);

console.log('a:', a);
console.log('b:', b);

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

a: [ 1, 2, 3, 4, 5, 6 ]
b: [ 1, 2, 3, 4, 5, 6 ]

ในตัวอย่าง เราได้ประกาศตัวแปรอาเรย์ a ที่มีสมาชิกเป็นตัวเลข 5 ตัว จากนั้นเราประกาศตัวแปร b และกำหนดค่าให้เท่ากับตัวแปร a เพื่อคาดหวังว่าในอาเรย์ b จะมีสมาชิกเหมือนกับตัวแปร a

b.push(6);

จากนั้นเราตั้งใจว่าจะเพิ่มตัวเลข 6 เข้าไปในอาเรย์ b เท่านั้น แต่ผลลัพธ์ที่ได้คืออาเรย์ a ก็มีตัวเลขดังกล่าวด้วยเหมือนกับว่ามันเป็นตัวแปรเดียวกัน

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

let b = a;

ดังนั้นเมื่อเราประกาศตัวแปร b และกำหนดค่าให้เท่ากับตัวแปร a เท่ากับว่าทำให้ตัวแปร b เก็บตำแหน่งที่อยู่ของหน่วยความจำเดียวกันกับ a นั่นเป็นเหตุผลว่าทำไมเมื่อเพิ่มตัวเลขเข้าไปยังตัวแปร b ส่งผลให้ในตัวแปร a เพิ่มตาม เพราะว่าทั้งสองอ้างถึงอาเรย์หรือออบเจ็คเดียวกันนั่นเอง

เพื่อพิสูจน์ว่าอาเรย์เป็นออบเจ็ค เราสามารถใช้ตัวดำเนินการ typeof เพื่อตรวจสอบประเภทของข้อมูลได้ ดังตัวอย่างต่อไปนี้

let a = [1, 2, 3, 4, 5];
console.log(typeof a);  // object

แล้วคำถามก็คือเราจะสามารถคัดลอกอาเรย์ได้อย่างไร?

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

นี่เป็นตัวอย่างของการใช้เมธอด slice ในการคัดลอกอาเรย์

let a = [1, 2, 3, 4, 5];
let b = a.slice(); // Clone the whole array

b.push(6);

console.log('a:', a);
console.log('b:', b);

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

a: [ 1, 2, 3, 4, 5 ]
b: [ 1, 2, 3, 4, 5, 6 ]

ในตัวอย่าง เป็นการใช้งานเมธอด slice เพื่อคัดลอกอาเรย์ a ไปยังอาเรย์ b นั่นทำให้ตอนนี้ทั้งสองตัวแปรเป็นคนละอาเรย์กัน ดังนั้นเมื่อเราเพิ่มตัวเลขในอาเรย์ b มันไม่ส่งผลต่ออาเรย์ a อีกต่อไป

เมธอด slice นั้นใช้สำหรับคัดลอกหรือตัดส่วนของอาเรย์โดยเลือกจากช่วงของ Index ได้โดยการกำหนดพารามิเตอร์ให้กับเมธอด ในกรณีที่ไม่มีพารามิเตอร์ จะเป็นการคัดลอกข้อมูลทั้งหมดของอาเรย์ คุณจะได้เรียนเกี่ยวกับเมธอดนี้อีกครั้งในบทเมธอดของอาเรย์

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

let a = [1, 2, 3, 4, 5];
let b = [];

// Copy each element to new array
for (let item of a) {
    b.push(item);
}

b.push(6);

console.log('a:', a);
console.log('b:', b);

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

a: [ 1, 2, 3, 4, 5 ]
b: [ 1, 2, 3, 4, 5, 6 ]

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

แต่สำหรับการคัดลอกอาเรย์นั้น เนื่องจากเรารู้ว่าสามารถใช้เมธอด slice ที่มีอยู่แล้ว ดังนั้นคุณควรใช้มันเนื่องจากว่ามันสั้นและรวดเร็วกว่า นอกจากนี้เรายังสามารถคัดลอกอาเรย์ด้วยวิธีอื่นได้ เช่น โดยการใช้เมธอด Array.from เป็นต้น

อาเรย์สองมิติ หรืออาเรย์ซ้อนอาเรย์

อาเรย์สามารถเก็บข้อมูลได้ทุกประเภทรวมถึงตัวมันเอง เมื่อเราใช้อาเรย์เก็บข้อมูลที่เป็นอาเรย์ เราเรียกอาเรย์ในรูปแบบนี้ว่าอาเรย์หลายมิติ หรืออาเรย์ซ้อนอาเรย์ ในตัวอย่างนี้ เราจะสร้างอาเรย์สองมิติสำหรับเก็บข้อมูลแบบตัวเลข นี่เป็นตัวอย่าง

let numbers = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9]
];

console.log("numbers[0][1]:", numbers[0][1]);
console.log("numbers[1][1]:", numbers[1][1]);

numbers[2][0] = -7;
console.log(numbers);

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

numbers[0][1]: 2
numbers[1][1]: 5
[ [ 1, 2, 3 ], [ 4, 5, 6 ], [ -7, 8, 9 ] ]

ตัวแปรอาเรย์ numbers นั้นเก็บสามอาเรย์ในตัวมันเอง ในการเข้าถึงตัวเลข 2 จะผ่าน Index numbers[0][1] ซึ่ง [0] หมายถึงเข้าถึงอาเรย์แรกใน numbers ซึ่งก็คือ [1, 2, 3] จากนั้น [1] เป็นการเข้าถึงสองในอาเรย์ย่อยดังกล่าว และการทำงานนั้นเป็นเช่นเดียวกันสำหรับการเข้าถึงค่าของ 5 และการเปลี่ยนแปลงค่าของ 7 เป็น -7

เมธอดของอาเรย์

อาเรย์นั้นเป็นออบเจ็คจากคลาส Array ซึ่งมีเมธอดเป็นจำนวนมากที่เราสามารถใช้งานได้ ในตัวอย่างนี้ จะเป็นการแนะนำการใช้งานเมธอดเบื้องต้นของอาเรย์ นี่เป็นตัวอย่าง

let continents = [
    "Asia", "Africa", "North America", "South America", 
    "Antarctica", "Europe", "Australia"
];

continents.forEach(function(value, index) {
    console.log(value, index);
});

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

Asia 0
Africa 1
North America 2
South America 3
Antarctica 4
Europe 5
Australia 6

เมธอด forEach ใช้สำหรับวนรอบอาเรย์ โดยเราต้องกำหนดฟังก์ชัน Callback ที่จะถูกเรียกใช้สำหรับแต่ละสมาชิกในอาเรย์ และกำหนดสิ่งที่ต้องการทำในฟังก์ชันดังกล่าว และนี่เป็นอีกตัวอย่างของการใช้งานอีกสองเมธอด

let languages = ["Ruby", "GO", "PHP", "JavaScript", "Python"];
console.log(languages.indexOf("JavaScript"));   // 3
console.log(languages.indexOf("TypeScript"));   // -1 (No exist)

languages.sort();
console.log(languages);
// Output: [ 'GO', 'JavaScript', 'PHP', 'Python', 'Ruby' ]

เมธอด indexOf ใช้ค้นหาข้อมูลในอาเรย์ว่ามีอยู่หรือไม่ ถ้าหากพบส่งค่ากลับเป็นตำแหน่ง Index ของสมาชิกดังกล่าวในอาเรย์ และถ้าหากไม่พบส่งค่ากลับเป็น -1 และเมธอด sort ใช้สำหรับเรียงอาเรย์จากน้อยไปมาก

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

ในบทนี้ คุณได้เรียนรู้เกี่ยวกับอาเรย์ในภาษา JavaScript เราได้พูดถึงการประกาศและใช้งานอาเรย์ การเพิ่มและลบข้อมูลในอาเรย์ด้วยเมธอดพื้นฐาน การวนรอบอาเรย์ด้วยคำสั่ง for และแนะนำการใช้งานเมธอดของอาเรย์เบื้องต้น