1. JAVASCRIPT
  2. JS Objects
  3. Object Maps

đối tượng map javascript

Map chứa các cặp khóa-giá trị trong đó các khóa có thể là bất kỳ kiểu dữ liệu nào.
Map ghi nhớ thứ tự chèn ban đầu của các khóa.
Map có một thuộc tính đại diện cho kích thước của bản đồ.

Phương thức bản đồ

Phương thức Description
new Map() Tạo một đối tượng Bản đồ mới
set() Đặt giá trị cho một khóa trong Bản đồ
get() Nhận giá trị cho một khóa trong Bản đồ
clear() Xóa tất cả các phần tử khỏi Bản đồ
delete() Loại bỏ một phần tử Bản đồ được chỉ định bởi một khóa
has() Trả về true nếu một khóa tồn tại trong Bản đồ
forEach() Gọi một hàm gọi lại cho từng cặp khóa/giá trị trong Bản đồ
entries() Trả về một đối tượng trình lặp với các cặp [khóa, giá trị] trong một Bản đồ
keys() Trả về một đối tượng trình lặp với các khóa trong Bản đồ
values() Trả về một đối tượng trình lặp của các giá trị trong Bản đồ
Thuộc tính Description
size Trả về số phần tử Bản đồ

Cách tạo bản đồ

Chúng ta có thể tạo một Bản đồ JavaScript bằng cách:

  • Truyền một mảng tới new Map()
  • Tạo bản đồ và sử dụng Map.set()

Phương thức new Map()

Chúng ta có thể tạo một Bản đồ bằng cách truyền một Mảng cho phương thức khởi tạo new Map().

Ví dụ

const cars = new Map([
    ["Innova", 600],
    ["Kia", 500],
    ["Camry", 1000]
]);
var x = cars.get("Innova");

Xem kết quả

Phương thức Map.set()

Chúng ta có thể thêm các phần tử vào Bản đồ bằng phương thức set().

Ví dụ

// thêm các phần tử
cars.set("Innova", 600);
cars.set("Kia", 500);
cars.set("Camry", 1000);

Xem kết quả

Phương thức set() cũng có thể được sử dụng để thay đổi giá trị của phần tử Bản đồ hiện có.

Ví dụ

cars.set("Innova",800);

Xem kết quả

Phương thức Map.get()

Phương thức get() được sử dụng để nhận giá trị của một khóa của phần tử trong bản đồ.

Ví dụ

cars.get("Innova");

Xem kết quả

Thuộc tính Map.size

Thuộc tính size trả về số phần tử trong một bản đồ.

Ví dụ

cars.size;

Xem kết quả

Phương thức Map.delete()

Phương thức delete() loại bỏ một phần tử của bản đồ.

Ví dụ

cars.delete("Kia");

Xem kết quả

Phương thức Map.clear()

Phương thức clear() loại bỏ tất cả các phần tử của một bản đồ.

Ví dụ

cars.clear();

Xem kết quả

Phương thức Map.has()

Phương thức has() trả về true nếu một khóa có tồn tại trong một bản đồ.

Ví dụ

cars.has("Innova");

Xem kết quả

Ví dụ

cars.delete("Innova");
cars.has("Innova");

Xem kết quả

Đối tượng JavaScript so với Map

Sự khác biệt giữa Đối tượng JavaScript và Bản đồ.

  Đối tượng Bản đồ
Iterable Không thể lặp lại trực tiếp Có thể lặp lại trực tiếp
Size Không có thuộc tính kích thước Có thuộc tính kích thước
Key Types Các khóa phải là Chuỗi (hoặc Ký hiệu) Các khóa có thể là bất kỳ kiểu dữ liệu nào
Key Order Khóa không có thứ tự Các khóa được sắp xếp theo thứ tự chèn
Defaults Có khóa mặc định Không có khóa mặc định

Phương thức Map.forEach()

Phương thức forEach() gọi một hàm callback cho mỗi cặp khóa/giá trị trong một bản đồ.

Ví dụ

var x = "";
cars.forEach(function(value,key){
    x += key + " = " + value + "<br/>";
})

Xem kết quả

Phương thức Map.keys()

Phương thức keys() trả về một đối tượng iterator với các khóa trong một bản đồ.

Ví dụ

var y = cars.keys();
var x = "";
for (var i of y) {
    x += i + "<br/>";    
}

Xem kết quả

Phương thức Map.values()

Phương thức values() trả về một đối tượng iterator với các giá trị trong một bản đồ.

Ví dụ

var y = cars.values();
var x = "";
for (var i of y) {
    x += i + "<br/>";    
}

Xem kết quả

Phương thức Map.entries()

Phương thức entries() trả về một đối tượng iterator với [key, giá trị] trong một bản đồ.

Ví dụ

var y = cars.entries();
var x = "";
for (var i of y) {
    x += i + "<br/>";    
}

Xem kết quả

Khóa của Map là một đối tượng

Có thể sử dụng các đối tượng làm khóa là một tính năng quan trọng của Bản đồ.

Ví dụ

const Innova = {name: "Innova"};
const Kia = {name: "Kia"};
const Camry = {name: "Camry"};

// tạo đối tượng Map
const cars = new Map();

// thêm các đối tượng vào Map
cars.set(Innova,600);
cars.set(Kia,700);
cars.set(Camry,1000);
document.getElementById('demo').innerHTML = cars.get(Innova);

Xem kết quả

Lưu ý: Khóa là một đối tượng (Innova), không phải là một chuỗi ("Innova").

Ví dụ

cars.get("Innova");

Xem kết quả

Hỗ trợ trình duyệt

JavaScript Maps được hỗ trợ trong tất cả các trình duyệt, ngoại trừ Internet Explorer.

         
Chrome Edge Firefox Safari Opera

  1. JAVASCRIPT
  2. JS Objects
  3. Object Maps


BÀI VIẾT LIÊN QUAN

BÀI VIẾT CHỦ ĐỀ KHÁC