มือใหม่หัดใช้ Array มันทำงานยังไงใน JavaScript

JavaScript เป็นหนึ่งในภาษาโปรแกรมที่ได้รับความนิยมอย่างมากในปัจจุบัน และหนึ่งในโครงสร้างข้อมูลที่สำคัญที่สุดที่เราจะต้องรู้จักคือ Array (อาร์เรย์) นั่นเอง! ซึ่งเราจะมาทำความรู้จักกันในบทความนี้ ตั้งแต่การสร้าง การใช้งาน ไปจนถึงการทำงานทั่วไปที่เราสามารถทำได้กับ Array รวมถึงฟังก์ชันยอดนิยมอย่าง map(), filter(), และ reduce() แล้วก็แถมการ Destructuring ด้วย

อะไรคือ Array?

Photo by gemma on Unsplash

Array คือโครงสร้างข้อมูลที่ใช้เก็บชุดของข้อมูลหลาย ๆ ตัว ไว้ในตัวแปรเดียว เพื่อให้เราสามารถเข้าถึงข้อมูลเหล่านั้นได้ง่ายและรวดเร็ว Array ใน JavaScript สามารถเก็บข้อมูลได้หลากหลายมาก ๆ ทั้ง Number, String หรือแม้ Objects ก็ได้

วิธีสร้าง Array

การสร้าง Array ใน JavaScript สามารถทำได้หลายวิธี แต่ที่นิยมใช้กันมากที่สุดคือ

1. การใช้ Literal Syntax

let fruits = ['apple', 'banana', 'cherry'];
console.log(fruits); // ['apple', 'banana', 'cherry']

2. การใช้ Constructor

let numbers = new Array(1, 2, 3, 4);
console.log(numbers); // [1, 2, 3, 4]

3. การสร้าง Array ว่าง

let emptyArray = [];
console.log(emptyArray); // []

การใช้งาน Array

เมื่อเรามี Array แล้ว เราสามารถเอาไปใช้งานได้หลายอย่างเลย เช่น

1. การเข้าถึงสมาชิกใน Array

เราสามารถเข้าถึงสมาชิกของ Array ด้วยการใช้ [ ] ที่ใส่ Index ที่ต้องการซึ่งเริ่มต้นจาก 0 ซึ่งมีข้อสังเกตคือไม่สามารถใช้ Index ติดลบเพื่อเข้าถึงสมาชิกจากด้านหลังได้เหมือนที่มีในภาษาอื่น ๆ

let fruits = ['apple', 'banana', 'cherry'];
console.log(fruits[0]); // apple

ซึ่งเรามีตัวเลือกใหม่คือการใช้ .at() เพื่อเข้าถึงสมาชิกใน Array ได้เหมือนกัน

let fruits = ['apple', 'banana', 'cherry'];
console.log(fruits.at(0)); // apple
console.log(fruits.at(-1)); // cherry (เข้าถึงสมาชิกสุดท้าย)

ข้อสังเกตของ .at()

• รองรับตั้งแต่ ECMAScript 2022: เมธอด .at() ถูกเพิ่มเข้ามาใน ECMAScript 2022 ดังนั้นจึงต้องใช้ JavaScript เวอร์ชันนี้หรือใหม่กว่า
• สามารถใช้ Index ที่ติดลบได้: การใช้ Index ติดลบจะช่วยให้เราเข้าถึงสมาชิกจากด้านหลังของ Array ได้ ซึ่งเป็นฟีเจอร์ที่สะดวกมาก ๆ

2. การเพิ่มสมาชิก

เราสามารถเพิ่มสมาชิกใหม่เข้าไปใน Array ได้ด้วย push()

let fruits = ['apple', 'banana', 'cherry'];
fruits.push('orange');
console.log(fruits); // ['apple', 'banana', 'cherry', 'orange']

3. การลบสมาชิก

การลบสมาชิกออกจาก Array สามารถทำได้ด้วย pop() หรือ splice()

let fruits = ['apple', 'banana', 'cherry'];
fruits.pop(); // ลบสมาชิกสุดท้าย
console.log(fruits); // ['apple', 'banana']

let numbers = [1, 2, 3];
numbers.splice(1, 1); // ลบสมาชิกที่ Index 1 (2)
console.log(numbers); // [1, 3]

4. การวนลูปผ่านสมาชิกใน Array

เราสามารถใช้ forEach() เพื่อวนลูปผ่านสมาชิกทั้งหมดใน Array

