Hướng dẫn merge 2 array javascript - hợp nhất 2 mảng javascript

DeDuplicate single or Merge and DeDuplicate multiple array inputs. Example below.

useing ES6 - Set, for of, destructuring

I wrote this simple function which takes multiple array arguments. Does pretty much the same as the solution above it just have more practical use case. This function doesn't concatenate duplicate values in to one array only so that it can delete them at some later stage.

SHORT FUNCTION DEFINITION ( only 9 lines )

/** * This function merging only arrays unique values. It does not merges arrays in to array with duplicate values at any stage. * * @params ...args Function accept multiple array input (merges them to single array with no duplicates) * it also can be used to filter duplicates in single array */ function arrayDeDuplicate(...args){ let set = new Set(); // init Set object (available as of ES6) for(let arr of args){ // for of loops through values arr.map((value) => { // map adds each value to Set object set.add(value); // set.add method adds only unique values }); } return [...set]; // destructuring set object back to array object // alternativly we culd use: return Array.from(set); }

USE EXAMPLE CODEPEN:

// SCENARIO let a = [1,2,3,4,5,6]; let b = [4,5,6,7,8,9,10,10,10]; let c = [43,23,1,2,3]; let d = ['a','b','c','d']; let e = ['b','c','d','e']; // USEAGE let uniqueArrayAll = arrayDeDuplicate(a, b, c, d, e); let uniqueArraySingle = arrayDeDuplicate(b); // OUTPUT console.log(uniqueArrayAll); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 43, 23, "a", "b", "c", "d", "e"] console.log(uniqueArraySingle); // [4, 5, 6, 7, 8, 9, 10]

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 // SCENARIO let a = [1,2,3,4,5,6]; let b = [4,5,6,7,8,9,10,10,10]; let c = [43,23,1,2,3]; let d = ['a','b','c','d']; let e = ['b','c','d','e']; // USEAGE let uniqueArrayAll = arrayDeDuplicate(a, b, c, d, e); let uniqueArraySingle = arrayDeDuplicate(b); // OUTPUT console.log(uniqueArrayAll); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 43, 23, "a", "b", "c", "d", "e"] console.log(uniqueArraySingle); // [4, 5, 6, 7, 8, 9, 10] 0 chúng ta sẽ được // SCENARIO let a = [1,2,3,4,5,6]; let b = [4,5,6,7,8,9,10,10,10]; let c = [43,23,1,2,3]; let d = ['a','b','c','d']; let e = ['b','c','d','e']; // USEAGE let uniqueArrayAll = arrayDeDuplicate(a, b, c, d, e); let uniqueArraySingle = arrayDeDuplicate(b); // OUTPUT console.log(uniqueArrayAll); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 43, 23, "a", "b", "c", "d", "e"] console.log(uniqueArraySingle); // [4, 5, 6, 7, 8, 9, 10] 1.

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ó).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 (// SCENARIO let a = [1,2,3,4,5,6]; let b = [4,5,6,7,8,9,10,10,10]; let c = [43,23,1,2,3]; let d = ['a','b','c','d']; let e = ['b','c','d','e']; // USEAGE let uniqueArrayAll = arrayDeDuplicate(a, b, c, d, e); let uniqueArraySingle = arrayDeDuplicate(b); // OUTPUT console.log(uniqueArrayAll); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 43, 23, "a", "b", "c", "d", "e"] console.log(uniqueArraySingle); // [4, 5, 6, 7, 8, 9, 10] 2). Chúng ta sẽ viết cặp dấu // SCENARIO let a = [1,2,3,4,5,6]; let b = [4,5,6,7,8,9,10,10,10]; let c = [43,23,1,2,3]; let d = ['a','b','c','d']; let e = ['b','c','d','e']; // USEAGE let uniqueArrayAll = arrayDeDuplicate(a, b, c, d, e); let uniqueArraySingle = arrayDeDuplicate(b); // OUTPUT console.log(uniqueArrayAll); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 43, 23, "a", "b", "c", "d", "e"] console.log(uniqueArraySingle); // [4, 5, 6, 7, 8, 9, 10] 3 bên trong là các mảng muốn merge kết hợp sử dụng // SCENARIO let a = [1,2,3,4,5,6]; let b = [4,5,6,7,8,9,10,10,10]; let c = [43,23,1,2,3]; let d = ['a','b','c','d']; let e = ['b','c','d','e']; // USEAGE let uniqueArrayAll = arrayDeDuplicate(a, b, c, d, e); let uniqueArraySingle = arrayDeDuplicate(b); // OUTPUT console.log(uniqueArrayAll); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 43, 23, "a", "b", "c", "d", "e"] console.log(uniqueArraySingle); // [4, 5, 6, 7, 8, 9, 10] 2.

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 // SCENARIO let a = [1,2,3,4,5,6]; let b = [4,5,6,7,8,9,10,10,10]; let c = [43,23,1,2,3]; let d = ['a','b','c','d']; let e = ['b','c','d','e']; // USEAGE let uniqueArrayAll = arrayDeDuplicate(a, b, c, d, e); let uniqueArraySingle = arrayDeDuplicate(b); // OUTPUT console.log(uniqueArrayAll); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 43, 23, "a", "b", "c", "d", "e"] console.log(uniqueArraySingle); // [4, 5, 6, 7, 8, 9, 10] 5 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 // SCENARIO let a = [1,2,3,4,5,6]; let b = [4,5,6,7,8,9,10,10,10]; let c = [43,23,1,2,3]; let d = ['a','b','c','d']; let e = ['b','c','d','e']; // USEAGE let uniqueArrayAll = arrayDeDuplicate(a, b, c, d, e); let uniqueArraySingle = arrayDeDuplicate(b); // OUTPUT console.log(uniqueArrayAll); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 43, 23, "a", "b", "c", "d", "e"] console.log(uniqueArraySingle); // [4, 5, 6, 7, 8, 9, 10] 5 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 // SCENARIO let a = [1,2,3,4,5,6]; let b = [4,5,6,7,8,9,10,10,10]; let c = [43,23,1,2,3]; let d = ['a','b','c','d']; let e = ['b','c','d','e']; // USEAGE let uniqueArrayAll = arrayDeDuplicate(a, b, c, d, e); let uniqueArraySingle = arrayDeDuplicate(b); // OUTPUT console.log(uniqueArrayAll); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 43, 23, "a", "b", "c", "d", "e"] console.log(uniqueArraySingle); // [4, 5, 6, 7, 8, 9, 10] 5 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 // SCENARIO let a = [1,2,3,4,5,6]; let b = [4,5,6,7,8,9,10,10,10]; let c = [43,23,1,2,3]; let d = ['a','b','c','d']; let e = ['b','c','d','e']; // USEAGE let uniqueArrayAll = arrayDeDuplicate(a, b, c, d, e); let uniqueArraySingle = arrayDeDuplicate(b); // OUTPUT console.log(uniqueArrayAll); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 43, 23, "a", "b", "c", "d", "e"] console.log(uniqueArraySingle); // [4, 5, 6, 7, 8, 9, 10] 8 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 // SCENARIO let a = [1,2,3,4,5,6]; let b = [4,5,6,7,8,9,10,10,10]; let c = [43,23,1,2,3]; let d = ['a','b','c','d']; let e = ['b','c','d','e']; // USEAGE let uniqueArrayAll = arrayDeDuplicate(a, b, c, d, e); let uniqueArraySingle = arrayDeDuplicate(b); // OUTPUT console.log(uniqueArrayAll); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 43, 23, "a", "b", "c", "d", "e"] console.log(uniqueArraySingle); // [4, 5, 6, 7, 8, 9, 10] 8 còn cho phép chúng ta đưa nhiều phần tử vào trong mảng: const city1 = ['Bangkok', 'London']; const city2 = ['Tokyo', 'Chicago']; const listOfCities = [...city1, ...city2]; listOfcities; // ['Bangkok', 'London', 'Tokyo', 'Chicago']0. 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 const city1 = ['Bangkok', 'London']; const city2 = ['Tokyo', 'Chicago']; const listOfCities = [...city1, ...city2]; listOfcities; // ['Bangkok', 'London', 'Tokyo', 'Chicago']1 vào mảng const city1 = ['Bangkok', 'London']; const city2 = ['Tokyo', 'Chicago']; const listOfCities = [...city1, ...city2]; listOfcities; // ['Bangkok', 'London', 'Tokyo', 'Chicago']2. Lúc này mảng const city1 = ['Bangkok', 'London']; const city2 = ['Tokyo', 'Chicago']; const listOfCities = [...city1, ...city2]; listOfcities; // ['Bangkok', 'London', 'Tokyo', 'Chicago']2 là const city1 = ['Bangkok', 'London']; const city2 = ['Tokyo', 'Chicago']; const listOfCities = [...city1, ...city2]; listOfcities; // ['Bangkok', 'London', 'Tokyo', 'Chicago']4.

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 // SCENARIO let a = [1,2,3,4,5,6]; let b = [4,5,6,7,8,9,10,10,10]; let c = [43,23,1,2,3]; let d = ['a','b','c','d']; let e = ['b','c','d','e']; // USEAGE let uniqueArrayAll = arrayDeDuplicate(a, b, c, d, e); let uniqueArraySingle = arrayDeDuplicate(b); // OUTPUT console.log(uniqueArrayAll); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 43, 23, "a", "b", "c", "d", "e"] console.log(uniqueArraySingle); // [4, 5, 6, 7, 8, 9, 10] 5 để 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 // SCENARIO let a = [1,2,3,4,5,6]; let b = [4,5,6,7,8,9,10,10,10]; let c = [43,23,1,2,3]; let d = ['a','b','c','d']; let e = ['b','c','d','e']; // USEAGE let uniqueArrayAll = arrayDeDuplicate(a, b, c, d, e); let uniqueArraySingle = arrayDeDuplicate(b); // OUTPUT console.log(uniqueArrayAll); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 43, 23, "a", "b", "c", "d", "e"] console.log(uniqueArraySingle); // [4, 5, 6, 7, 8, 9, 10] 8.

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