การรวมarray. /JavaScript

#พื้นฐานการเขียนเว็ปไซต์

#javascript

#array

การรวม 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]