Collection Sets trong ES6 - Javascript nâng cao

Trong ES5 không tồn tại dữ liệu dạng cấu trúc tập hợp, vì vậy chúng ta sử dụng mảng để lưu trữ dữ tập hợp các phần tử. Tuy nhiên với ES6 thì mọi chuyện đơn giản hơn bởi vì nó có hỗ trợ kiểu dữ liệu tập hợp Set với các giá trị truyền vào tùy ý kèm theo tốc độ xử lý nhanh chóng.

1. Set trong ES6

Chúng ta có bốn thao tác chính khi làm việc với set như sau:

• Khởi tạo: let set = new Set();
• Thêm phần tử: set.add(value);
• Xóa phần tử: set.delete(value);
• Kiểm tra tồn tại giá trị: set.has(value);
• Đếm tổng số phần tử: set.size;
• Xóa toàn bộ phần tử: set.clear();

Đối với Set thì các giá trị không được trùng, vì vậy nếu bạn cố tình thêm vào hai giá trị giống nhau thì nó chỉ lưu một lần mà thôi.

Khởi tạo:

Lúc khởi tạo sẽ có một tham số truyền vào, tham số này bắt buộc phải là một mảng.

var numbers = new Set([1, 2, 3, 4]);

Thêm phần tử:

var numbers = new Set([1, 2, 3, 4]);

numbers.add(5); // numbers = Set {1, 2, 3, 4 ,5}

Xóa phần tử:

var numbers = new Set([1, 2, 3, 4]);

numbers.delete(2); // numbers = Set {1, 3, 4}

Kiểm tra phần tử tồn tại:

var numbers = new Set([1, 2, 3, 4]);

console.log(numbers.has(1)); // True
console.log(numbers.has(5)); // False

Đếm tổng số phần tử:

var numbers = new Set([1, 2, 3, 4]);

console.log(numbers.size); // 4

Xóa toàn bộ phần tử:

var numbers = new Set([1, 2, 3, 4]);

numbers.clear(); // numbers = Set()

2. Sử dụng vòng lặp với Set

Set là một tập hợp nên bạn hoàn toàn có thể lặp qua các phần tử như ví dụ sau:

let numbers = new Set([1, 2, 3, 4]);

for (let number of numbers){
    console.log(number);
}


// Output:
// 1
// 2
// 3
// 4

3. Chuyển đổi Set sang Array

Để chuyển đổi Set sang Array thì bạn sử dụng ba dấu chấm đặt trước biến Set.

let numbers = new Set([1, 2, 3, 4]);

let arr_numbers = [...numbers];

// Lúc này  biến arr_numbers sẽ là một mảng gồm 4 phần tử 
// [1, 2, 3, 4]

Ngược lại để chuyển đổi một Array sang Set thì bạn sử dụng cách sau:

let arr_numbers = [1, 2, 3, 4];

let set_numbers = new Set(arr_numbers);

// Lúc này  biến set_numbers sẽ là Set {1, 2, 3, 4}

Lưu ý: Khi chuyển từ Array sang Set nếu 2 phần tử có giá trị trùng nhau thì nó chỉ lấy đúng một phần tử.

4. Mapping và filtering

Bây giờ ta sẽ tìm hiểu đến hai hàm đó là map và filter. được dùng để chuyển đổi qua Array vả xử lý.

Mapping:

Mapping là một hàm được tích hợp sẵn trong Array với chức năng là thiết lập giá trị cho phần tử trong môi lần lặp (tham khảo hàm map).

let set = new Set([1, 2, 3]);
let arr = [...set].map(function(x){
    return x * 2;
});

console.log(set); // Set(1, 2, 3)
console.log(arr); // [2, 4, 6]

Như vậy trong hàm mapping trả về giá trị bao nhiêu thì phần tử tại lần lặp đó sẽ có giá trị bấy nhiêu.

Filtering:

Filtering cũng được tích hợp sẵn trong Array, chức năng của hàm này là trả về true thì phần tử được chọn, trả về false thì phần tử không được chọn (tham khảo hàm filter).

let set = new Set([1, 2, 3]);

// Lấy các số chẵn
let arr = [...set].filter(function(x){
    return (x % 2) == 0;
});

console.log(set); // Set(1, 2, 3)
console.log(arr); // [2]

5. Lời kết

Bài này có phần khó hiểu ở phần thứ 4 mapping và filtering nếu như bạn không theo dõi từ đầu series, vì vậy nếu bạn đang đọc bài này mà chưa đọc các bài trước thì mình khuyên nên quay lại và đọc lần lượt từ bài 01 nhé.

Giờ này cũng khuya rồi nên bài này mình sẽ dừng ở đây, chào và hẹn gặp lại các bạn.