Khi nào chúng ta nên sử dụng bản đồ trong JavaScript?

Bản tóm tắt. trong hướng dẫn này, bạn sẽ tìm hiểu về đối tượng Bản đồ JavaScript ánh xạ một khóa tới một giá trị

Giới thiệu về đối tượng Bản đồ JavaScript

Trước ES6, chúng tôi thường sử dụng một đối tượng để giả lập bản đồ bằng cách ánh xạ một khóa tới một giá trị thuộc bất kỳ loại nào. Nhưng sử dụng một đối tượng làm bản đồ có một số tác dụng phụ

1. Một đối tượng luôn có một khóa mặc định giống như nguyên mẫu
2. Khóa của một đối tượng phải là một chuỗi hoặc ký hiệu, bạn không thể sử dụng một đối tượng làm khóa
3. Một đối tượng không có thuộc tính đại diện cho kích thước của bản đồ

ES6 cung cấp một loại bộ sưu tập mới có tên là

let userRoles = new Map();
Code language: JavaScript (javascript)

5 để giải quyết những thiếu sót này

Theo định nghĩa, một đối tượng

let userRoles = new Map();
Code language: JavaScript (javascript)

5 chứa các cặp khóa-giá trị. Các khóa là duy nhất trong bộ sưu tập của Bản đồ. Nói cách khác, một khóa trong đối tượng Bản đồ chỉ xuất hiện một lần

Các khóa và giá trị của Bản đồ có thể là bất kỳ giá trị nào

Khi lặp một đối tượng

let userRoles = new Map();
Code language: JavaScript (javascript)

5, mỗi lần lặp trả về một mảng 2 phần tử của

let userRoles = new Map();
Code language: JavaScript (javascript)

8. Thứ tự lặp lại tuân theo thứ tự chèn tương ứng với thứ tự mà mỗi cặp khóa-giá trị được chèn lần đầu tiên vào Bản đồ bằng phương pháp

let userRoles = new Map();
Code language: JavaScript (javascript)

9

Để tạo một

let userRoles = new Map();
Code language: JavaScript (javascript)

5 mới, bạn sử dụng cú pháp sau

let map = new Map([iterable]);
Code language: JavaScript (javascript)

console.log(typeof(userRoles)); // object
console.log(userRoles instanceof Map); // true
Code language: JavaScript (javascript)

1 chấp nhận một đối tượng có thể lặp lại tùy chọn có các phần tử là các cặp khóa-giá trị

Các phương thức Bản đồ JavaScript hữu ích

• console.log(typeof(userRoles)); // object
  console.log(userRoles instanceof Map); // true
  Code language: JavaScript (javascript)

  2 – xóa tất cả các phần tử khỏi đối tượng bản đồ

• console.log(typeof(userRoles)); // object
  console.log(userRoles instanceof Map); // true
  Code language: JavaScript (javascript)

  3 – xóa phần tử được chỉ định bởi khóa. Nó trả về nếu phần tử có trong bản đồ hoặc sai nếu không

• console.log(typeof(userRoles)); // object
  console.log(userRoles instanceof Map); // true
  Code language: JavaScript (javascript)

  4 – trả về một đối tượng Iterator mới chứa một mảng

  let userRoles = new Map();
  Code language: JavaScript (javascript)

  8 cho mỗi phần tử trong đối tượng bản đồ. Thứ tự của các đối tượng trong bản đồ giống như thứ tự chèn

• console.log(typeof(userRoles)); // object
  console.log(userRoles instanceof Map); // true
  Code language: JavaScript (javascript)

  6 – gọi lại một cuộc gọi lại cho từng cặp khóa-giá trị trong bản đồ theo thứ tự chèn. Tham số thisArg tùy chọn đặt giá trị

  console.log(typeof(userRoles)); // object
  console.log(userRoles instanceof Map); // true
  Code language: JavaScript (javascript)

  7 cho mỗi lần gọi lại
• get(key) – trả về giá trị được liên kết với khóa. Nếu khóa không tồn tại, nó sẽ trả về không xác định
• has(key) – trả về true nếu giá trị liên kết với key tồn tại hoặc false nếu ngược lại

