Cách gộp mảng trong Vanilla JavaScript (ES5 và ES6)

Bạn đã học cách thêm và xóa mục khỏi mảng bằng phương thức push() của JavaScript.

Nhưng nếu muốn thêm một mảng các mục vào mảng hiện có? Tức là gộp hai mảng khác nhau?

Để gộp hai hoặc nhiều mảng trong JavaScript, bạn có thể dùng Array.prototype.push.apply()

Giả sử có hai giỏ trái cây, muốn gộp tất cả vào một giỏ. Không vấn đề gì.

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ẽ gộp mảng thứ hai vào mảng đầu tiên. Lưu ý mảng thứ hai, fruitBasketTwo vẫn còn trong bộ nhớ. Phương thức này không xóa mảng gốc.

Gộp mảng với ES6

Gộp mảng còn dễ hơn với 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)

Tương thích

Phương thức push đầu tiên tương thích với tất cả trình duyệt hiện đại, và ngược lại ít nhất IE6. Phương thức thứ hai chỉ hoạt động trên trình duyệt hiện đại, nhưng bạn có thể dùng pre-processor như Babel để biên dịch JavaScript về ES5 tương thích trình duyệt cũ.

Thêm về phương thức Array Push.