javascript map 循环取值-CFANZ编程社区

JavaScript Map 循环取值

在 JavaScript 中，我们经常需要对数组或者对象进行遍历操作，以获取其中的每个元素或者属性。而在 ECMAScript 6（ES6）中，引入了 Map 对象，可以更方便地进行循环取值操作。

Map 对象简介

Map 是一种有序的键值对集合，其中的键和值可以是任意类型。它类似于 JavaScript 中的对象，但有以下几个区别：

对象的键只能是字符串或者符号，而 Map 的键可以是任意类型。
Map 中的键值对是有序的，而对象中的属性是无序的。
Map 的长度可以通过 size 属性获取，而对象的属性数量需要手动计算。

创建和初始化 Map 对象

要创建一个新的 Map 对象，可以使用 Map 构造函数。下面是一个简单的示例：

let map = new Map();

我们还可以在初始化时传入一个数组作为参数，其中数组的每个元素都是一个键值对，如下所示：

let map = new Map([
  ['key1', 'value1'],
  ['key2', 'value2'],
  ['key3', 'value3']
]);

循环遍历 Map 对象

Map 对象提供了多种遍历方法，可以根据不同的需求来选择合适的方式。

使用 for...of 循环遍历键值对

我们可以使用 for...of 循环来遍历 Map 对象中的键值对。如下所示：

for (let [key, value] of map) {
  console.log(key, value);
}

使用 forEach() 方法遍历键值对

我们还可以使用 forEach() 方法来遍历 Map 对象中的键值对，如下所示：

map.forEach((value, key) => {
  console.log(key, value);
});

获取 Map 对象的键、值或者键值对

要获取 Map 对象中的键、值或者键值对，我们可以使用 keys()、values() 和 entries() 方法。如下所示：

// 获取所有键
let keys = map.keys();
for (let key of keys) {
  console.log(key);
}

// 获取所有值
let values = map.values();
for (let value of values) {
  console.log(value);
}

// 获取所有键值对
let entries = map.entries();
for (let [key, value] of entries) {
  console.log(key, value);
}

状态图

下面是一个使用 Mermaid 语法绘制的状态图，用于说明 Map 对象的创建和循环遍历过程：

stateDiagram
  [*] --> 创建
  创建 --> 循环遍历
  循环遍历 --> [*]

类图

下面是一个使用 Mermaid 语法绘制的类图，用于说明 Map 对象的结构和方法：

classDiagram
  class Map {
    size
    +constructor()
    +set(key, value)
    +get(key)
    +has(key)
    +delete(key)
    +clear()
    +keys()
    +values()
    +entries()
    +forEach(callback)
  }