Cách hợp nhất các mảng trong Vanilla JavaScript (ES5 và ES6)

Trước đây, bạn đã học cách thêm và xóa các mục khỏi một mảng bằng cách sử dụng push() của JavaScript phương pháp.

Nhưng điều gì sẽ xảy ra nếu chúng ta muốn thêm một mảng các mục vào một mảng hiện có? Nói cách khác, điều gì sẽ xảy ra nếu chúng ta muốn hợp nhất hai mảng khác nhau với nhau?

Để hợp nhất hai hoặc nhiều mảng với nhau trong JavaScript, bạn có thể sử dụng Array.prototype.push.apply()

Giả sử chúng tôi có hai giỏ trái cây và chúng tôi muốn tất cả các loại trái cây trong một giỏ. Không thành vấn đề.

ES5

var fruitBasketOne = ["apple", "banana", "grapes"]
var fruitBasketTwo = ["orange", "apricot", "pear"]
Array.prototype.push.apply(fruitBasketOne, fruitBasketTwo)

// returns ['apple', 'banana', 'grapes', 'orange', 'apricot', 'pear']
console.log(fruitBasketOne)

// returns ["orange", "apricot", "pear"]
console.log(fruitBasketTwo)

Điều này sẽ hợp nhất mảng thứ hai vào mảng đầu tiên. Lưu ý rằng mảng thứ hai, fruitBasketTwo vẫn còn trong ký ức. Phương pháp này không xóa mảng ban đầu.

Hợp nhất mảng với ES6

Việc hợp nhất có thể dễ dàng hơn nữa, bằng cách sử dụng toán tử spread ES6:

let fruitBasketOne = ["apple", "banana", "grapes"]
let fruitBasketTwo = ["orange", "apricot", "pear"]
fruitBasketOne.push(...fruitBasketTwo)

// returns ['apple', 'banana', 'grapes', 'orange', 'apricot', 'pear']
console.log(fruitBasketOne)

Khả năng tương thích

Phương pháp đẩy đầu tiên tương thích với tất cả các trình duyệt hiện đại và trở lại ít nhất là IE6. Phương pháp thứ hai chỉ hoạt động trong các trình duyệt hiện đại, nhưng bạn có thể sử dụng bộ xử lý trước như Babel để biên dịch JavaScript của bạn trở lại mã tương thích ES5 và hoạt động trong các trình duyệt cũ hơn.

Tìm hiểu thêm về phương pháp Array Push.