Xóa phần tử Duplicates trong mảng sử dụng ES6

Dưới đây là 3 cách để lọc các phần tử trùng nhau (duplicates) trong mảng và trả về những giá trị duy nhất. Tôi thích sử dụng Set bởi vì nó ngắn và đơn giản.

1. Sử dụng Set:

Đầu tiên sẽ tìm hiểu Set là gì:

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

Okay, chúng ta sẽ nhìn những đoạn code sau để hiểu hơn về Set:

1. Đầu tiên, chúng ta sẽ tạo 1 Set mới bằng cách truyền vào cho nó 1 mảng. Bởi vì Set chỉ nhận các giá trị duy nhất lên sẽ xóa các phần tử trùng lặp.

2. Bây giờ các phần tử trùng nhau biến mất, chúng ta sẽ convert nó lại thành mảng bằng cách sử dụng toán tử ...

Convert Set sang mảng sử dụng Array.from

Ngoài ra, bạn có thể sử dụng Array.from để convert Set sang mảng:

2. Sử dụng filter:

Để hiểu hơn về cách này, chúng ta sẽ xem qua cách 2 phương thức hoạt động: indexOf và filter.

indexOf

Phương thức indexOf sẽ trả về vị trí index đầu tiên mà chúng tìm thấy trong mảng.

filter

Phương thức filter() sẽ tạo ra 1 mảng mới với các điều kiện cho trước. Nói cách khác, các phần tử thỏa mãn điều kiện trả về true thì sẽ nằm trong mảng đã được lọc. Các phần tử sai điều kiện sẽ bị loại bỏ trong mảng mới.

Dưới đây là bảng console.log đoạn code trên:

3. Sử dụng reduce:

Trong trường hợp này, hàm reduce sẽ kiểm tra mảng xem có phần tử đó hay không. Nếu chưa có sẽ thêm phần tử đó vào mảng, còn không sẽ bỏ qua phần tử đó.

Hàm reduce hơi khó hiểu một chút, vì vậy hãy xem thử ví dụ sau: