Phương thức Map trong JavaScript

phương thức new Map()

Có thể truyền một mảng cho new Map() ký hiệu tạo Map:

thực thể

// Tạo Map
const fruits = new Map([
  ["apples", 500],
  ["bananas", 300],
  ["oranges", 200]
]);

Thử ngay

Map.get()

Bạn có thể sử dụng get() Phương thức lấy giá trị của khóa trong Map:

thực thể

fruits.get("apples");

Thử ngay

Map.set()

Bạn có thể sử dụng set() Phương thức thêm phần tử vào Map:

thực thể

// Tạo Map
const fruits = new Map();
// Đặt giá trị Map
fruits.set("apples", 500);
fruits.set("bananas", 300);
fruits.set("oranges", 200);

Thử ngay

set() Phương thức cũng có thể được sử dụng để thay đổi giá trị hiện tại của Map:

thực thể

fruits.set("apples", 500);

Thử ngay

Map.size

size Thuộc tính trả về số lượng phần tử trong Map:

thực thể

fruits.size;

Thử ngay

Map.delete()

delete() Phương thức gỡ bỏ một phần tử trong Map:

thực thể

fruits.delete("apples");

Thử ngay

Map.clear()

clear() Phương thức gỡ bỏ tất cả các phần tử trong Map:

thực thể

fruits.clear();

Thử ngay

Map.has()

Nếu có một khóa nào đó trong Map:has() Phương thức trả về true:

thực thể

fruits.has("apples");

Thử ngay

Thử mã sau:

fruits.delete("apples");
fruits.has("apples");

Thử ngay

Map.forEach()

forEach() Phương thức gọi hàm hồi quy cho mỗi cặp khóa-giá trị trong Map:

thực thể

// Liệt kê tất cả các mục
let text = "";
fruits.forEach(function(value, key) {
  text += key + ' = ' + value;
});

Thử ngay

Map.entries()

entries() Phương thức trả về một đối tượng chứa các phần tử [key, value] Đối tượng iterator đúng:

thực thể

// Liệt kê tất cả các mục
let text = "";
for (const x of fruits.entries()) {
  text += x;
}

Thử ngay

Map.keys()

keys() Phương thức trả về một đối tượng iterator chứa các khóa của Map:

thực thể

// Liệt kê tất cả các khóa
let text = "";
for (const x of fruits.keys()) {
  text += x;
}

Thử ngay

Map.values()}

values() phương thức trả về một đối tượng iterator chứa các giá trị trong Map:

thực thể

// Liệt kê tất cả giá trị
let text = "";
for (const x of fruits.values()) {
  text += x;
}

Thử ngay

Bạn có thể sử dụng values() phương thức tính tổng các giá trị trong Map:

thực thể

// Tính tổng tất cả giá trị
let total = 0;
for (const x of fruits.values()) {
  total += x;
}

Thử ngay

Đối tượng làm chìa khóa

Hướng dẫn:Sử dụng đối tượng làm chìa khóa là một tính năng quan trọng của Map.

thực thể

// Tạo đối tượng
const apples = {name: 'Apples'};
const bananas = {name: 'Bananas'};
const oranges = {name: 'Oranges'};
// Tạo Map
const fruits = new Map();
// Thêm phần tử mới vào Map
fruits.set(apples, 500);
fruits.set(bananas, 300);
fruits.set(oranges, 200);

Thử ngay

Lưu ý:Chìa khóa là đối tượng (apples),而不是 chuỗi ("apples"):

thực thể

fruits.get("apples"); // Trả về undefined

Thử ngay

JavaScript Map.groupBy()

ES2024 đã thêm vào JavaScript Map.groupBy() phương thức.

Map.groupBy() phương thức nhóm các phần tử của đối tượng dựa trên giá trị chuỗi trả về bởi hàm đệm.

Map.groupBy() phương thức sẽ không thay đổi đối tượng gốc.

thực thể

// Tạo một mảng
const fruits = [
  {name: "apples", quantity: 300},
  {name: "bananas", quantity: 500},
  {name: "oranges", quantity: 200},
  {name: "kiwi", quantity: 150}
];
// Là hàm đệm để nhóm
function myCallback({ quantity }) {
  return quantity > 200 ? "ok" : "low";
}
// ĐgroupBy theo số lượng
const result = Map.groupBy(fruits, myCallback);

Thử ngay

Hỗ trợ trình duyệt

Map.groupBy() Là tính năng của ES2024.

Từ tháng 3 năm 2024, tất cả các trình duyệt mới đều hỗ trợ tính năng này:

Chrome Edge Firefox Safari Opera
Chrome 117 Edge 117 Firefox 119 Safari 17.4 Opera 103
Tháng 9 năm 2023 Tháng 9 năm 2023 Tháng 10 năm 2023 Tháng 10 năm 2024 Tháng 5 năm 2023

Cảnh báo:

Tính năng ES2024 tương đối mới.

Trình duyệt phiên bản cũ có thể cần mã thay thế (Polyfill).

Sự khác biệt giữa Object.groupBy() và Map.groupBy()

Object.groupBy()Map.groupBy() Sự khác biệt giữa:

Object.groupBy() Nhóm các phần tử vào đối tượng JavaScript.

Map.groupBy() Nhóm các phần tử vào đối tượng Map.

Tài liệu tham khảo đầy đủ Map

Để có tài liệu tham khảo đầy đủ, vui lòng truy cập:Tài liệu tham khảo JavaScript Map.

Tài liệu này bao gồm mô tả và ví dụ về tất cả các thuộc tính và phương thức của Map.