Integration of the array. / JavaScript
There are many ways to include Array in JavaScript, depending on what you want to include and whether you want to use new features of the language. The most popular methods are as follows:
1. Using Spread Syntax (...) (Recommended method)
This is the most modern and simple method for combining Array in JavaScript.
JavaScript
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
/ / Combine arr1 and arr2 in a new Array.
Const combinedArray = [...Arr1,...Arr2];
console.log (combinedArray);
/ / Results: [1, 2, 3, 4, 5, 6]
Advantages: Short, easy to read, and create a new Array without changing the original Array (immutable).
Applicable to: ES6 (ECMAScript 2015) and above
2. Use of the concat () method
The concat () method is a traditional way to combine Arrays. It will create a new Array with a member of the Array being invoked and an Array being sent as an Argument.
JavaScript
const arr1 = ['a', 'b'];
const arr2 = ['c', 'd'];
const arr3 = ['e', 'f'];
/ / Multiple Arrays can be included.
const combinedArray = arr1.concat (arr2, arr3);
console.log (combinedArray);
/ / Result: ['a', 'b', 'c', 'd', 'e', 'f']
Advantages: Works with all versions of JavaScript and creates a new Array as well.
3. Use of the push () method in conjunction with Spread Syntax (...)
If you want to combine the second Array with the first Array that already exists (namely editing the first Array), you can use push () in conjunction with Spread Syntax.
JavaScript
Const existingArray = [10, 20];
const newElements = [30, 40];
/ / Push all members of newElements into the existingArray.
Existing Array. Push (...News Elements);
Console.log (existingArray);
/ / Results: [10, 20, 30, 40]
Caution: This method is a mutate of the original Array.
4.Use of Reduce () (for Array integration of Array)
If you have an Array that consists of sub-Arrays and want to combine every one of those sub-Arrays into a single Array (Flattening),
JavaScript
Const arrayOfArrays = [
[1, 2],
[3, 4],
[5, 6]
];
Const combinedArray = arrayOfArrays.reduce (accumulator, currentArray) = > {
Return accumulator. Concat (currentArray);
}, []); / / Beginning with an empty Array []
console.log (combinedArray);
/ / Results: [1, 2, 3, 4, 5, 6]
Simpler alternative: For combining sub-Arrays in a given depth (e.g. 1 layer deep), you can use the flat () method:
JavaScript
const arrayOfArrays = [[1, 2], [3, 4], [5, 6]];
const combinedArray = arrayOfArrays.flat (); / / does not require reduction ()
/ / Results: [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 ก็จะเข้าใจง่ายและเลือกใช้ได้ถูกตามสถานการณ์