let fruits = ['apple', 'banana', 'cherry'];
fruits.forEach(function(fruit) {
    console.log(fruit);
});

ฟังก์ชันยอดนิยม – map(), filter(), reduce()

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

ทำไมถึงมีฟังก์ชันเหล่านี้?

ใน JavaScript การใช้ forEach() เพื่อวนลูปผ่านสมาชิกใน Array นั้นสามารถทำได้ แต่จะมีข้อจำกัดบางอย่าง เช่น

• การแก้ไขตัวแปรต้นฉบับ: ถ้าเราใช้ forEach() เพื่อเปลี่ยนแปลงค่าของสมาชิกใน Array เราจะต้องระวังไม่ให้เกิดผลกระทบกับตัวแปรต้นฉบับ ซึ่งอาจทำให้โค้ดของเรายุ่งเหยิงและยากต่อการติดตามแก้ไข
• การสร้าง Array ใหม่: ฟังก์ชัน map(), filter(), และ reduce() ช่วยให้เราสามารถสร้าง Array ใหม่จากข้อมูลเดิมได้อย่างง่ายดาย โดยไม่ต้องแก้ไขค่าของ Array ต้นฉบับ

1. map()

map() ใช้เพื่อสร้าง Array ใหม่โดยการแปลงค่าของสมาชิกแต่ละตัวใน Array เดิม

let numbers = [1, 2, 3, 4];
let doubled = numbers.map(function(num) {
    return num * 2;
});
console.log(doubled); // [2, 4, 6, 8]

2. filter()

filter() ใช้เพื่อสร้างArrayใหม่ที่มีสมาชิกเฉพาะที่ตรงตามเงื่อนไขที่กำหนด

let ages = [15, 22, 18, 30];
let adults = ages.filter(function(age) {
    return age >= 18;
});
console.log(adults); // [22, 18, 30]

3. reduce()

reduce() ใช้เพื่อลดหรือปั้นข้อมูลจาก Array ให้กลายเป็นแบบที่เราต้องการ

let numbers = [1, 2, 3, 4];
let total = numbers.reduce(function(sum, num) {
    return sum + num;
}, 0);
console.log(total); // 10 (1 + 2 + 3 + 4)

Array Destructuring

Destructuring เป็นฟีเจอร์ใน JavaScript ซึ่งสามารถทำได้กับทั้ง Object และ Array โดยจะช่วยให้เราสามารถแยกค่าออกจาก Array ได้อย่างสะดวกและรวดเร็ว โดยไม่ต้องเข้าถึงค่าผ่าน Index ทีละตัว ซึ่งช่วยให้โค้ดของเรากระชับและเข้าใจง่ายยิ่งขึ้น

1. การดึงค่าจาก Array

เราสามารถใช้ destructuring เพื่อดึงค่าจาก Array ได้อย่างง่ายดาย เช่น การดึงค่าตัวแรกและตัวที่สองจาก Array

let fruits = ['apple', 'banana', 'cherry'];

// Destructuring
let [first, second] = fruits;

console.log(first);  // apple
console.log(second); // banana

2. การดึงค่าหลาย ๆ ตัว

เราสามารถดึงค่าหลายค่าในครั้งเดียวได้ โดยใช้ Comma เพื่อแยกค่าที่ต้องการ

let numbers = [1, 2, 3, 4, 5];

// Destructuring หลายค่า
let [one, two, ...rest] = numbers;

console.log(one);   // 1
console.log(two);   // 2
console.log(rest);  // [3, 4, 5]

3. Default Values

เรายังสามารถกำหนดค่าเริ่มต้นให้กับตัวแปรเมื่อใช้ destructuring ถ้าค่าที่ต้องการไม่มีอยู่ใน Array

let colors = ['red'];

// Destructuring with Default Value
let [firstColor, secondColor = 'blue'] = colors;

console.log(firstColor);  // red
console.log(secondColor);  // blue (ค่าเริ่มต้น)

4. Skipping Items

เราสามารถข้ามสมาชิกบางตัวใน Array ได้โดยไม่ต้องสร้างตัวแปรสำหรับสมาชิกที่ไม่ต้องการ:

let animals = ['cat', 'dog', 'rabbit', 'hamster'];

// ข้ามสมาชิกตัวแรก
let [, secondAnimal, thirdAnimal] = animals;

console.log(secondAnimal); // dog
console.log(thirdAnimal);   // rabbit

สรุป

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