Cách gộp (merge) hai mảng trong JavaScript

Gộp hai mảng (merge arrays) trong JavaScript thường dùng Array.concat() hoặc Spread Operator (ES6). Cả hai đều tạo mảng mới, không thay đổi mảng gốc (immutable).

Cách 1: Array.concat() (Chuẩn ES5+)

const alpha = ["a", "b", "c"];
const numeric = [1, 2, 3];

const alphaNumeric = alpha.concat(numeric);
console.log(alphaNumeric); // ["a", "b", "c", 1, 2, 3]
console.log(alpha);        // ["a", "b", "c"] - Gốc không đổi

Cách 2: Spread Operator ... (ES6+) - Ngắn gọn, phổ biến hiện nay

const alpha = ["a", "b", "c"];
const numeric = [1, 2, 3];

const alphaNumeric = [...alpha, ...numeric];
console.log(alphaNumeric); // ["a", "b", "c", 1, 2, 3]

Cách 3: Push + Spread (Mutate mảng gốc) - Khi CẦN thay đổi mảng gốc

const alpha = ["a", "b", "c"];
const numeric = [1, 2, 3];

alpha.push(...numeric); // Thay đổi alpha
console.log(alpha); // ["a", "b", "c", 1, 2, 3]

So sánh

Gộp nhiều mảng / Kết hợp giá trị đơn

// concat
const all = arr1.concat(arr2, arr3, [4,5], 6, "seven");
// spread
const all = [...arr1, ...arr2, ...arr3, 4, 5, 6, "seven"];

⚠️ Lưu ý: Shallow Copy (Copy nông)

Cả concat, spread, push chỉ copy tham chiếu (reference) đối với Object/Array lồng nhau.

const arr1 = [{ id: 1 }];
const arr2 = [{ id: 2 }];

const merged = [...arr1, ...arr2];
merged[0].id = 99;
console.log(arr1[0].id); // 99 !!! Object gốc bị thay đổi

// Cần Deep Clone nếu muốn độc lập hoàn toàn:
const deepMerged = JSON.parse(JSON.stringify(arr1)).concat(JSON.parse(JSON.stringify(arr2)));
// Hoặc dùng lodash: _.cloneDeep(arr1).concat(_.cloneDeep(arr2))

Ví dụ hoàn chỉnh (HTML)

<!DOCTYPE html>
<html>
<head>
    <title>JS Array Merge</title>
</head>
<body>
<script>
    var alpha = ["a", "b", "c"];
    var numeric = [1, 2, 3];
    
    // concat
    var alphaNumeric = alpha.concat(numeric);
    document.write("concat: " + alphaNumeric + "<br>"); // a,b,c,1,2,3
    
    // spread (ES6)
    var spreadMerge = [...alpha, ...numeric];
    document.write("spread: " + spreadMerge + "<br>"); // a,b,c,1,2,3
    
    // push (mutate)
    alpha.push(...numeric);
    document.write("push mutate: " + alpha); // a,b,c,1,2,3
</script>
</body>
</html>

Tóm lại: Gộp mảng: [...arr1, ...arr2] (ES6 Spread) ngắn gọn, hiện đại, immutable (khuyên dùng mặc định). arr1.concat(arr2) chuẩn ES5. arr1.push(...arr2) chỉ khi cần mutate mảng gốc. Lưu ý shallow copy với object/array lồng.