JavaScript Map

JavaScript 地图教程展示了如何在 JavaScript 中使用地图集合。

地图

Map 是一个存储键/值对的容器。它会记住键的原始插入顺序。任何值都可以用作键或值。

我们可以使用for/of 形式和forEach 方法遍历一个Map。

JS 地图方法

以下方法用于处理地图：

• new Map() – 创建一个新地图
• set(key, value) – 设置键的值
• get(key) – 返回值通过键
• has(key) – 检查键是否存在
• delete(key) – 通过键删除值
• clear() – 删除全图

此外，size 属性返回地图的大小。

JS Map简单例子

下面是一个使用Map的简单例子。

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

我们有一张石头地图。键是整数，值是字符串。

let stones = new 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

有几种方法可以启动地图。

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

该示例根据空地图、现有地图和数组创建新地图。

$ 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 的大小由size 属性决定。

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

我们启动一个新的空映射，添加新对并使用 size 属性确定当前大小。

$ node map_size.js 
The size is 0
The size is 3
The size is 5
The size is 0

JS 地图循环

我们可以很容易地以for/of 形式遍历键、值和键/值对。

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

我们定义一个新地图并以各种方式对其进行循环。

$ 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

另一种遍历地图的方法是使用forEach 方法。

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 遍历一张石头图。

$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 方法从可迭代对象创建数组。

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

在示例中，我们将地图转为数组。

let stones2d = Array.from(stones);

我们从stones 地图创建一个二维数组。每个子数组都是映射中的一对。

let keys = Array.from(stones.keys());

我们创建一个映射键数组。

let values = Array.from(stones.values());

我们创建一个映射值数组。

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 地图合并

在下面的示例中，我们组合了两个地图。这些地图与展开的... 运算符相结合。

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

我们合并两个映射并验证实际值和预期值是否相等。如果值不同，assert.deepStrictEqual 会抛出异常。

$ node combining.js 
Map {
    0 => 'citrine',
    1 => 'garnet',
    2 => 'topaz',
    3 => 'opal',
    4 => 'amethyst'
}

在本文中，我们使用了 JavaScript 中的地图。

列出所有 JavaScript 教程。