การรวมarray. /JavaScript
การรวม Array ใน JavaScript มีหลายวิธี ขึ้นอยู่กับว่าคุณต้องการรวมแบบไหน และต้องการใช้คุณสมบัติใหม่ ๆ ของภาษาหรือไม่ วิธีที่นิยมใช้มีดังนี้ครับ/ค่ะ:
1. การใช้ Spread Syntax (...) (วิธีที่แนะนำ)
นี่คือวิธีที่ทันสมัยและง่ายที่สุดสำหรับการรวม Array เข้าด้วยกันใน JavaScript
JavaScript
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
// รวม arr1 และ arr2 เข้าด้วยกันใน Array ใหม่
const combinedArray = [...arr1, ...arr2];
console.log(combinedArray);
// ผลลัพธ์: [1, 2, 3, 4, 5, 6]
ข้อดี: สั้น, อ่านง่าย, และสร้าง Array ใหม่โดยไม่เปลี่ยนแปลง Array เดิม (immutable).
ใช้ได้กับ: ES6 (ECMAScript 2015) ขึ้นไป
2. การใช้เมธอด concat()
เมธอด concat() เป็นวิธีดั้งเดิมในการรวม Array มันจะสร้าง Array ใหม่ที่มีสมาชิกของ Array ที่ถูกเรียกใช้และ Array ที่ถูกส่งเป็น Argument
JavaScript
const arr1 = ['a', 'b'];
const arr2 = ['c', 'd'];
const arr3 = ['e', 'f'];
// สามารถรวมหลาย Array ได้
const combinedArray = arr1.concat(arr2, arr3);
console.log(combinedArray);
// ผลลัพธ์: ['a', 'b', 'c', 'd', 'e', 'f']
ข้อดี: ใช้งานได้กับ JavaScript ทุกเวอร์ชัน และสร้าง Array ใหม่เช่นกัน.
3. การใช้เมธอด push() ร่วมกับ Spread Syntax (...)
หากคุณต้องการ รวม Array ที่สองเข้ากับ Array แรกที่มีอยู่แล้ว (คือการแก้ไข Array แรก) คุณสามารถใช้ push() ร่วมกับ Spread Syntax
JavaScript
const existingArray = [10, 20];
const newElements = [30, 40];
// ผลักสมาชิกทั้งหมดของ newElements เข้าไปใน existingArray
existingArray.push(...newElements);
console.log(existingArray);
// ผลลัพธ์: [10, 20, 30, 40]
ข้อควรระวัง: วิธีนี้เป็นการ เปลี่ยนแปลง (mutate) Array เดิม (existingArray).
4. การใช้ reduce() (สำหรับการรวม Array ของ Array)
ถ้าคุณมี Array ที่ประกอบด้วย Array ย่อย ๆ และต้องการรวมทุก Array ย่อยเหล่านั้นเข้าเป็น Array เดียว (Flattening)
JavaScript
const arrayOfArrays = [
[1, 2],
[3, 4],
[5, 6]
];
const combinedArray = arrayOfArrays.reduce((accumulator, currentArray) => {
return accumulator.concat(currentArray);
}, []); // เริ่มต้นด้วย Array ว่าง []
console.log(combinedArray);
// ผลลัพธ์: [1, 2, 3, 4, 5, 6]
ทางเลือกที่ง่ายกว่า: สำหรับการรวม Array ย่อย ๆ ในระดับความลึกที่กำหนด (เช่น ลึก 1 ชั้น) คุณสามารถใช้เมธอด flat() ได้:
JavaScript
const arrayOfArrays = [[1, 2], [3, 4], [5, 6]];
const combinedArray = arrayOfArrays.flat(); // ไม่ต้องใช้ reduce()
// ผลลัพธ์: [1, 2, 3, 4, 5, 6]
Array คืออะไร? ถ้าอธิบายแบบง่ายที่สุด Array (อาร์เรย์) คือ “กล่องเก็บข้อมูลหลายๆ ค่าเรียงเป็นลำดับ” ภายในตัวแปรเดียว เช่น เราอยากเก็บคะแนน 5 วิชา ถ้าไม่ใช้ array เราอาจต้องมีตัวแปร 5 ตัว แต่ถ้าใช้ array ก็เก็บรวมกันได้ในตัวเดียว และเรียกใช้งานตาม “ตำแหน่ง (index)” ได้เลย ใน JavaScript ตำแหน่งของ array จะเริ่มนับจาก 0 เช่น const scores = [10, 20, 30]; คะแนนตัวแรกคือ scores[0] = 10 และตัวสุดท้ายคือ scores[scores.length - 1] ทำไม Array ถึงสำคัญตอนทำเว็บ จากประสบการณ์ทำหน้าเว็บ/เขียนโค้ดทั่วไป array จะเจอบ่อยมาก เช่น - เก็บรายการสินค้า/โพสต์/คอมเมนต์ที่ดึงมาจาก API - วนลูปเพื่อสร้าง HTML ซ้ำๆ (เช่น render list) - จัดการข้อมูลที่ต้องเรียงลำดับหรือกรอง (filter) บ่อยๆ ตัวอย่างการใช้งานพื้นฐานที่ควรรู้ (เพื่อให้เข้าใจ “array คือ” แบบใช้งานได้จริง) 1) อ่านค่าและแก้ค่า const fruits = ["apple", "banana", "orange"]; console.log(fruits[1]); // banana fruits[1] = "mango"; // เปลี่ยนค่า 2) เพิ่ม/ลบสมาชิกท้าย-หน้า fruits.push("grape"); // เพิ่มท้าย fruits.pop(); // ลบท้าย fruits.unshift("lemon"); // เพิ่มหน้า fruits.shift(); // ลบหน้า 3) วนลูปใช้งาน (เจอบ่อยมาก) fruits.forEach((item, index) => { console.log(index, item); }); เชื่อมโยงกับ “การรวม Array” ใน JavaScript พอเข้าใจว่า array คือกล่องเก็บข้อมูลหลายค่าแล้ว การ “รวม array” ก็เหมือนเอาของจาก 2 กล่องมารวมเป็นกล่องใหม่ หรือเอาอีกกล่องมาเติมในกล่องเดิม ซึ่งในบทความนี้มีวิธีหลักๆ เช่น - Spread Syntax (...) เหมาะมากเวลาต้องการได้ array ใหม่ (ไม่แก้ของเดิม) เช่น [...arr1, ...arr2] - concat() เป็นวิธีคลาสสิก ใช้ง่ายและได้ array ใหม่เหมือนกัน - push(...newArray) เหมาะกับกรณีต้องการ “เติม” ลง array เดิม (แต่ต้องจำไว้ว่ามัน mutate) - flat() / reduce() ใช้ตอนข้อมูลเป็น array ซ้อน array แล้วอยาก flatten ให้เป็นชั้นเดียว ทิปเล็กๆ เวลาเลือกใช้ - ถ้าอยากเขียนให้ทันสมัย อ่านง่าย และไม่แก้ไข array เดิม: ใช้ spread (...) เป็นตัวเลือกแรก - ถ้าต้องรองรับโค้ดเก่ามากๆ: concat() ยังปลอดภัย - ถ้าตั้งใจจะอัปเดต array เดิมจริงๆ (เช่น เก็บ state แบบไม่ซีเรียสเรื่อง immutable): push(...) - ถ้าได้ข้อมูลหน้าตาแบบ [[1,2],[3,4]] แล้วอยากให้เป็น [1,2,3,4]: ใช้ flat() (ลึก 1 ชั้น) หรือ flat(2) ถ้าลึกมากขึ้น สรุปสั้นๆ array คือโครงสร้างข้อมูลที่เก็บค่าหลายค่าในตัวแปรเดียว และเข้าถึงด้วย index (เริ่มที่ 0) พอจับคอนเซ็ปต์นี้ได้ การรวม array ใน JavaScript ด้วย spread/concat/push/flat ก็จะเข้าใจง่ายและเลือกใช้ได้ถูกตามสถานการณ์
🥰🥰🥰🥰