• console.log(typeof(userRoles)); // object
  console.log(userRoles instanceof Map); // true
  Code language: JavaScript (javascript)

  8 – trả về một Iterator mới chứa các khóa cho các phần tử theo thứ tự chèn

• console.log(typeof(userRoles)); // object
  console.log(userRoles instanceof Map); // true
  Code language: JavaScript (javascript)

  9 – đặt giá trị cho khóa trong đối tượng bản đồ. Nó trả về chính đối tượng bản đồ, do đó bạn có thể xâu chuỗi phương thức này với các phương thức khác

• userRoles.set(john, 'admin');
  Code language: JavaScript (javascript)

  0 trả về một đối tượng lặp mới chứa các giá trị cho từng phần tử theo thứ tự chèn

Các ví dụ về Bản đồ JavaScript

Hãy lấy một số ví dụ về việc sử dụng đối tượng Bản đồ

Tạo một đối tượng Bản đồ mới

Giả sử bạn có một danh sách

userRoles.set(john, 'admin');
Code language: JavaScript (javascript)

1 đối tượng như sau

let john = {name: 'John Doe'},
    lily = {name: 'Lily Bush'},
    peter = {name: 'Peter Drucker'};
Code language: JavaScript (javascript)

Giả sử rằng bạn phải tạo bản đồ người dùng và vai trò. Trong trường hợp này, bạn sử dụng đoạn mã sau

let userRoles = new Map();
Code language: JavaScript (javascript)

userRoles.set(john, 'admin');
Code language: JavaScript (javascript)

2 là một thể hiện của đối tượng

let userRoles = new Map();
Code language: JavaScript (javascript)

5 và kiểu của nó là một đối tượng như minh họa trong ví dụ sau

console.log(typeof(userRoles)); // object
console.log(userRoles instanceof Map); // true
Code language: JavaScript (javascript)

Thêm phần tử vào Bản đồ

Để gán vai trò cho người dùng, bạn sử dụng phương thức

let userRoles = new Map();
Code language: JavaScript (javascript)

9

userRoles.set(john, 'admin');
Code language: JavaScript (javascript)

Phương thức

let userRoles = new Map();
Code language: JavaScript (javascript)

9 ánh xạ người dùng

userRoles.set(john, 'admin');
Code language: JavaScript (javascript)

6 với vai trò

userRoles.set(john, 'admin');
Code language: JavaScript (javascript)

7. Vì phương thức

let userRoles = new Map();
Code language: JavaScript (javascript)

9 có thể xâu chuỗi, nên bạn có thể lưu một số thao tác nhập như trong ví dụ này

userRoles.set(lily, 'editor')
          .set(peter, 'subscriber');
Code language: JavaScript (javascript)

Khởi tạo bản đồ với một đối tượng có thể lặp lại

Như đã đề cập trước đó, bạn có thể truyền một đối tượng có thể lặp lại cho hàm tạo

console.log(typeof(userRoles)); // object
console.log(userRoles instanceof Map); // true
Code language: JavaScript (javascript)

1

let userRoles = new Map([
    [john, 'admin'],
    [lily, 'editor'],
    [peter, 'subscriber']
]);
Code language: JavaScript (javascript)

Nhận một phần tử từ bản đồ bằng phím

Nếu bạn muốn xem vai trò của

userRoles.set(lily, 'editor')
          .set(peter, 'subscriber');
Code language: JavaScript (javascript)

0 , bạn sử dụng phương thức

userRoles.set(lily, 'editor')
          .set(peter, 'subscriber');
Code language: JavaScript (javascript)

1

userRoles.get(john); // admin
Code language: JavaScript (javascript)

Nếu bạn chuyển một khóa không tồn tại, phương thức

userRoles.set(lily, 'editor')
          .set(peter, 'subscriber');
Code language: JavaScript (javascript)

1 sẽ trả về

userRoles.set(lily, 'editor')
          .set(peter, 'subscriber');
Code language: JavaScript (javascript)

3

let foo = {name: 'Foo'};
userRoles.get(foo); //undefined
Code language: JavaScript (javascript)

