JavaScript - Tạo Nhanh Unique Array với ES6

Giả sử chung ta có một mảng chứa các phần tử có giá trị trùng nhau như sau:

let duplicateArray = [5, 3, 8, 5, 11, 3, 12, 8, 8, 2];

Yêu cầu đặt ra là cần lọc ra những phần tử lặp lại giá trị của các phần tử đã tồn tại trước đó để tạo ra chuỗi mới chỉ gồm các phần tử với giá trị không trùng với bất cứ phần tử nào khác?

Giải Pháp Trong ES6

Yêu cầu trên có thể thực hiện dễ dàng trong ES6 nhờ sử dụng Set như sau:

let uniqueArray = Array.from(new Set(duplicateArray));
console.log(uniqueArray); // Hiển thị: [5, 3, 8, 11, 12, 2]

Trong dòng đầu tiên trong đoạn code chúng ta tạo một Set mới từ mảng chứa các phần tử trùng lặp:

new Set(duplicateArray)

Sau đó chuyển đổi từ Set về mảng Array:

Array.from(new Set(duplicateArray));

Nếu bạn chưa rõ về kiểu dữ liệu Set thì tham khảo tiếp phần giải thích phía dưới đây.

Sử Dụng Set Object

Ở đoạn code trên chúng ta tạo một Set object sử dụng cú pháp new Set() với đối số đầu vào chính là mảng chứa các giá trị trùng lặp duplicateArray. Set là kiểu dữ liệu mới trong ES6 tương tự như mảng và dùng để lưu trữ một tập hợp các phần tử, tuy nhiên khác với mảng thì các phần tử trong Set có giá trị không trùng với bất kỳ phần tử nào khác.

Một ví dụ đơn giản để tạo một Set từ mảng như sau;

let mySet = new Set([1, 1, 2, 3, 3, 4, 5]);
console.log(mySet); // Hiển thị: {1, 2, 3, 4, 5}

Lưu ý khi thực hiện console.log() trên kiểu dữ liệu Set bạn sẽ thấy kết quả hiển thị của Set object được đặt trong cặp dấu {...} thay vì [] như của Array.

Chúng ta có thể thêm/xoá phần tử vào/ra khỏi Set sử dụng method add() hoặc delete():

mySet.add(10);
mySet.delete(1);
console.log(mySet); // Hiển thị: {2, 3, 4, 5, 10}

Hoặc để kiểm tra sự tồn tại của một giá trị cho trước trong Set:

let exists = mySet.has(10);
console.log(exists); // Hiển thj: true
exists = mySet.has(100);
console.log(exists); // Hiển thj: false

Sử Dụng Spead Operator (ES6)

Để tạo một mảng Array từ kiểu dữ liệu Set object thì ngoài việc sử dụng method Array.from() ra thì chúng ta còn có thể sử dụng spread operator trong ES6 như sau:

uniqueArray = [...new Set(duplicateArray)];

Kết Luận

Với phiên bản mới ES6 thì chúng ta có thể viết code JavaScript ngắn hơn rất nhiều so với trước đây. Một số tác vụ có thể sẽ cần nhiều dòng code để hoàn tất thì giờ đây có thể được thực hiện trong 1 dòng duy nhất!