Giới thiệu về Maps bằng JavaScript

---

Ta đã giới thiệu các bộ trong JavaScript, vì vậy, thật hợp lý khi ta theo dõi cuộc thảo luận về bản đồ, cũng đã được giới thiệu với ES2015. Bản đồ là một loại đối tượng mới cho phép lưu trữ bộ sưu tập các cặp key-value .

Không giống như các đối tượng, các phím bản đồ có thể thuộc bất kỳ loại nào, thậm chí là các đối tượng hoặc chức năng. Cũng dễ dàng để có được kích thước của một bản đồ, trong khi nó không đơn giản đối với các đối tượng. Trên hết, với các bản đồ, ta có thể lặp lại theo thứ tự các giá trị đã được thêm vào, ngược lại với các đối tượng không có gì đảm bảo về thứ tự.

Dưới đây là một ví dụ đơn giản về bản đồ thể hiện một số phương thức và thuộc tính có sẵn như set , get , size , has , delete và clear :

let things = new Map();

const myFunc = () => '🍕';

things.set('🚗', 'Car');
things.set('🏠', 'House');
things.set('✈️', 'Airplane');
things.set(myFunc, '😄 Key is a function!');

things.size; // 4

things.has('🚗'); // true

things.has(myFunc) // true
things.has(() => '🍕'); // false, not the same reference
things.get(myFunc); // '😄 Key is a function!'

things.delete('✈️');
things.has('✈️'); // false

things.clear();
things.size; // 0

// setting key-value pairs is chainable
things.set('🔧', 'Wrench')
      .set('🎸', 'Guitar')
      .set('🕹', 'Joystick');

const myMap = new Map();

// Even another map can be a key
things.set(myMap, 'Oh gosh!');
things.size; // 4
things.get(myMap); // 'Oh gosh!'

Khởi tạo Bản đồ từ Mảng

Bạn có thể khởi tạo một bản đồ từ một mảng chứa các mảng hai giá trị:

const funArray = [
  ['🍾', 'Champagne'],
  ['🍭', 'Lollipop'],
  ['🎊', 'Confetti'],
];

let funMap = new Map(funArray);
funMap.get('🍾'); // Champagne

Lặp lại trên bản đồ

Thật dễ dàng để lặp lại các bản đồ bằng cách sử dụng cho… of và cấu trúc mảng :

let activities = new Map();

activities.set(1, '🏂');
activities.set(2, '🏎');
activities.set(3, '🚣');
activities.set(4, '🤾');

for (let [nb, activity] of activities) {
  console.log(`Activity ${nb} is ${activity}`);
}

// Activity 1 is 🏂
// Activity 2 is 🏎
// Activity 3 is 🚣
// Activity 4 is 🤾

… Và bạn cũng có thể sử dụng forEach để lặp lại bản đồ theo cách tương tự. Tuy nhiên, hãy lưu ý cách đối số đầu tiên của hàm gọi lại forEach là giá trị và đối số thứ hai là khóa . Phần sau sẽ có kết quả tương tự như cho… ví dụ:

activities.forEach((value, key) => {
  console.log(`Activity ${key} is ${value}`);
});

---

---

Các tin liên quan

Hiểu cú pháp và cấu trúc mã trong JavaScript
2017-07-05
Cách thêm JavaScript vào HTML
2017-06-30
Cách sử dụng control panel dành cho nhà phát triển JavaScript
2017-06-29
Cách viết comment bằng JavaScript
2017-06-20
Hiểu các loại dữ liệu trong JavaScript
2017-06-01
Phương thức chuỗi padStart và padEnd trong JavaScript
2017-02-17
Các chữ mẫu được gắn thẻ trong JavaScript (ES6 / ES2015)
2017-02-07
Bắt đầu với Trực quan hóa Dữ liệu Sử dụng JavaScript và Thư viện D3
2016-12-28
Bắt đầu với Trực quan hóa Dữ liệu Sử dụng JavaScript và Thư viện D3
2016-12-28
Cách làm việc với JSON trong JavaScript
2016-12-09