Kiểm tra sự tồn tại của một phần tử bằng khóa

Để kiểm tra xem một khóa có tồn tại trong bản đồ hay không, bạn sử dụng phương pháp

userRoles.set(lily, 'editor')
          .set(peter, 'subscriber');
Code language: JavaScript (javascript)

4

userRoles.has(foo); // false
userRoles.has(lily); // true
Code language: JavaScript (javascript)

Lấy số phần tử trong bản đồ

Thuộc tính

userRoles.set(lily, 'editor')
          .set(peter, 'subscriber');
Code language: JavaScript (javascript)

5 trả về số lượng mục nhập của đối tượng Bản đồ

let john = {name: 'John Doe'},
    lily = {name: 'Lily Bush'},
    peter = {name: 'Peter Drucker'};
Code language: JavaScript (javascript)

0

Lặp lại các phím bản đồ

Để lấy khóa của một đối tượng

let userRoles = new Map();
Code language: JavaScript (javascript)

5, bạn sử dụng phương thức

console.log(typeof(userRoles)); // object
console.log(userRoles instanceof Map); // true
Code language: JavaScript (javascript)

8.

console.log(typeof(userRoles)); // object
console.log(userRoles instanceof Map); // true
Code language: JavaScript (javascript)

8 trả về một đối tượng lặp mới chứa các khóa của các phần tử trong bản đồ

Ví dụ sau hiển thị tên người dùng của người dùng trong đối tượng bản đồ

userRoles.set(john, 'admin');
Code language: JavaScript (javascript)

2

let john = {name: 'John Doe'},
    lily = {name: 'Lily Bush'},
    peter = {name: 'Peter Drucker'};
Code language: JavaScript (javascript)

1

đầu ra

let john = {name: 'John Doe'},
    lily = {name: 'Lily Bush'},
    peter = {name: 'Peter Drucker'};
Code language: JavaScript (javascript)

2

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

Tương tự, bạn có thể sử dụng phương thức

userRoles.set(john, 'admin');
Code language: JavaScript (javascript)

0 để lấy một đối tượng iterator chứa các giá trị cho tất cả các thành phần trong bản đồ

let john = {name: 'John Doe'},
    lily = {name: 'Lily Bush'},
    peter = {name: 'Peter Drucker'};
Code language: JavaScript (javascript)

3

đầu ra

let john = {name: 'John Doe'},
    lily = {name: 'Lily Bush'},
    peter = {name: 'Peter Drucker'};
Code language: JavaScript (javascript)

4

Lặp lại các phần tử bản đồ

Ngoài ra, phương thức

console.log(typeof(userRoles)); // object
console.log(userRoles instanceof Map); // true
Code language: JavaScript (javascript)

4 trả về một đối tượng lặp có chứa một mảng

let userRoles = new Map([
    [john, 'admin'],
    [lily, 'editor'],
    [peter, 'subscriber']
]);
Code language: JavaScript (javascript)

2 của mỗi phần tử trong đối tượng

let userRoles = new Map();
Code language: JavaScript (javascript)

5

let john = {name: 'John Doe'},
    lily = {name: 'Lily Bush'},
    peter = {name: 'Peter Drucker'};
Code language: JavaScript (javascript)

5

Để làm cho phép lặp tự nhiên hơn, bạn có thể sử dụng phá hủy như sau

let john = {name: 'John Doe'},
    lily = {name: 'Lily Bush'},
    peter = {name: 'Peter Drucker'};
Code language: JavaScript (javascript)

6

Ngoài vòng lặp

let userRoles = new Map([
    [john, 'admin'],
    [lily, 'editor'],
    [peter, 'subscriber']
]);
Code language: JavaScript (javascript)

4, bạn có thể sử dụng phương thức

let userRoles = new Map([
    [john, 'admin'],
    [lily, 'editor'],
    [peter, 'subscriber']
]);
Code language: JavaScript (javascript)

5 của đối tượng bản đồ

let john = {name: 'John Doe'},
    lily = {name: 'Lily Bush'},
    peter = {name: 'Peter Drucker'};
