Hi 🤓 Cảm ơn bạn đã ghé thăm blog này, nếu những bài viết trên blog giúp ích cho bạn. Bạn có thể giúp blog hiển thị quảng cáo bằng cách tạm ngừng ad blocker 😫 và để giúp blog duy trì hoạt động nếu bạn muốn.
Cảm ơn bạn!

Set vs WeakSet Javascript ES6 là gì? tìm hiểu qua ví dụ đơn giản

@devnavSep 26, 20225 min read...

Chào các bạn, lại là homiedev với chủ đề học JavaScript cơ bản đây. Ở bài viết trước, chúng ta đã tìm hiểu về 2 data structures là Map và WeakMaps Javascript ES6. Trong bài viết này chúng ta tiếp tục tìm hiểu về 2 data structures khác đó là Set và WeakSet nhé 🤩!

Set trong JavaScript là gì?

Set tương tự như một mảng cho phép chúng ta lưu nhiều phần tử như numbers, strings, objects,... Tuy nhiên, điểm đặc biệt của Set đó là không thể chứa các giá trị trùng lặp.

Tạo một JavaScript Set

Để tạo một Set, chúng ta sử dụng new Set() contructor.

Ví dụ:

// khởi tạo Set
const categoriesSet = new Set(); // empty set
console.log(categoriesSet); // Set {}

const blogSet = new Set([
  'homiedev.com', 'front-end', {categories: ['JS','TS','REACTJS','GATSBYJS']}
]);
console.log(blogSet); // Set(3) {'homiedev.com', 'front-end', {…}}

Giả sử chúng ta truyền một giá trị trùng lặp vào Set, lúc này các giá trị trùng lặp sẽ bị loại trừ.

const setExample = new Set(['homiedev', 1, 'homiedev', 2]);
console.log(setExample); // Set(3) {'homiedev', 1, 2}

Lấy các phần tử trong Set

Để lấy các phần tử của Set, chúng ta sử dụng method values(). Để kiểm tra phần tử có trong Set hay không thì ta sử dụng method has().

Ví dụ:

const set1 = new Set([1, 2, 3]);

console.log(set1.values()); // Set Iterator [1, 2, 3]
console.log(set1.has('homiedev.com')); // false

Thêm phần tử vào Set

Để thêm phần tử vào Set, chúng ta sử dụng method add().

const set = new Set(['blog', 'front-end']);
console.log(set.values());

// thêm giá trị mới vào Set
set.add('homiedev');
console.log(set.values());

// thêm tiếp một phần tử trùng lặp
set.add('blog');
console.log(set.values());

Kết quả:

SetIterator {'blog', 'front-end'}
SetIterator {'blog', 'front-end', 'homiedev'}
SetIterator {'blog', 'front-end', 'homiedev'}

Xóa phần tử trong Set

Để xóa các phần tử khỏi Set, chúng ta có thể sử dụng method clear() và delete().

Method delete() loại bỏ một phần tử đã chỉ định khỏi tập hợp.

Ví dụ:

const numberSet = new Set([1, 2, 3]);
console.log(numberSet.values()); // Set Iterator [1, 2, 3]

// xóa một phần tử
numberSet.delete(3);
console.log(numberSet.values()); // Set Iterator [1, 2]

Nếu muốn xóa tất cả phần tử trong Set, các bạn có thể sử dụng method clear() 🧹.

const numberSet = new Set([1, 2, 3]);
console.log(numberSet.values()); // Set Iterator [1, 2, 3]

// xóa tất cả phần tử
numberSet.clear();
console.log(numberSet.values()); // Set Iterator []

Set Size

Để xem số phần tử trong Set chúng ta sử dụng thuộc tính size.

Ví dụ:

const blogSet = new Set(['blog', 'homiedev', 'JavaScript']);

console.log(blogSet.size); // 3

Iterate Sets

Bạn có thể lặp qua các phần tử trong Set bằng cách sử dụng vòng lặp for ... of hoặc method forEach().

const set = new Set(['blog', 'homiedev', 'JavaScript']);

for (let i of set) {
    console.log(i);
}

Kết quả:

blog
homiedev
JavaScript

WeakSet trong JavaScript là gì?

WeakSet tương tự như Set. Tuy nhiên, WeakSet chỉ có thể chứa các object trong khi Set có thể chứa bất kỳ kiểu dữ liệu nào như string, number, object,...

Ví dụ:

const weakSet = new WeakSet();

let obj = {
    name: 'Minh',
    age: 22
}

// thêm phần tử vào weakSet
weakSet.add(obj);

console.log(weakSet); // WeakSet {{name: "Minh", age: 22}}

Khi chúng ta thêm một phần tử có kiểu khác object thì sẽ xảy ra lỗi.

// thêm một giá trị string
weakSet.add('homiedev');

console.log(weakSet);
// Lỗi: Uncaught TypeError: Invalid value used in weak set

WeakSet Methods

WeakSets có các phương thức add(), delete() và has().

Ví dụ:

const weakSet = new WeakSet();

const obj = {name: 'Tú'};

// thêm phần tử vào weakSet
weakSet.add(obj);
console.log(weakSet); // WeakSet {{name: 'Tú'}}

// kiểm tra sự tồn tại của obj
console.log(weakSet.has(obj)); // true

// xóa phần tử
weakSet.delete(obj);
console.log(weakSet); // WeakSet {}

Chúng ta không thể lặp các phần tử trong WeakSet.

const weakSet = new WeakSet({number: 1});

for (let i of weakSet) {
// Lỗi: Uncaught TypeError
  console.log(i);
}

Trong JavaScript, Set không cung cấp cho chúng ta các built-in methods để thực hiện các phép toán như phép hợp, giao,... Tuy nhiên, chúng ta có thể tạo các hàm để thực hiện các phép toán đó.

Union (Phép hợp) trong Set

// gộp 2 tập hợp
function union(a, b) {
    let unionSet = new Set(a);
    for (let i of b) {
        unionSet.add(i);
    }
    return unionSet
}

let setA = new Set(['JavaScript', 'Laravel', 'CSS']);
let setB = new Set(['HTML', 'TypeScript', 'GatsbyJS']);

let result = union(setA, setB);

console.log(result);

Kết quả:

Set {'JavaScript', 'Laravel', 'CSS', 'HTML', 'TypeScript', 'GatsbyJS'}

Intersection (Phép giao)

// phép giao: tập hợp gồm những phần tử thuộc cả A và B
function intersection(setA, setB) {
    let intersectionSet = new Set();

    for (let i of setB) {
        if (setA.has(i)) {
            intersectionSet.add(i);
        }
    }
    return intersectionSet;
}

let setA = new Set(['Messi', 'Ronaldo', 'Suarez']);
let setB = new Set(['Martinez', 'Nesta', 'Neymar', 'Messi']);

let result = intersection(setA, setB);

console.log(result);