TABLE OF CONTENTS

HomiedevLogoCùng học lập trình web 👨‍💻
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!

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

@devnavSep 25, 20227 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ề Spread Operator Javascript là gì?. Trong bài viết này chúng ta sẽ tìm hiểu về 2 data structures là Map và WeakMap nhé 🤩!

JavaScript Map

JavaScript ES6 đã giới thiệu cho chúng ta hai cấu trúc dữ liệu mới, đó là Map và WeakMaps.

Map tương tự như các object trong JavaScript, nó cho phép chúng ta lưu trữ các phần tử trong một cặp key / value.

Các phần tử trong Map được tạo ra theo thứ tự. Không giống như object, Map có thể chứa các object, function và các data types khác làm key 🔑.

Tạo một JavaScript Map

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

Ví dụ:

// tạo Map
const mapExample = new Map(); // empty map
console.log(mapExample); // Map {}

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

Sau khi chúng ta khởi tạo một Map, để thêm phần tử vào Map, chúng ta sử dụng method set().

Ví dụ:

// tạo Map
let map1 = new Map();

// thêm một key/value vào map
map1.set('blogInfo', {name: 'homiedev.com', categories: ['JS','REACTJS','FRONTEND']});
console.log(map1); // Map {"blogInfo" => {name: "homiedev.com", categories: Array(3)}}

Ở ví dụ trên, chúng ta đã tạo một item có key là blogInfo. Ngoài ra, ta còn có thể sử dụng một function hoặc object làm key.

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

let obj = {};
map2.set(obj, {name: 'homiedev.com', categories: ['LARAVEL','GATSBYJS','TYPESCRIPT']});

console.log(map2); // Map {{} => {name: "homiedev.com", categories: Array(3)}}

Lấy phần tử trong Map

Để lấy phần tử trong Map, chúng ta sử dụng method get().

let userMap = new Map();
userMap.set('info', {name: 'Hà', age: 22});

console.log(userMap.get('info')); // {name: 'Hà', age: 22}

Kiểm tra phần tử trong Map

Để kiểm tra một phần tử có trong Map hay không chúng ta sử dụng method has().

Ví dụ:

let skateboardMap = new Map();
skateboardMap.set('info', {company: "🛹 Santa Cruz Skateboards", founded: 1973});

console.log(skateboardMap.has('info')); // true

Xóa phần tử trong Map

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

Method delete() trong Map return true nếu một cặp key / value đã chỉ định tồn tại và đã bị xóa hoặc nếu không sẽ trả về false.

Ví dụ:

let laptopMap = new Map();
laptopMap.set('info1', {name: 'Laptop 💻', company: "Lenovo"});
laptopMap.set('info2', {name: 'Laptop 💻', company: "ASUS"});

// truyền key để xóa phần tử
console.log(laptopMap.delete('PC')); // false
console.log(laptopMap); // Map(2) {'info1' => {…}, 'info2' => {…}}

laptopMap.delete('info2'); // true
console.log(laptopMap); // Map(1) {'info1' => {…}}

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

let laptopMap = new Map();
laptopMap.set('info1', {name: 'Laptop 💻', company: "ACER"});
laptopMap.set('info2', {name: 'Laptop 💻', company: "DELL"});

// xóa hết phần tử trong Map
console.log(laptopMap.clear());
console.log(laptopMap); // Map(0) {size: 0}

Map Size

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

Ví dụ:

let userMap = new Map();
userMap.set('info1', {name: 'Hoài', age: 12});
userMap.set('info2', {name: 'Hà', age: 12});

console.log(userMap.size); // 2

Iterate trong Map

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

Ví dụ:

let userMap = new Map();
userMap.set('name', 'Hoài');
userMap.set('age', 12);

for (let [key, value] of userMap) {
    console.log(key + ' - ' + value);
}

Kết quả:

name - Hoài
age - 12

