Method Map JavaScript

new Map() 方法

可以通过将数组传递给 new Map() 构造函数来创建 Map：

实例

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

亲自试一试

Map.get()

dapat digunakan get() 方法获取 Map 中键的值：

实例

fruits.get("apples");

亲自试一试

Map.set()

dapat digunakan set() 方法向 Map 添加元素：

实例

// membuat Map
const fruits = new Map();
// 设置 Map 值
fruits.set("apples", 500);
fruits.set("bananas", 300);
fruits.set("oranges", 200);

亲自试一试

set() 方法也可以用于更改现有的 Map 值：

实例

fruits.set("apples", 500);

亲自试一试

Map.size

size 属性返回 Map 中元素的数量：

实例

fruits.size;

亲自试一试

Map.delete()

delete() 方法移除 Map 中的一个元素：

实例

fruits.delete("apples");

亲自试一试

Map.clear()

clear() 方法移除 Map 中的所有元素：

实例

fruits.clear();

亲自试一试

Map.has()

如果 Map 中存在某个键，has() 方法返回 true：

实例

fruits.has("apples");

亲自试一试

尝试以下代码：

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

亲自试一试

Map.forEach()

forEach() 方法为 Map 中的每个键值对调用回调函数：

实例

// 列出所有条目
let text = "";
fruits.forEach(function(value, key) {
  text += key + ' = ' + value;
});

亲自试一试

Map.entries()

entries() 方法返回一个包含 Map 中 [key, value] 对的迭代器对象：

实例

// 列出所有条目
let text = "";
for (const x of fruits.entries()) {
  text += x;
}

亲自试一试

Map.keys()

keys() 方法返回一个包含 Map 中键的迭代器对象：

实例

// 列出所有键
let text = "";
for (const x of fruits.keys()) {
  text += x;
}

亲自试一试

Map.values()

values() metoden mengembalikan sebuah objek iterator yang mengandung nilai dalam Map:

实例

// menampilkan semua nilai
let text = "";
for (const x of fruits.values()) {
  text += x;
}

亲自试一试

dapat digunakan values() metoden menjumlahkan nilai dalam Map:

实例

// menjumlahkan semua nilai
let total = 0;
for (const x of fruits.values()) {
  total += x;
}

亲自试一试

objek sebagai kunci

tunjuk:kemampuan untuk menggunakan objek sebagai kunci adalah sifat penting dari Map.

实例

// membuat objek
const apples = {name: 'Apples'};
const bananas = {name: 'Bananas'};
const oranges = {name: 'Oranges'};
// membuat Map
const fruits = new Map();
// menambahkan elemen baru ke Map
fruits.set(apples, 500);
fruits.set(bananas, 300);
fruits.set(oranges, 200);

亲自试一试

perhatian:kunci adalah objek (apples), bukan string ("apples"):

实例

fruits.get("apples"); // kembalikan undefined

亲自试一试

JavaScript Map.groupBy()

ES2024 menambahkan ke JavaScript Map.groupBy() metoden.

Map.groupBy() metoden mengelompokkan elemen objek berdasarkan nilai string yang dipilih kembali oleh fungsi balik.

Map.groupBy() metoden ini tidak akan mengubah objek asli.

实例

// membuat sebuah array
const fruits = [
  {name: "apples", quantity: 300},
  {name: "bananas", quantity: 500},
  {name: "oranges", quantity: 200},
  {name: "kiwi", quantity: 150}
];
// fungsi balik untuk pengelompokkan
function myCallback({ quantity }) {
  return quantity > 200 ? "ok" : "low";
}
// mengelompokkan berdasarkan jumlah
const result = Map.groupBy(fruits, myCallback);

亲自试一试

浏览器支持

Map.groupBy() 是 ES2024 的特性。

自 2024 年 3 月起，新浏览器均支持该特性：

Object.groupBy() 与 Map.groupBy() 的区别

Object.groupBy() 和 Map.groupBy() 的区别在于：

Object.groupBy() 将元素分组到 JavaScript 对象中。

Map.groupBy() 将元素分组到 Map 对象中。

完整的 Map 参考手册

如需完整参考，请访问我们的：JavaScript Map 参考手册。

该手册包含所有 Map 属性和方法的描述和实例。