THÔNG DỤNG
OOP
ES6
ES(X)
CÁC CHỦ ĐỀ
BÀI MỚI NHẤT
MỚI CẬP NHẬT

Collection Sets trong ES6

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.

test php

banquyen png
Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

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.

Bài viết này được đăng tại [free tuts .net]

 

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à mapfilter. đượ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.

Cùng chuyên mục:

Functional Programming là gì? Tại sao và khi nào bạn nên sử dụng trong JavaScript

Functional Programming là gì? Tại sao và khi nào bạn nên sử dụng trong JavaScript

Những tính năng mới trong ES6+ trong JavaScript

Những tính năng mới trong ES6+ trong JavaScript

4 cách tránh memory leaks trong JavaScript

4 cách tránh memory leaks trong JavaScript

Capturing và bubbling Event trong Javascript

Capturing và bubbling Event trong Javascript

Phân biệt prototype và __proto__ trong JavaScript

Phân biệt prototype và __proto__ trong JavaScript

Cách hoạt động của Event Loop trong JavaScript

Cách hoạt động của Event Loop trong JavaScript

Phương thức bind(), call(), và apply() trong JavaScript

Phương thức bind(), call(), và apply() trong JavaScript

Cách khắc phục lỗi

Cách khắc phục lỗi "hoisting" trong JavaScript

Sử dụng Promise.all và Promise.race để quản lý các Promise trong JavaScript

Sử dụng Promise.all và Promise.race để quản lý các Promise trong JavaScript

Xử lý bất đồng bộ bằng vòng lặp for-await trong JavaScript

Xử lý bất đồng bộ bằng vòng lặp for-await trong JavaScript

Sự khác biệt giữa Promise, Callback và Async/Await trong JavaScript

Sự khác biệt giữa Promise, Callback và Async/Await trong JavaScript

Cách sử dụng Async functions trong JavaScript

Cách sử dụng Async functions trong JavaScript

Hàm String isspace() trong Python

Hàm String isspace() trong Python

Cách tạo số ngẫu nhiên trong Javascript

Cách tạo số ngẫu nhiên trong Javascript

Hướng dẫn cách tạo một số ngẫu nhiên ...

Cách gộp hai object javascript lại với nhau

Cách gộp hai object javascript lại với nhau

Cách lấy chiều dài của object trong Javascript

Cách lấy chiều dài của object trong Javascript

Hướng dẫn giải phương trình bậc 1 bằng Javascript

Hướng dẫn giải phương trình bậc 1 bằng Javascript

Cách dùng nextSibling trong javascript

Cách dùng nextSibling trong javascript

Cách dùng insertAdjacentHTML trong javascript

Cách dùng insertAdjacentHTML trong javascript

Cách dùng innerHTML trong Javascript

Cách dùng innerHTML trong Javascript

Top