Đối tượng Set trong javascript

Chào các bạn

Trong bài viết này mình sẽ nói về đối tượng Set.

Set là gì ?

Set là một đối tượng lưu trữ giá trị duy nhất của bất kỳ kiểu dữ liệu nào. Cho dù là một object hay nguyên thủy như number string ...

Cú pháp

Ví dụ:

1let set = new Set();

Phương pháp và tài sản

Trong Set có vài phương pháp và tài sản. Chúng ta cùng đi qua nó nhé. Giải thích ý nghĩa rồi đi vào ví dụ sau.

1. set.add(value) Thêm giá trị vào set
   • value Bất kể giá trị nào
2. set.clear() Xóa tất cả các giá trị trong set
3. set.delete(value) Xóa giá trị trong set theo value
   • value Giá trị cần xóa
4. set.entries() Trả về đối tượng lặp lại chứa mảng giá trị [key, value]
5. set.forEach(callbackfn) Lặp tất cả các giá trị có trong set
   • callbackfn Một chức năng gọi lại khi lặp qua giá trị trong set
6. set.has(value) Kiểm tra giá trị trong set. Trả về true hoặc false
   • value Giá trị cần kiểm tra.
7. set.keys() Lấy ra mảng giá trị trong set. Tương đương set.values()
8. set.size Lấy ra kích thước các giá trị có trong set. Trả về number
9. set.values() Lấy ra mảng giá trị có trong set. Tương đương set.keys()

Ví dụ:

• Tạo set

1let set = new Set();
2
3// hoặc một mảng các giá trị
4let set1 = new Set([1, 2, 3])
5
6// hoặc đối tượng có phương pháp Symbol.iterator
7let set2 = new Set("123");
8
9// Nếu bạn chưa biết về Symbol.iterator
10let str = "123"
11let iterator = str[Symbol.iterator]();
12
13while(true) {
14    let {value, done} = iterator.next();
15    if(done) {
16        break;
17    } 
18    console.log(value); // 1, 2, 3
19}

• Thêm giá trị

1set.add(1);
2set.add(2);
3set.add(3);

• Kiểm tra giá trị

1if(set.has(2)) {
2    console.log("Chạy");
3}

• Lấy ra mảng giá trị trong set

1let values = set.values();
2
3// tương đương
4
5let keys = set.keys();

• Lấy ra mảng [key, value]

1let entries = set.entries();

• Lấy kích thước phần tử trong set

1let size = set.size;

• Xóa giá trị trong set

1let boolean = set.delete(2);

• Lặp qua set

1set.forEach(function (value, value2, set) {
2    // value Chính là giá trị trong set
3    // value2 Chính là giá trị trong set
4    // set Chính là đối tượng set
5    console.log(`Value: ${value} - Value2: ${value2} - Set: ${set}`);
6});

• Xóa tất cả các giá trị trong set

1set.clear();

Ví dụ hoàn chỉnh:

1let set = new Set(); // tạo set
2
3set.add(1); // Thêm giá trị vào set
4set.add(2);
5set.add(3);
6
7if (set.has(2)) {
8    console.log("Chạy"); // Chạy
9}
10
11let values = set.values();
12console.log(values); // SetIterator {1, 2, 3}
13
14let keys = set.keys();
15console.log(keys); // SetIterator {1, 2, 3}
16
17let entries = set.entries();
18console.log(entries); // SetIterator {1 => 1, 2 => 2, 3 => 3}
19
20let size = set.size;
21console.log(size); // 3
22
23let boolean = set.delete(2);
24console.log(boolean); // true
25
26set.forEach(function (value, value2, set) {
27    // value Chính là giá trị trong set
28    // value2 Chính là giá trị trong set
29    // set Chính là đối tượng set
30    console.log(`Value: ${value} - Value2: ${value2} - Set: ${set}`);
31    // Value: 1 - Value2: 1 - Set: [object Set]
32    // Value: 3 - Value2: 3 - Set: [object Set]
33});
34
35set.clear(); // Xóa tất cả

Lưu Ý: Tất cả các ví dụ trên mình đang log ra ở bản điều khiển trình duyệt. Nên sẽ khác nếu bạn chạy môi trường đầu ra khác.

Áp dụng vào thực tế

Giả sử các bạn đang có một mảng các giá trị trùng nhau. Nhưng chỉ muốn lấy ra một phần tử trùng trong mảng đó.

1// [1, 2, 3, 1];
2// Đầu ra
3// [1, 2, 3]

Bình thường nếu chúng ta chưa biết về Set thì nó như thế này

1let arr = [1, 2, 3, 1, 2, 4];
2
3let ketQua = arr.reduce((previousValue, currentValue) => {
4    if (!previousValue.includes(currentValue)) {
5        previousValue.push(currentValue);
6    }
7    return previousValue;
8}, []);
9
10console.log(ketQua); // [1, 2, 3, 4]
11
12console.log(Array.isArray(ketQua)); // true

Và còn thêm nhiều cách nữa. Nhưng ở đây mình chỉ làm ví dụ nhỏ để cho các bạn dễ hình dung.

Chuyển qua sài Set

1let arr = [1, 2, 3, 1, 2, 4];
2
3let ketQua = new Set(arr).values();
4
5console.log(Array.from(ketQua)); // [1, 2, 3, 4]
6
7console.log(Array.isArray(Array.from(ketQua))); // true

Như các bạn có thể thấy kết quả bây giờ nó ngắn hơn nhưng có nhiều cái hay.

• Array.from(ketQua) Dùng chuyển ketQua về mảng
• Array.isArray(ketQua) Dùng kiểm tra ketQua có phải là mảng thật hay không

Tổng kết

Trong bài viết này mình đã nói qua về đối tượng set. Các bạn cố gắng nhớ càng nhiều càng tốt nhé.

[OK]