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ạ khóa thành một giá trị.: in this tutorial, you will learn about the JavaScript Map object that maps a key to a value.
Giới thiệu về đối tượng bản đồ JavaScript
Trước ES6, chúng ta thường sử dụng một đối tượng để mô phỏng bản đồ bằng cách ánh xạ một khóa đến giá trị của 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 như nguyên mẫu.
- Khóa của một đối tượng phải là một chuỗi hoặc biểu tượng, 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 gọi là
5 giải quyết các thiếu sót này.Code language: JavaScript [javascript]
let userRoles = new Map[];
Theo định nghĩa, một đối tượng
5 giữ các cặp giá trị khóa. Các phím là duy nhất trong bộ sưu tập bản đồ. Nói cách khác, một khóa trong một đối tượng bản đồ chỉ xuất hiện một lần.Code 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 lại một đối tượng
5, mỗi lần lặp lại trả về một mảng 2 thành viên làCode language: JavaScript [javascript]
let userRoles = new Map[];
8. Thứ tự lặp theo thứ tự chèn tương ứng với thứ tự trong đó mỗi cặp giá trị khóa lần đầu tiên được chèn vào bản đồ bằng phương thứcCode language: JavaScript [javascript]
let userRoles = new Map[];
9.Code language: JavaScript [javascript]
let userRoles = new Map[];
Để tạo
5 mới, bạn sử dụng cú pháp sau:Code 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ác cặp giá trị khóa.Code language: JavaScript [javascript]
console.log[typeof[userRoles]]; // object console.log[userRoles instanceof Map]; // true
Phương pháp bản đồ JavaScript hữu ích
2 - Loại bỏ 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
- & nbsp; ________ 33 - Loại bỏ một phần tử được chỉ định bởi khóa. Nó trả về nếu phần tử nằm trong bản đồ, hoặc sai nếu nó không.
- & nbsp; ________ 34 - Trả về một đối tượng lặp mới có chứa một mảng
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[];
- & nbsp; ________ 36-gọi một cuộc gọi lại cho mỗi cặp giá trị khóa trong bản đồ theo thứ tự chèn. Tham số này tùy chọn đặt giá trị
7 cho mỗi cuộc gọi lại.
Code language: JavaScript [javascript]console.log[typeof[userRoles]]; // object console.log[userRoles instanceof Map]; // true
- & nbsp; get [khóa] - 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.
- & nbsp; có [khóa] - trả về true nếu một giá trị liên quan đến khóa tồn tại hoặc sai.
- & nbsp; ________ 38 - Trả về một trình lặp mới có chứa các phím cho các phần tử theo thứ tự chèn.
- & nbsp; ________ 39 - Đặ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ể chuỗi phương pháp này với các phương thức khác.
- & nbsp; ________ 40 Trả về một đối tượng lặp mới có chứa các giá trị cho từng phần tử theo thứ tự chèn.
Ví dụ bản đồ JavaScript
Hãy cùng lấy một số ví dụ về việc sử dụng một đố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
1 như sau:Code language: JavaScript [javascript]
userRoles.set[john, 'admin'];
Code language: JavaScript [javascript]
let john = {name: 'John Doe'}, lily = {name: 'Lily Bush'}, peter = {name: 'Peter Drucker'};
Giả sử rằng bạn phải tạo một bản đồ người dùng và vai trò. Trong trường hợp này, bạn sử dụng mã sau:
Code language: JavaScript [javascript]
let userRoles = new Map[];
2 là một thể hiện của đối tượngCode language: JavaScript [javascript]
userRoles.set[john, 'admin'];
5 và loại của nó là một đối tượng như được minh họa trong ví dụ sau:Code language: JavaScript [javascript]
let userRoles = new Map[];
console.log[typeof[userRoles]]; // object console.log[userRoles instanceof Map]; // true
Code language: JavaScript [javascript]
Thêm các 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
9:Code language: JavaScript [javascript]
let userRoles = new Map[];
Code language: JavaScript [javascript]
userRoles.set[john, 'admin'];
Phương pháp
9 ánh xạ người dùngCode language: JavaScript [javascript]
let userRoles = new Map[];
6 với vai tròCode language: JavaScript [javascript]
userRoles.set[john, 'admin'];
7. Vì phương thứcCode language: JavaScript [javascript]
userRoles.set[john, 'admin'];
9 có thể chuỗi, bạn có thể lưu một số gõ như trong ví dụ này:Code language: JavaScript [javascript]
let userRoles = new Map[];
Code language: JavaScript [javascript]
userRoles.set[lily, 'editor'] .set[peter, 'subscriber'];
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ể chuyển một đối tượng có thể lặp lại cho hàm tạo
1:Code language: JavaScript [javascript]
console.log[typeof[userRoles]]; // object console.log[userRoles instanceof Map]; // true
Code language: JavaScript [javascript]
let userRoles = new Map[[ [john, 'admin'], [lily, 'editor'], [peter, 'subscriber'] ]];
Nhận một phần tử từ bản đồ theo khóa
Nếu bạn muốn xem vai trò của
0, bạn sẽ sử dụng phương phápCode language: JavaScript [javascript]
userRoles.set[lily, 'editor'] .set[peter, 'subscriber'];
1:Code language: JavaScript [javascript]
userRoles.set[lily, 'editor'] .set[peter, 'subscriber'];
Code language: JavaScript [javascript]
userRoles.get[john]; // admin
Nếu bạn vượt qua một khóa không tồn tại, phương thức
1 sẽ trả vềCode language: JavaScript [javascript]
userRoles.set[lily, 'editor'] .set[peter, 'subscriber'];
3.Code language: JavaScript [javascript]
userRoles.set[lily, 'editor'] .set[peter, 'subscriber'];
Code language: JavaScript [javascript]
let foo = {name: 'Foo'}; userRoles.get[foo]; //undefined
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 đồ không, bạn sử dụng phương thức
4.Code language: JavaScript [javascript]
userRoles.set[lily, 'editor'] .set[peter, 'subscriber'];
Code language: JavaScript [javascript]
userRoles.has[foo]; // false userRoles.has[lily]; // true
Nhận số lượng các phần tử trong bản đồ
Thuộc tính
5 trả về số lượng mục của đối tượng bản đồ.Code language: JavaScript [javascript]
userRoles.set[lily, 'editor'] .set[peter, 'subscriber'];
0Code language: JavaScript [javascript]
let john = {name: 'John Doe'}, lily = {name: 'Lily Bush'}, peter = {name: 'Peter Drucker'};
Lặp lại các phím bản đồ
Để có được các khóa của đố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 lặp mới có chứa các khóa của các phần tử trong bản đồ.
console.log[typeof[userRoles]]; // object console.log[userRoles instanceof Map]; // true
Code language: JavaScript [javascript]
Ví dụ sau đây hiển thị tên người dùng của người dùng trong đối tượng bản đồ
2.Code language: JavaScript [javascript]
userRoles.set[john, 'admin'];
1Code language: JavaScript [javascript]
let john = {name: 'John Doe'}, lily = {name: 'Lily Bush'}, peter = {name: 'Peter Drucker'};
Output:
2Code language: JavaScript [javascript]
let john = {name: 'John Doe'}, lily = {name: 'Lily Bush'}, peter = {name: 'Peter Drucker'};
Lặp lại các giá trị bản đồ
Tương tự, bạn có thể sử dụng phương thức
0 để lấy một đối tượng Iterator chứa các giá trị cho tất cả các phần tử trong bản đồ:Code language: JavaScript [javascript]
userRoles.set[john, 'admin'];
3Code language: JavaScript [javascript]
let john = {name: 'John Doe'}, lily = {name: 'Lily Bush'}, peter = {name: 'Peter Drucker'};
Output:
4Code language: JavaScript [javascript]
let john = {name: 'John Doe'}, lily = {name: 'Lily Bush'}, peter = {name: 'Peter Drucker'};
Lặp lại các yếu tố bản đồ
Ngoài ra, phương thức
4 trả về một đối tượng lặp có chứa một mảngCode language: JavaScript [javascript]
console.log[typeof[userRoles]]; // object console.log[userRoles instanceof Map]; // true
2 của mỗi phần tử trong đối tượngCode language: JavaScript [javascript]
let userRoles = new Map[[ [john, 'admin'], [lily, 'editor'], [peter, 'subscriber'] ]];
5:Code language: JavaScript [javascript]
let userRoles = new Map[];
5Code language: JavaScript [javascript]
let john = {name: 'John Doe'}, lily = {name: 'Lily Bush'}, peter = {name: 'Peter Drucker'};
Để làm cho việc lặp lại tự nhiên hơn, bạn có thể sử dụng phá hủy như sau:
6Code language: JavaScript [javascript]
let john = {name: 'John Doe'}, lily = {name: 'Lily Bush'}, peter = {name: 'Peter Drucker'};
Ngoài vòng lặp
4, bạn có thể sử dụng phương thứcCode language: JavaScript [javascript]
let userRoles = new Map[[ [john, 'admin'], [lily, 'editor'], [peter, 'subscriber'] ]];
5 của đối tượng bản đồ:Code language: JavaScript [javascript]
let userRoles = new Map[[ [john, 'admin'], [lily, 'editor'], [peter, 'subscriber'] ]];
7Code language: JavaScript [javascript]
let john = {name: 'John Doe'}, lily = {name: 'Lily Bush'}, peter = {name: 'Peter Drucker'};
Chuyển đổi các phím 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ử lây lan.
Ví dụ sau đây chuyển đổi các phím cho từng phần tử thành một mảng các phím:
8Code language: JavaScript [javascript]
let john = {name: 'John Doe'}, lily = {name: 'Lily Bush'}, peter = {name: 'Peter Drucker'};
Output:
9Code language: JavaScript [javascript]
let john = {name: 'John Doe'}, lily = {name: 'Lily Bush'}, peter = {name: 'Peter Drucker'};
Và sau đây chuyển đổi các giá trị của các phần tử thành một mảng:
0
let userRoles = new Map[];
Code language: JavaScript [javascript]
Đầu ra
1Code language: JavaScript [javascript]
let userRoles = new Map[];
Xóa một phần tử bằng khóa
Để xóa một mục trong bản đồ, bạn sử dụng phương thức
6.Code language: JavaScript [javascript]
let userRoles = new Map[[ [john, 'admin'], [lily, 'editor'], [peter, 'subscriber'] ]];
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[];
2:Code 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ờ là bằng không.
4Code language: JavaScript [javascript]
let userRoles = new Map[];
Yếu
A
9 tương tự nhưCode language: JavaScript [javascript]
let userRoles = new Map[[ [john, 'admin'], [lily, 'editor'], [peter, 'subscriber'] ]];
5 ngoại trừ các khóa củaCode language: JavaScript [javascript]
let userRoles = new Map[];
9 phải là đối tượng. Điều đó có nghĩa là khi một 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[[ [john, 'admin'], [lily, 'editor'], [peter, 'subscriber'] ]];
A
9 chỉ có các phương thức tập hợp con của đối tượngCode language: JavaScript [javascript]
let userRoles = new Map[[ [john, 'admin'], [lily, 'editor'], [peter, 'subscriber'] ]];
5:Code language: JavaScript [javascript]
let userRoles = new Map[];
-
4
Code language: JavaScript [javascript]userRoles.get[john]; // admin
- & nbsp; ________ 39
-
6
Code language: JavaScript [javascript]userRoles.get[john]; // admin
-
3
Code language: JavaScript [javascript]console.log[typeof[userRoles]]; // object console.log[userRoles instanceof Map]; // true
Dưới đây là sự khác biệt chính giữa
5 vàCode language: JavaScript [javascript]
let userRoles = new Map[];
9:Code language: JavaScript [javascript]
userRoles.get[john]; // admin
- Các yếu tố của một điểm yếu 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 một yếu.
Trong hướng dẫn này, bạn đã học được cách làm việc với đối tượng bản đồ JavaScript và các phương pháp hữu ích của nó để thao tác các mục trong bản đồ.
Hướng dẫn này có hữu ích không?