วิธีขยาย Array เดิมด้วย Array อีกตัวใน JavaScript

ใช้เมธอด concat()

เมธอด Array.concat() ใช้รวม Array หลายตัวเข้าด้วยกัน คืนค่า Array ใหม่ ไม่เปลี่ยน Array ต้นฉบับ

Syntax

var newArray = oldArray.concat(array1, array2, ..., arrayN);

ตัวอย่างโค้ด

<html>
<head>
  <title>JavaScript Array concat Method</title>
</head>
<body>
  <script>
    var numbers = new Array(1, 4, 9);
    var numbers2 = new Array(2, 5);
    numbers = numbers.concat(numbers2);
    document.write("new numbers is : " + numbers);
  </script>
</body>
</html>

ผลลัพธ์

new numbers is : 1,4,9,2,5

รายละเอียดเพิ่มเติม

รองรับหลาย Array พร้อมกัน

var a = [1, 2];
var b = [3, 4];
var c = [5, 6];
var combined = a.concat(b, c); // [1, 2, 3, 4, 5, 6]

รองรับ Value เดี่ยว (ไม่ใช่ Array)

var a = [1, 2];
var combined = a.concat(3, [4, 5], 6); // [1, 2, 3, 4, 5, 6]

ไม่ Mutate Array ต้นฉบับ

var original = [1, 2];
var extended = original.concat([3, 4]);
console.log(original); // [1, 2] - ไม่เปลี่ยน
console.log(extended); // [1, 2, 3, 4] - Array ใหม่

วิธีอื่นๆ (ES6+)

Spread Operator (...)

var numbers = [1, 4, 9];
var numbers2 = [2, 5];
var combined = [...numbers, ...numbers2]; // [1, 4, 9, 2, 5]

push() กับ Spread (Mutate Original)

var numbers = [1, 4, 9];
numbers.push(...numbers2); // numbers กลายเป็น [1, 4, 9, 2, 5]

ตารางเปรียบเทียบ

สรุป

ใช้ concat() เมื่อต้องการ Array ใหม่โดยไม่เปลี่ยนต้นฉบับ (Functional Style) ใช้ push(...arr) เมื่อต้องการ Mutate Array เดิมเพื่อประสิทธิภาพหน่วยความจำ