Kết quả tương tự như trên khi ta sử dụng method forEach().

Ví dụ:

let userMap = new Map();
userMap.set('name', 'Hoài');
userMap.set('age', 12);

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

Map keys(), values() và entries()

Để lấy các keys trong Map, chúng ta sử dụng method keys():

let userMap = new Map();
userMap.set('name', 'Hoài');
userMap.set('age', 12);

console.log(userMap.keys()); // {'name', 'age'}

Chúng ta có thể sử dụng for ... of để lặp qua các keys trên ^^.

Tương tự như vậy, để lấy values trong Map, chúng ta sử dụng method values():

let userMap = new Map();
userMap.set('name', 'Hà');
userMap.set('age', 22);

console.log(userMap.values()); // MapIterator {'Hà', 22}

Để lấy các key/value các bạn dùng method entries() và có thể kết hợp với for ... of để lặp qua các phần tử.

let userMap = new Map();
userMap.set('name', 'Vy');
userMap.set('age', 22);

for (let elem of userMap.entries()) {
    console.log(`${elem[0]}: ${elem[1]}`);
}

Kết quả:

name: Vy
age: 22

Khác nhau giữa Map vs Object trong JavaScript

Các bạn có thể xem một số điểm khác nhau giữa Map vs Object qua bảng dưới đây 📑 nhé.

Map Object
Map có thể sử dụng object, data types khác làm khóa. Object chỉ có thể sử dụng string và symbol làm khóa.
Có thể được lặp trực tiếp. Có thể được lặp lại bằng cách thông qua các key của nó.
Số lượng phần tử xác định bằng thuộc tính size. Số lượng phần tử được xác định theo cách thủ công.

JavaScript WeakMap

WeakMap ES6 tương tự như Map. Tuy nhiên, WeakMap chỉ có thể chứa key dạng object.

Ví dụ:

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

let obj = {};

// sử dụng key
weakMap.set(obj, 'hello');

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

Nếu sử dụng một kiểu dữ liệu khác làm key, sẽ dẫn đến lỗi: Uncaught TypeError: Invalid value used as weak map key, ví dụ:

const weakMap = new WeakMap();

weakMap.set('obj', 'hello'); // lỗi

Các methods của WeakMap

WeakMaps cũng có các method giống như Map là get(), set(), delete() và has().

Ví dụ:

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

let obj = {};

// thêm phần tử vào WeakMap
weakMap.set(obj, 'homiedev.com');

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

// lấy phần tử trong WeakMap
console.log(weakMap.get(obj)); // homiedev.com

// kiểm tra tồn tại phần tử, sử dụng key
console.log(weakMap.has(obj)); // true

// xóa một phần tử
console.log(weakMap.delete(obj)); // true

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

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

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

let obj = {};

weakMap.set(obj, 'homiedev.com');

for (let i of weakMap) { 
// Lỗi: weakMap is not iterable
  console.log(i);
}

Một số trình duyệt có thể không hỗ trợ việc sử dụng JavaScript ES6 Map và WeakMap. Các bạn nên lưu ý khi sử dụng nhé ^^.

Như vậy là chúng ta đã tìm hiểu xong Map và WeakMap trong JavaScript. Hi vọng bài viết giúp ích cho các bạn.

Chúng ta có thể thảo luận về chủ đề này bên dưới phần bình luận nhé 🥳.

Một số bài viết nên đọc:

  1. Khác nhau giữa for...in và for...of JavaScript
  2. Object.is() trong Javascript là gì?
  3. Method Object.keys(), values, entries trong JavaScript
Có thể bạn thích ⚡
homiedev
About Me

Hi, I'm @devnav. Một người thích chia sẻ kiến thức, đặc biệt là về Frontend 🚀. Trang web này được tạo ra nhằm giúp các bạn học Frontend hiệu quả hơn 🎉😄.

Chúc các bạn tìm được kiến thức hữu ích trong blog này 😁😁.