Remove Array Duplicates trong ES6

Bài đăng này đã không được cập nhật trong 4 năm

Dưới đây là ba cách để lọc các bản sao từ một mảng và chỉ trả về các giá trị duy nhất

const array = [4, 1, 2, 4, 4, 3];

//1: Set
[...new Set(array)];
//2: Filter
array.filter((item, index) => array.indexOf(item) === index);
//3: Reduce
array.reduce((unique, index) => unique.includes(item) ? unique : [...unique, item], []);

//RESULT:
// [4, 1, 2, 3]

1. Sử dụng Set

Set là một đối tượng dữ liệu mới được giới thiệu trong ES6,
Set chỉ cho phép bạn lưu trữ các giá trị duy nhất. Khi bạn truyền vào một mảng, nó sẽ xóa mọi giá trị trùng lặp.

Đầu tiên, chúng ta tạo một Set mới bằng cách truyền vào một mảng vì Set chỉ cho phép các giá trị duy nhất, tất cả các bản sao sẽ bị xóa.
Sau khi các bản sao đã biến mất, ta sẽ chuyển đổi nó trở lại thành một mảng bằng cách sử dụng operator ...

const array = [4, 1, 2, 4, 4, 3];

//Step 1
const uniqueSet = new Set(array);
//Set 2
const backToArray = [...uniqueSet];
// [4, 1, 2, 3]

Ngoài ra, bạn cũng có thể sử dụng Array.fromđể chuyển đổi Set thành một mảng:

const array = [4, 1, 2, 4, 4, 3];
Array.from(new Set(array));
// [4, 1, 2, 3]

2. Sử dụng filter

Để hiểu được nó , chúng ta hãy tìm hiểu qua 2 phương thức này:
indexOf:
Phương thức indexOf() trả về index đầu tiên mà nó tìm thấy trong phần tử được cung cấp từ mảng.

const array = [4, 1, 2, 4, 4, 3];

array.indexOf(4); // 4
array.indexOf(1); // 1
array.indexOf(2); // 2
array.indexOf(3); // 3

filter:
Phương thứcfilter() tạo ra một mảng các phần tử mới vượt qua điều kiện mà chúng ta cung cấp. Nói cách khác, nếu phần tử đi qua và trả về true, nó sẽ nằm trong mảng được lọc. Và bất kỳ phần tử nào thất bại hoặc trả về false, nó sẽ không nằm trong mảng được lọc.

const array = [4, 1, 2, 4, 4, 3];

array.filter((index, item) => {
    console.log(
        //a. Item
        item,
        //b. Index
        index,
        //c. IndexOf
        array.IndexOf(item),
        //d. Condition
        array.IndexOf(item) === index
    );
  
    return array.IndexOf(item) === index
});

Dưới đây là đầu ra từ console.log hiển thị ở trên. Các bản sao là nơi index không phù hợp với indexOf. Vì vậy, trong những trường hợp đó, điều kiện sẽ là false và sẽ không được đưa vào mảng đã lọc của chúng ta.
Chúng ta cũng có thể sử dụng phương thức filter để lấy các giá trị trùng lặp từ mảng.

const array = [4, 1, 2, 4, 4, 3];

array.filter((index, item) => array.IndexOf(item) !== index);

// [4, 4]

Đầu ra sẽ là:

3. Sử dụng reduce

Phương thức reduce được sử dụng để giảm các phần tử của mảng và kết hợp chúng thành một mảng cuối cùng dựa trên reducer function mà bạn vượt qua.
Trong trường hợp này, hàm reducer sẽ kiểm tra xem mảng cuối cùng của chúng ta có chứa item không. Nếu không chứa, nó sẽ đẩy mục đó vào mảng cuối cùng của chúng ta.

const array = [4, 1, 2, 4, 4, 3];

array.reduce((unique, item) => {
   console.log(
        //a. Item
        item,
        //b. Final Array
        unique,
        //c. Condition
         unique.includes(item),
        //d. Reducer Function Result
        unique.includes(item) ? unique : [...unique, item],
    );
  
    return unique.includes(item) ? unique : [...unique, item]
}, []);

//RESULT: [4, 1, 2, 3]