Tóm lược. 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ụ
- Một đối tượng luôn có một khóa mặc định giống như nguyên mẫu
- 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
- 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à
5 để giải quyết những thiếu sót nàyCode language: JavaScript [javascript]
let userRoles = new Map[];
Theo định nghĩa, một đối tượng
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ầnCode language: JavaScript [javascript]
let userRoles = new Map[];
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
5, mỗi lần lặp trả về một mảng 2 phần tử củaCode language: JavaScript [javascript]
let userRoles = new Map[];
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ápCode language: JavaScript [javascript]
let userRoles = new Map[];
9Code language: JavaScript [javascript]
let userRoles = new Map[];
Để tạo một
5 mới, bạn sử dụng cú pháp sauCode language: JavaScript [javascript]
let userRoles = new Map[];
Code language: JavaScript [javascript]
let map = new Map[[iterable]];
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ặp khóa-giá trịCode language: JavaScript [javascript]
console.log[typeof[userRoles]]; // object console.log[userRoles instanceof Map]; // true
Các phương thức Bản đồ JavaScript hữu ích
2 – xóa tất cả các phần tử khỏi đối tượng bản đồ
Code language: JavaScript [javascript]console.log[typeof[userRoles]]; // object console.log[userRoles instanceof Map]; // true
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
Code language: JavaScript [javascript]console.log[typeof[userRoles]]; // object console.log[userRoles instanceof Map]; // true
4 – trả về một đối tượng Iterator mới chứa một mảng
Code language: JavaScript [javascript]console.log[typeof[userRoles]]; // object console.log[userRoles instanceof Map]; // true
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
Code language: JavaScript [javascript]let userRoles = new Map[];
6 – gọ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ị
Code language: JavaScript [javascript]console.log[typeof[userRoles]]; // object console.log[userRoles instanceof Map]; // true
7 cho mỗi lần gọi lại
Code language: JavaScript [javascript]console.log[typeof[userRoles]]; // object console.log[userRoles instanceof Map]; // true
- 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
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
Code language: JavaScript [javascript]console.log[typeof[userRoles]]; // object console.log[userRoles instanceof Map]; // true
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
Code language: JavaScript [javascript]console.log[typeof[userRoles]]; // object console.log[userRoles instanceof Map]; // true
60 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
Code language: JavaScript [javascript]let userRoles = new Map[];
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 các đối tượng
61 như sauCode language: JavaScript [javascript]
let userRoles = new Map[];
8Code language: JavaScript [javascript]
let userRoles = new Map[];
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
Code language: JavaScript [javascript]
let userRoles = new Map[];
62 là một thể hiện của đối tượngCode language: JavaScript [javascript]
let userRoles = new Map[];
5 và kiểu của nó là một đối tượng như minh họa trong ví dụ sauCode language: JavaScript [javascript]
let userRoles = new Map[];
Code language: JavaScript [javascript]
console.log[typeof[userRoles]]; // object console.log[userRoles instanceof Map]; // true
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
9Code language: JavaScript [javascript]
let userRoles = new Map[];
6Code language: JavaScript [javascript]
let userRoles = new Map[];
Phương thức
9 ánh xạ người dùngCode language: JavaScript [javascript]
let userRoles = new Map[];
66 với vai tròCode language: JavaScript [javascript]
let userRoles = new Map[];
67. Vì phương thứcCode language: JavaScript [javascript]
let userRoles = new Map[];
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àyCode language: JavaScript [javascript]
let userRoles = new Map[];
9Code language: JavaScript [javascript]
let userRoles = new Map[];
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
1Code language: JavaScript [javascript]
console.log[typeof[userRoles]]; // object console.log[userRoles instanceof Map]; // true
1Code language: JavaScript [javascript]
let userRoles = new Map[];
Nhận một phần tử từ bản đồ bằng phím
Nếu muốn xem vai trò của
90 thì bạn dùng phương thứcCode language: JavaScript [javascript]
let userRoles = new Map[];
91Code language: JavaScript [javascript]
let userRoles = new Map[];
4Code language: JavaScript [javascript]
let userRoles = new Map[];
Nếu bạn chuyển một khóa không tồn tại, phương thức
91 sẽ trả vềCode language: JavaScript [javascript]
let userRoles = new Map[];
93Code language: JavaScript [javascript]
let userRoles = new Map[];
7Code language: JavaScript [javascript]
let userRoles = new Map[];
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
94Code language: JavaScript [javascript]
let userRoles = new Map[];
9Code language: JavaScript [javascript]
let userRoles = new Map[];
Lấy số phần tử trong bản đồ
Thuộc tính
95 trả về số lượng mục nhập của đối tượng Bản đồCode language: JavaScript [javascript]
let userRoles = new Map[];
80Code language: JavaScript [javascript]
let userRoles = new Map[];
Lặp lại các phím bản đồ
Để lấy key của một đối tượng
5, bạn sử dụng phương thứcCode language: JavaScript [javascript]
let userRoles = new Map[];
8.Code language: JavaScript [javascript]
console.log[typeof[userRoles]]; // object console.log[userRoles instanceof Map]; // true
8 trả về một đối tượng iterator mới chứa các khóa của các phần tử trong bản đồCode language: JavaScript [javascript]
console.log[typeof[userRoles]]; // object console.log[userRoles instanceof Map]; // true
Ví dụ sau hiển thị tên người dùng của người dùng trong đối tượng bản đồ
62Code language: JavaScript [javascript]
let userRoles = new Map[];
81Code language: JavaScript [javascript]
let userRoles = new Map[];
đầu ra
82Code language: JavaScript [javascript]
let userRoles = new Map[];
Lặp lại các giá trị bản đồ
Tương tự, bạn có thể sử dụng phương thức
60 để 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 đồCode language: JavaScript [javascript]
let userRoles = new Map[];
83Code language: JavaScript [javascript]
let userRoles = new Map[];
đầu ra
84Code language: JavaScript [javascript]
let userRoles = new Map[];
Lặp lại các phần tử bản đồ
Ngoài ra, phương thức
4 trả về một đối tượng iterator chứa một mảngCode language: JavaScript [javascript]
console.log[typeof[userRoles]]; // object console.log[userRoles instanceof Map]; // true
12 của mỗi phần tử trong đối tượngCode language: JavaScript [javascript]
let userRoles = new Map[];
5Code language: JavaScript [javascript]
let userRoles = new Map[];
85Code language: JavaScript [javascript]
let userRoles = new Map[];
Để làm cho phép lặp tự nhiên hơn, bạn có thể sử dụng phá hủy như sau
86Code language: JavaScript [javascript]
let userRoles = new Map[];
Ngoài vòng lặp
14, bạn có thể sử dụng phương thứcCode language: JavaScript [javascript]
let userRoles = new Map[];
15 của đối tượng bản đồCode language: JavaScript [javascript]
let userRoles = new Map[];
87Code language: JavaScript [javascript]
let userRoles = new Map[];
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
88Code language: JavaScript [javascript]
let userRoles = new Map[];
đầu ra
89Code language: JavaScript [javascript]
let userRoles = new Map[];
Và sau đây chuyển đổi các giá trị của các phần tử thành một mảng
0Code language: JavaScript [javascript]
let userRoles = new Map[];
đầu ra
1Code language: JavaScript [javascript]
let userRoles = new Map[];
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
16Code language: JavaScript [javascript]
let userRoles = new Map[];
2Code language: JavaScript [javascript]
let userRoles = new Map[];
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
5, bạn sử dụng phương thứcCode language: JavaScript [javascript]
let userRoles = new Map[];
2Code language: JavaScript [javascript]
console.log[typeof[userRoles]]; // object console.log[userRoles instanceof Map]; // true
3Code language: JavaScript [javascript]
let userRoles = new Map[];
Do đó, kích thước của bản đồ bây giờ bằng không
4Code language: JavaScript [javascript]
let userRoles = new Map[];
Bản đồ yếu
Một
19 tương tự như mộtCode language: JavaScript [javascript]
let userRoles = new Map[];
5 ngoại trừ các khóa của mộtCode language: JavaScript [javascript]
let userRoles = new Map[];
19 phải là các đố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ớCode language: JavaScript [javascript]
let userRoles = new Map[];
Một
19 chỉ có các phương thức tập hợp con của một đối tượngCode language: JavaScript [javascript]
let userRoles = new Map[];
5Code language: JavaScript [javascript]
let userRoles = new Map[];
44
Code language: JavaScript [javascript]let userRoles = new Map[];
9
Code language: JavaScript [javascript]console.log[typeof[userRoles]]; // object console.log[userRoles instanceof Map]; // true
46
Code language: JavaScript [javascript]let userRoles = new Map[];
3
Code language: JavaScript [javascript]console.log[typeof[userRoles]]; // object console.log[userRoles instanceof Map]; // true
Đây là sự khác biệt chính giữa
5 vàCode language: JavaScript [javascript]
let userRoles = new Map[];
49Code language: JavaScript [javascript]
let userRoles = new Map[];
- 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 đồ