JavaScript Maps and WeakMaps: Học sự khác biệt với ví dụ

ES6 trong JavaScript đã giới thiệu hai cấu trúc dữ liệu mới, tức là Map và WeakMap.

Map tương tự như đối tượng trong JavaScript cho phép chúng ta lưu trữ các phần tử dưới dạng cặp khóa/giá trị.

Các phần tử trong một Map được chèn theo thứ tự chèn. Tuy nhiên, khác với một đối tượng, một map có thể chứa đối tượng, hàm và các kiểu dữ liệu khác nhau như khóa.

Tạo Map trong JavaScript

Để tạo một Map, chúng ta sử dụng hàm tạo new Map(). Ví dụ,

// create a Map
const map1 = new Map(); // an empty map
console.log(map1); // Map {}

Run Code

Chèn phần tử vào Map

Sau khi bạn tạo một map, bạn có thể sử dụng phương thức set() để chèn các phần tử vào đó. Ví dụ,

// create a set
let map1 = new Map();

// insert key-value pair
map1.set('info', {name: 'Jack', age: 26});
console.log(map1); // Map {"info" => {name: "Jack", age: 26}}

Run Code

Bạn cũng có thể sử dụng đối tượng hoặc hàm làm khóa. Ví dụ,

// Map with object key
let map2 = new Map();

let obj = {};
map2.set(obj, {name: 'Jack', age: "26"});

console.log(map2); // Map {{} => {name: "Jack", age: "26"}}

Run Code

Truy cập phần tử trong Map

Bạn có thể truy cập các phần tử trong Map bằng cách sử dụng phương thức get(). Ví dụ,

let map1 = new Map();
map1.set('info', {name: 'Jack', age: "26"});

// access the elements of a Map
console.log(map1.get('info')); // {name: "Jack", age: "26"}

Run Code

Kiểm tra phần tử trong Map

Bạn có thể sử dụng phương thức has() để kiểm tra xem phần tử có trong Map hay không. Ví dụ,

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

let map1 = new Map();
map1.set('info', {name: 'Jack', age: "26"});

// check if an element is in Set
console.log(map1.has('info')); // true

Run Code

Xóa phần tử

Bạn có thể sử dụng phương thức clear() và delete() để xóa phần tử khỏi Map.

Phương thức delete() trả về true nếu cặp khóa/giá trị được chỉ định tồn tại và đã bị xóa, ngược lại trả về false. Ví dụ,

let map1 = new Map();
map1.set('info', {name: 'Jack', age: "26"});

// removing a particular element
map1.delete('address'); // false
console.log(map1); // Map {"info" => {name: "Jack", age: "26"}}

map1.delete('info'); // true
console.log(map1); // Map {}

Run Code

Phương thức clear() xóa tất cả các cặp khóa/giá trị khỏi đối tượng Map. Ví dụ,

let map1 = new Map();
map1.set('info', {name: 'Jack', age: "26"});

// removing all element
map1.clear();
console.log(map1); // Map {}

Run Code

Kích thước của JavaScript Map

Bạn có thể lấy số lượng các phần tử trong một Map bằng cách sử dụng thuộc tính size. Ví dụ,

let map1 = new Map();
map1.set('info', {name: 'Jack', age: "26"});

console.log(map1.size); // 1

Run Code

Lặp qua một Map

Bạn có thể lặp qua các phần tử của Map bằng cách sử dụng vòng lặp for…of hoặc phương thức forEach(). Các phần tử được truy cập theo thứ tự chèn. Ví dụ,

let map1 = new Map();
map1.set('name', 'Jack');
map1.set('age', '27');

// looping through Map
for (let [key, value] of map1) {
    console.log(key + '- ' + value);
}

Run Code

Đầu ra

name- Jack
age- 27

Bạn cũng có thể đạt được kết quả tương tự như chương trình trên bằng cách sử dụng phương thức forEach(). Ví dụ,

// using forEach method()
let map1 = new Map();
map1.set('name', 'Jack');
map1.set('age', '27');

// looping through Map
map1.forEach(function(value, key) {
  console.log(key + '- ' + value)
})

Run Code

Lặp qua các Khóa của Map

Bạn có thể lặp qua Map và lấy khóa bằng cách sử dụng phương thức keys(). Ví dụ,

let map1 = new Map();
map1.set('name', 'Jack');
map1.set('age', '27');

// looping through the Map
for (let key of map1.keys()) {
  console.log(key)
}

Run Code

Đầu ra

name
age

Lặp qua các Giá trị của Map

Bạn có thể lặp qua Map và lấy giá trị bằng cách sử dụng phương thức values(). Ví dụ,

let map1 = new Map();
map1.set('name', 'Jack');
map1.set('age', '27');

// looping through the Map
for (let values of map1.values()) {
    console.log(values);
}

Run Code

Đầu ra

Jack
27

Lấy Khóa/Giá trị của Map

Bạn có thể lặp qua Map và lấy khóa/giá trị của Map bằng cách sử dụng phương thức entries(). Ví dụ,

let map1 = new Map();
map1.set('name', 'Jack');
map1.set('age', '27');

// looping through the Map
for (let elem of map1.entries()) {
    console.log(`${elem[0]}: ${elem[1]}`);
}

Run Code

Đầu ra

name: Jack
age: 27

So sánh JavaScript Map và Object

JavaScript WeakMap

WeakMap tương tự như Map. Tuy nhiên, WeakMap chỉ có thể chứa đối tượng làm khóa. Ví dụ,

const weakMap = new WeakMap();
console.log(weakMap); // WeakMap {}

let obj = {};

// adding object (element) to WeakMap
weakMap.set(obj, 'hello');

console.log(weakMap); // WeakMap {{} => "hello"}

Run Code

Khi bạn cố gắng thêm các kiểu dữ liệu khác ngoài đối tượng, WeakMap sẽ ném một lỗi. Ví dụ,

const weakMap = new WeakMap();

// adding string as a key to WeakMap
weakMap.set('obj', 'hello');

Run Code

// ném lỗi // TypeError: Attempted to set a non-object key in a WeakMap

Các Phương thức của WeakMap

WeakMap có các phương thức get(), set(), delete(), và has(). Ví dụ,

const weakMap = new WeakMap();
console.log(weakMap); // WeakMap {}

let obj = {};

// adding object (element) to WeakMap
weakMap.set(obj, 'hello');

console.log(weakMap); // WeakMap {{} => "hello"}

// get the element of a WeakMap
console.log(weakMap.get(obj)); // hello

// check if an element is present in WeakMap
console.log(weakMap.has(obj)); // true

// delete the element of WeakMap
console.log(weakMap.delete(obj)); // true

console.log(weakMap); // WeakMap {}

Run Code

WeakMap Không thể được lặp

Không giống như Map, WeakMap không thể được lặp qua. Ví dụ,

const weakMap = new WeakMap();
console.log(weakMap); // WeakMap {}

let obj = {};

// adding object (element) to WeakMap
weakMap.set(obj, 'hello');


// looping through WeakMap
for (let i of weakMap) {

    console.log(i);  // TypeError
}

Run Code

Map và WeakMap trong JavaScript được giới thiệu trong ES6. Một số trình duyệt có thể không hỗ trợ việc sử dụng chúng.

• Bài đăng blog này ban đầu được xuất bản tại: https://www.programiz.com/