Code language: JavaScript (javascript)

7

Chuyển đổi các khóa hoặc giá trị bản đồ thành một mảng

Đôi khi, bạn muốn làm việc với một mảng thay vì một đối tượng có thể lặp lại, trong trường hợp này, bạn có thể sử dụng toán tử trải rộng

Ví dụ sau chuyển đổi các khóa cho từng phần tử thành một mảng các khóa

let john = {name: 'John Doe'},
    lily = {name: 'Lily Bush'},
    peter = {name: 'Peter Drucker'};
Code language: JavaScript (javascript)

8

đầu ra

let john = {name: 'John Doe'},
    lily = {name: 'Lily Bush'},
    peter = {name: 'Peter Drucker'};
Code language: JavaScript (javascript)

9

Và sau đây chuyển đổi các giá trị của các phần tử thành một mảng

let userRoles = new Map();
Code language: JavaScript (javascript)

0

đầu ra

let userRoles = new Map();
Code language: JavaScript (javascript)

1

Xóa một phần tử bằng phím

Để xóa một mục trong bản đồ, bạn sử dụng phương pháp

let userRoles = new Map([
    [john, 'admin'],
    [lily, 'editor'],
    [peter, 'subscriber']
]);
Code language: JavaScript (javascript)

6

let userRoles = new Map();
Code language: JavaScript (javascript)

2

Xóa tất cả các yếu tố trong bản đồ

Để xóa tất cả các mục trong đối tượng

let userRoles = new Map();
Code language: JavaScript (javascript)

5, bạn sử dụng phương thức

console.log(typeof(userRoles)); // object
console.log(userRoles instanceof Map); // true
Code language: JavaScript (javascript)

2

let userRoles = new Map();
Code language: JavaScript (javascript)

3

Do đó, kích thước của bản đồ bây giờ bằng không

let userRoles = new Map();
Code language: JavaScript (javascript)

4

Bản đồ yếu

Một

let userRoles = new Map([
    [john, 'admin'],
    [lily, 'editor'],
    [peter, 'subscriber']
]);
Code language: JavaScript (javascript)

9 tương tự như một

let userRoles = new Map();
Code language: JavaScript (javascript)

5 ngoại trừ các phím của một

let userRoles = new Map([
    [john, 'admin'],
    [lily, 'editor'],
    [peter, 'subscriber']
]);
Code language: JavaScript (javascript)

9 phải là đối tượng. Điều đó có nghĩa là khi tham chiếu đến một khóa (một đối tượng) nằm ngoài phạm vi, giá trị tương ứng sẽ tự động được giải phóng khỏi bộ nhớ

Một

let userRoles = new Map([
    [john, 'admin'],
    [lily, 'editor'],
    [peter, 'subscriber']
]);
Code language: JavaScript (javascript)

9 chỉ có các phương thức tập hợp con của một đối tượng

let userRoles = new Map();
Code language: JavaScript (javascript)

5

• userRoles.get(john); // admin
  Code language: JavaScript (javascript)

  4

• console.log(typeof(userRoles)); // object
  console.log(userRoles instanceof Map); // true
  Code language: JavaScript (javascript)

  9

• userRoles.get(john); // admin
  Code language: JavaScript (javascript)

  6

• console.log(typeof(userRoles)); // object
  console.log(userRoles instanceof Map); // true
  Code language: JavaScript (javascript)

  3

Đây là sự khác biệt chính giữa

let userRoles = new Map();
Code language: JavaScript (javascript)

5 và

userRoles.get(john); // admin
Code language: JavaScript (javascript)

9

• Các phần tử của WeakMap không thể được lặp lại
• Không thể xóa tất cả các yếu tố cùng một lúc
• Không thể kiểm tra kích thước của WeakMap

Trong hướng dẫn này, bạn đã học cách làm việc với đối tượng Bản đồ JavaScript và các phương thức hữu ích của nó để thao tác các mục trong bản đồ

Khi nào bạn nên sử dụng bản đồ?

Lợi thế của Bản đồ trong JavaScript là gì?

Tại sao sử dụng Bản đồ thay vì mảng?