Merge arrays trong JavaScript - một số cách để nối mảng JavaScript

Trong một số bài toán, chúng ta sẽ phải nối các mảng - merge arrays để thực hiện một yêu cầu nào đó.

Giả sử chúng ta nối mảng [1,2] với mảng [5,6,7] chúng ta sẽ được [1, 2, 5, 6, 7].

Trong bài viết này chúng ta sẽ tìm hiểu về một số cách để merge arrays.

Chúng ta sẽ có 2 kiểu khi merge arrays là immutable (Tạo mảng mới sau khi merge) và mutable (nối các items vào mảng đã có).

1. Immutable

1.1 Sử dụng spread operator

Đây là một cách khá ngắn gọn bằng cách sử dụng spread operator (...). Chúng ta sẽ viết cặp dấu [] bên trong là các mảng muốn merge kết hợp sử dụng ....

Các bạn có thể tìm hiểu về spread operator tại: Spread Operator Javascript là gì?.

const city1 = ['Bangkok', 'London'];
const city2 = ['Tokyo', 'Chicago'];
const listOfCities = [...city1, ...city2];
listOfcities; // ['Bangkok', 'London', 'Tokyo', 'Chicago']

Chúng ta còn thể nối nhiều hơn 2 mảng tương tự như cách ở trên, trường hợp tổng quát như sau:

const mergeArrays = [...array1, ...array2, ...array3, ...arrayN];

1.2 Sử dụng method array.concat()

Để sử dụng method array.concat() các bạn chỉ cần làm như sau:

const city1 = ['Bangkok', 'London'];
const city2 = ['Tokyo', 'Chicago'];
let listOfCities = city1.concat(city2);  // cách 1
    listOfCities = [].concat(city1,city2);  // cách 2
// ['Bangkok', 'London', 'Tokyo', 'Chicago']

method array.concat() cho phép sử dụng nhiều mảng làm đối số, do đó chúng ta có thể nối 2 hoặc nhiều mảng cùng một lúc:

const mergeArrays = [].concat(array1, array2, array3, arrayN);

Việc nối các mảng theo cách Immutable được thực hiện bằng spread operator hay array.concat() sẽ tạo ra một mảng mới, đôi khi chúng ta không muốn tạo một mảng mới mà muốn nối các mảng vào mảng hiện có thì chúng ta sẽ chuyển sang cách tiếp theo ^^.

2. Mutable

2.1 Sử dụng array.push() method

Đây là một method cũng khá quen thuộc với chúng ta đúng không 😁. Bằng cách sử dụng array.push() chúng ta sẽ đưa phần tử mới vào cuối mảng hiện tại, đây cũng là cách để chúng ta nối các mảng với nhau:

const user = ['Hung'];
user.push('Trang'); // ['Hung', 'Trang']

Ngoài ra array.push() còn cho phép chúng ta đưa nhiều phần tử vào trong mảng: array.push (item1, item2, ..., itemN). Do đó chúng ta có thể sử dụng spread operator để lấy các phần tử trong mảng muốn nối để push vào mảng còn lại:

// Nối array2 vào array1
array1.push(...array2);

Ví dụ:

const city1 = ['Bangkok', 'London'];
const city2 = ['Tokyo', 'Chicago'];
let listOfCities = city1.push(...city2);
// ['Bangkok', 'London', 'Tokyo', 'Chicago']

Ở ví dụ trên chúng ta đã thực hiện hợp nhất mảng city2 vào mảng city1. Lúc này mảng city1 là mutated.

3. Kết luận

JavaScript cung cấp nhiều cách để chúng ta hợp nhất các mảng.

Các bạn có thể sử dụng spread operator hoặc array.concat() để nối các mảng với nhau. Những cách này là immutable vì kết quả hợp nhất được lưu vào một mảng mới.

Nếu bạn muốn thực hiện mutable, tức là nối các mảng vào một mảng có sẵn mà không cần tạo một mảng mới, thì bạn có thể sử dụng array.push().

Chúc các bạn học tốt ^^.

Một số bài viết hay khác:

1. Check empty array javascript
2. Một số cách tìm phần tử trong mảng Javascript
3. JavaScript at() method có gì hay?
4. Một số cách để chuyển chuỗi thành mảng các ký tự trong JavaScript
5. Một số cách để xóa phần tử khỏi mảng Javascript