JavaScript Map

Map 保存键值对，其中键可以是任何数据类型。

Map 会记住键的原始插入顺序。

Map 提供表示映射大小的属性。

Map 方法

方法 描述
new Map() 创建新的 Map 对象。
set() 为 Map 中的键设置值。
get() 获取 Map 对象中键的值。
clear() 从 Map 中移除所有元素。
delete() 删除由某个键指定的 Map 元素。
has() 如果键存在于 Map 中，则返回 true。
forEach() 为 Map 中的每个键/值对调用回调函数。
entries() 返回迭代器对象，其中包含 Map 中的 [key, value] 键值对。
keys() 返回迭代器对象，其中包含 Map 中的键。
values() 返回迭代器对象，其中包含 Map 中的值。
属性 描述
size 返回 Map 元素的数量。

如何创建 Map

您可以通过以下方式创建 JavaScript 映射：

  • 将数组传递给 new Map()
  • 创建映射并使用 Map.set()

new Map()

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

实例

// 创建一个 Map
const fruits = new Map([
  ["apples", 500],
  ["bananas", 300],
  ["oranges", 200]
]);

亲自试一试

Map.set()

例子 1

您也可以使用 set() 方法将元素添加到 Map 中：

// 创建一个 Map
const fruits = new Map();

// 设置 Map 的值
fruits.set("apples", 500);
fruits.set("bananas", 300);
fruits.set("oranges", 200);

亲自试一试

例子 2

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

fruits.set("apples", 500);

亲自试一试

Map.get()

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

实例

fruits.get("apples");    // 返回 500

亲自试一试

Map.size

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

实例

fruits.size;

亲自试一试

Map.delete()

delete() 方法删除 Map 元素：

实例

fruits.delete("apples");

亲自试一试

Map.clear()

clear() 方法从 Map 中删除所有元素：

实例

fruits.clear();

亲自试一试

Map.has()

例子 1

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

fruits.has("apples");

亲自试一试

例子 2

请试试这个：

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

亲自试一试

Map 是对象

例子 1

typeof 返回 object：

// 返回 object:

typeof fruits;

亲自试一试

例子 2

instanceof Map 返回 true：

// 返回 true：
fruits instanceof Map;

亲自试一试

JavaScript Object 对比 Map

JavaScript 对象与映射之间的差异：

Object（对象） Map（映射）
不可直接迭代 可直接迭代
无 size 属性 有 size 属性
键必须是字符串（或符号） 键可以是任何数据类型
键不排序 键按插入排序
有默认键 没有默认键

Map.forEach()

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

实例

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

亲自试一试

Map.entries()

entries() 方法返回一个带有 Map 中 [key,values] 的迭代器对象：

实例

// 列出所有条目
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()

例子 1

values() 方法返回一个迭代器对象，其中包含 Map 中的值：

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

亲自试一试

例子 2

您可以使用 values() 方法对 Map 中的值求和：

// 对所有值求和
let total = 0;
for (const x of fruits.values()) {
  total += x;
}

亲自试一试

将对象用作键

例子 1

能够将对象用作键是 Map 的一项重要特性。

// 创建对象
const apples = {name: 'Apples'};
const bananas = {name: 'Bananas'};
const oranges = {name: 'Oranges'};

// 创建 Map
const fruits = new Map();

// Add new Elements to the Map
fruits.set(apples, 500);
fruits.set(bananas, 300);
fruits.set(oranges, 200);

亲自试一试

例子 2

请记住：键是对象（apples），而不是字符串（“apples”）：

fruits.get("apples");  // 返回 undefined

亲自试一试

Browser Support

所有浏览器都支持 JavaScript 映射，除了 Internet Explorer ：

Chrome Edge Firefox Safari Opera
支持 支持 支持 支持 支持