JavaScript Map
最后修改于 2023 年 10 月 18 日
在本文中，我们将展示如何在 JavaScript 中使用 Map 集合。
Map
Map 是一种存储键/值对的容器。它会记住键的原始插入顺序。任何值都可以用作键或值。
我们可以使用 for/of 形式和 forEach 方法来迭代 Map。
JS Map 方法
以下方法用于处理 Map
- new Map() - 创建一个新的 map
- set(key, value) - 设置键的值
- get(key) - 通过键返回值
- has(key) - 检查键是否存在
- delete(key) - 通过键删除值
- clear() - 删除整个 map
此外，size 属性返回 map 的大小。
JS Map 简单示例
以下是使用 Map 的简单示例。
simple.js
let stones = new Map(); stones.set(0, "citrine"); stones.set(1, "garnet"); stones.set(2, "topaz"); stones.set(3, "opal"); stones.set(4, "amethyst"); console.log(stones); console.log(stones.get(0)); console.log(stones.get(3)); console.log(stones.get(9));
我们有一个石头 map。 键是整数，值是字符串。
let stones = new Map();
创建一个空的 map。
stones.set(0, "citrine");
使用 set 插入一个新的键/值对。
console.log(stones.get(0));
我们获取键等于 0 的值。
$ node simple.js
Map {
0 => 'citrine',
1 => 'garnet',
2 => 'topaz',
3 => 'opal',
4 => 'amethyst'
}
citrine
opal
undefined
如果该值不存在，则 get 方法返回 undefined。
JS 初始化 Map
有几种方法可以初始化一个 Map。
initiate.js
let stones = new Map(); stones.set(0, "citrine"); stones.set(1, "garnet"); stones.set(2, "topaz"); let stones2 = new Map(stones); console.log(stones); console.log(stones2); let items = new Map([["coin", 3], ["pen", 4], ["cup", 3]]); console.log(items);
该示例从一个空 map、一个现有 map 和一个数组创建一个新的 map。
$ node initiate.js
Map { 0 => 'citrine', 1 => 'garnet', 2 => 'topaz' }
Map { 0 => 'citrine', 1 => 'garnet', 2 => 'topaz' }
Map { 'coin' => 3, 'pen' => 4, 'cup' => 3 }
JS Map 大小
Map 的大小由 size 属性确定。
map_size.js
let stones = new Map();
console.log(`The size is ${stones.size}`);
stones.set(0, "citrine");
stones.set(1, "garnet");
stones.set(2, "topaz");
console.log(`The size is ${stones.size}`);
stones.set(3, "opal");
stones.set(4, "amethyst");
console.log(`The size is ${stones.size}`);
stones.clear();
console.log(`The size is ${stones.size}`);
我们初始化一个新的空 map，添加新的键值对，并使用 size 属性确定当前大小。
$ node map_size.js The size is 0 The size is 3 The size is 5 The size is 0
JS Map 循环
我们可以使用 for/of 形式轻松循环遍历键、值和键/值对。
looping.js
let stones = new Map();
stones.set(0, "citrine");
stones.set(1, "garnet");
stones.set(2, "topaz");
stones.set(3, "opal");
stones.set(4, "amethyst");
for (const entry of stones)) {
console.log(entry);
}
console.log('-------------------------------');
for (const [k, v] of stones.entries()) {
console.log(`${k}: ${v}`);
}
console.log('-------------------------------');
for (const val of stones.values()) {
console.log(val);
}
console.log('-------------------------------');
for (const key of stones.keys()) {
console.log(key);
}
我们定义一个新的 map，并以各种方式循环遍历它。
$ node looping.js [ 0, 'citrine' ] [ 1, 'garnet' ] [ 2, 'topaz' ] [ 3, 'opal' ] [ 4, 'amethyst' ] ------------------------------- 0: citrine 1: garnet 2: topaz 3: opal 4: amethyst ------------------------------- citrine garnet topaz opal amethyst ------------------------------- 0 1 2 3 4
另一种循环遍历 map 的方法是使用 forEach 方法。
looping2.js
let stones = new Map();
stones.set(0, "citrine");
stones.set(1, "garnet");
stones.set(2, "topaz");
stones.set(3, "opal");
stones.set(4, "amethyst");
stones.forEach((v, k) => {
console.log(`${k} has value ${v}`);
});
我们使用 forEach 循环遍历一个石头 map。
$node looping2.js 0 has value citrine 1 has value garnet 2 has value topaz 3 has value opal 4 has value amethyst
JS Map 转换为数组
Array.from 方法从可迭代对象创建一个数组。
array_from.js
let stones = new Map();
stones.set(0, "citrine");
stones.set(1, "garnet");
stones.set(2, "topaz");
stones.set(3, "opal");
stones.set(4, "amethyst");
let stones2d = Array.from(stones);
let keys = Array.from(stones.keys());
let values = Array.from(stones.values());
console.log(stones2d);
console.log([...stones]);
console.log('--------------------');
console.log(keys);
console.log(values);
在这个例子中，我们将 map 转换成数组。
let stones2d = Array.from(stones);
我们从 stones map 创建一个二维数组。每个子数组都是 map 中的一个键值对。
let keys = Array.from(stones.keys());
我们创建一个 map 键的数组。
let values = Array.from(stones.values());
我们创建一个 map 值的数组。
console.log([...stones]);
另一种创建二维数组的方法是使用展开运算符。
$ node array_from.js
[
[ 0, 'citrine' ],
[ 1, 'garnet' ],
[ 2, 'topaz' ],
[ 3, 'opal' ],
[ 4, 'amethyst' ]
]
[
[ 0, 'citrine' ],
[ 1, 'garnet' ],
[ 2, 'topaz' ],
[ 3, 'opal' ],
[ 4, 'amethyst' ]
]
--------------------
[ 0, 1, 2, 3, 4 ]
[ 'citrine', 'garnet', 'topaz', 'opal', 'amethyst' ]
JS Map 合并
在下面的例子中，我们合并了两个 map。这些 map 使用展开运算符 ... 合并。
combining.js
const assert = require('assert');
let stones1 = new Map();
stones1.set(0, "citrine");
stones1.set(1, "garnet");
stones1.set(2, "topaz");
let stones2 = new Map();
stones2.set(3, "opal");
stones2.set(4, "amethyst");
let stones = new Map([...stones1, ...stones2])
console.log(stones);
assert.deepStrictEqual(
[...stones],
[ [ 0, 'citrine' ],
[ 1, 'garnet' ],
[ 2, 'topaz' ],
[ 3, 'opal' ],
[ 4, 'amethyst' ] ]
);
我们合并了两个 map，并验证实际值和期望值是否相等。 如果值不同，assert.deepStrictEqual 将抛出一个异常。
$ node combining.js
Map {
0 => 'citrine',
1 => 'garnet',
2 => 'topaz',
3 => 'opal',
4 => 'amethyst'
}
来源
在本文中，我们使用了 JavaScript 中的 map。