Bản đồ JavaScript

Trong hướng dẫn này, bạn sẽ tìm hiểu về JavaScript Maps và WeakMaps với sự trợ giúp của các ví dụ.

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

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

Các phần tử trong Bản đồ được chèn theo thứ tự chèn. Tuy nhiên, không giống như một đối tượng, một bản đồ có thể chứa các đối tượng, chức năng và các kiểu dữ liệu khác làm khóa.

Tạo bản đồ JavaScript

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

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

Chèn mục vào bản đồ

Sau khi bạn tạo một bản đồ, bạn có thể sử dụng set()phương pháp để chèn các phần tử vào nó. 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}}

Bạn cũng có thể sử dụng các đối tượng hoặc chức năng làm phím. 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"}}

Truy cập các phần tử bản đồ

Bạn có thể truy cập Mapcác phần tử bằng get()phương pháp này. 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"}

Kiểm tra các yếu tố bản đồ

Bạn có thể sử dụng has()phương pháp này để kiểm tra xem phần tử có trong Bản đồ 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

Loại bỏ các phần tử

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

Các delete()trở về phương pháp truenếu một cặp khóa / giá trị quy định tồn tại và đã bị xóa hoặc lợi nhuận khác 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 {}

Các clear()phương pháp loại bỏ tất cả các cặp khóa / giá trị từ một đối tượng bản đồ. Ví dụ,

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

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

Kích thước bản đồ JavaScript

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

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

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

Lặp lại qua bản đồ

Bạn có thể lặp qua các phần tử của Bản đồ 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);
}

Đầu ra

name- Jack
age- 27

Bạn cũng có thể nhận được kết quả tương tự như chương trình trên bằng cách sử dụng forEach()phương pháp này. 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)
})

Lặp lại các khóa bản đồ

Bạn có thể lặp lại Bản đồ và lấy chìa khóa bằng keys()phương pháp này. 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)
}

Đầu ra

name
age

Lặp lại các giá trị bản đồ

Bạn có thể lặp lại trên Bản đồ và lấy các giá trị bằng values()phương pháp này. 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);
}

Đầu ra

Jack
27

Nhận chính / giá trị của bản đồ

Bạn có thể lặp lại Bản đồ và lấy khóa / giá trị của Bản đồ bằng entries()phương pháp này. 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]}`);
}

Đầu ra

name: Jack
age: 27