js map对象遍历|极客笔记

js map对象遍历

介绍

在JavaScript中，Map对象是一种数据结构，它弥补了普通对象(Object)在存储和遍历方面的一些不足。Map允许我们将任意类型的值作为键（key）存储，并且能够保留插入的顺序。在本篇文章中，我们将详细介绍如何遍历Map对象。

创建Map对象

在使用Map对象之前，我们首先需要创建它。可以使用Map构造函数来创建一个空的Map对象，也可以传入一个数组，数组中包含键值对作为参数来初始化Map对象。

示例代码：

// 创建空的Map对象
let emptyMap = new Map();

// 通过数组初始化Map对象
let fruitMap = new Map([
  ['apple', 10],
  ['banana', 5],
  ['orange', 8]
]);

Map对象的基本操作

Map对象是以键值对的形式存储数据的，可以使用如下几个方法进行基本操作。

set(key, value)

该方法用于向Map对象中添加新的键值对。如果添加的键已经存在，则会更新对应的值。

示例代码：

let fruitMap = new Map();

// 添加键值对
fruitMap.set('apple', 10);
fruitMap.set('banana', 5);

// 更新值
fruitMap.set('apple', 20);

get(key)

该方法用于根据键获取对应的值。

示例代码：

let fruitMap = new Map([
  ['apple', 10],
  ['banana', 5],
  ['orange', 8]
]);

console.log(fruitMap.get('apple')); // 输出 10
console.log(fruitMap.get('orange')); // 输出 8
console.log(fruitMap.get('grape')); // 输出 undefined

has(key)

该方法用于判断Map对象中是否存在指定的键。

示例代码：

let fruitMap = new Map([
  ['apple', 10],
  ['banana', 5],
  ['orange', 8]
]);

console.log(fruitMap.has('apple')); // 输出 true
console.log(fruitMap.has('grape')); // 输出 false

delete(key)

该方法用于删除Map对象中指定的键及其对应的值。

示例代码：

let fruitMap = new Map([
  ['apple', 10],
  ['banana', 5],
  ['orange', 8]
]);

fruitMap.delete('banana');

console.log(fruitMap.has('banana')); // 输出 false

clear()

该方法用于清空Map对象，删除其中的所有键值对。

示例代码：

let fruitMap = new Map([
  ['apple', 10],
  ['banana', 5],
  ['orange', 8]
]);

fruitMap.clear();

console.log(fruitMap.size); // 输出 0

遍历Map对象

在JavaScript中，遍历Map对象有多种方法，包括使用for…of循环、forEach()方法和entries()方法等。下面我们将详细介绍这些方法的用法及其区别。

使用for…of循环

可以使用for…of循环遍历Map对象，循环的结果是键值对的数组。

示例代码：

let fruitMap = new Map([
  ['apple', 10],
  ['banana', 5],
  ['orange', 8]
]);

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

输出：

apple 10
banana 5
orange 8

使用forEach()方法

Map对象提供了forEach()方法，可以传入一个回调函数作为参数，在回调函数中可以获取到键和对应的值。

示例代码：

let fruitMap = new Map([
  ['apple', 10],
  ['banana', 5],
  ['orange', 8]
]);

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

输出：

apple 10
banana 5
orange 8

使用entries()方法

Map对象的entries()方法返回一个新的Iterator对象，该对象包含Map对象中的所有键值对。

示例代码：

let fruitMap = new Map([
  ['apple', 10],
  ['banana', 5],
  ['orange', 8]
]);

let iterator = fruitMap.entries();
let result = iterator.next();

while (!result.done) {
  let [key, value] = result.value;
  console.log(key, value);
  result = iterator.next();
}

输出：