高级编程JavaScript中的Map键值对你知道吗?一篇文章看懂

发布时间:2024年01月11日

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]
]);

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

// 创建一个 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.get()

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

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

Map.size

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

fruits.size;

Map.clear()

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

fruits.clear();

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

fruits.has("apples");

请试试这个:

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

typeof 返回 object:

// 返回 object:

typeof fruits;

instanceof Map 返回 true:

// 返回 true:
fruits instanceof Map;

JavaScript Object 对比 Map

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;
}

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

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

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

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

将对象用作键

能够将对象用作键是 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);

请记住:键是对象(apples),而不是字符串(“apples”):

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

文章来源:https://blog.csdn.net/m0_73358221/article/details/135517514
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。