JS中的new Map()方法介绍-牛翰网

在 JavaScript 中，Map 是一种新的数据结构，它与传统的对象（{}）非常相似，用于存储键值对（key-value pairs）。但是，Map 提供了更多的优势和功能，尤其是在键的处理上。本文将详细介绍 new Map() 方法，如何使用它以及它相对于传统对象的优势。

1. 什么是 Map？

Map 是 ES6 中新增的一个数据结构，它类似于对象，但它的键（key）可以是任何类型的值，而不仅限于字符串或符号。此外，Map 保持了键值对的插入顺序，可以进行遍历操作。我们可以通过 new Map() 来创建一个空的 Map 实例。

2. 创建一个 Map

2.1 使用 new Map() 创建空的 Map

const map = new Map();
console.log(map); // Map(0) {}

通过 new Map() 创建的是一个空的 Map，此时 map 中没有任何键值对。

2.2 使用二维数组初始化 Map

你可以通过传递一个二维数组来初始化 Map。数组的每个元素是一个包含两个值的子数组，分别表示键和值。

const map = new Map([
  ['name', 'John'],
  ['age', 30],
  ['city', 'New York']
]);
console.log(map); // Map(3) { 'name' => 'John', 'age' => 30, 'city' => 'New York' }

2.3 使用其他 Map 实例初始化

可以通过将一个已经存在的 Map 实例作为参数来初始化另一个 Map：

const originalMap = new Map([
  ['name', 'Alice'],
  ['age', 25]
]);
const copiedMap = new Map(originalMap);
console.log(copiedMap); // Map(2) { 'name' => 'Alice', 'age' => 25 }

3. Map 的常用方法

3.1 set(key, value)

set 方法用于向 Map 中添加或更新键值对。如果 Map 中已经存在相同的键，那么它会更新该键对应的值。

const map = new Map();
map.set('name', 'John');
map.set('age', 30);
console.log(map); // Map(2) { 'name' => 'John', 'age' => 30 }
map.set('name', 'Alice');
console.log(map); // Map(2) { 'name' => 'Alice', 'age' => 30 }

3.2 get(key)

get 方法用于根据给定的键获取对应的值。如果该键不存在，返回 undefined。

const map = new Map();
map.set('name', 'John');
map.set('age', 30);
console.log(map.get('name')); // John
console.log(map.get('address')); // undefined

3.3 has(key)

has 方法检查 Map 中是否包含给定的键，返回布尔值。

const map = new Map();
map.set('name', 'John');
console.log(map.has('name')); // true
console.log(map.has('age')); // false

3.4 delete(key)

delete 方法用于删除 Map 中指定键的键值对，返回一个布尔值，表示删除操作是否成功。

const map = new Map();
map.set('name', 'John');
map.set('age', 30);
console.log(map.delete('name')); // true
console.log(map.delete('address')); // false
console.log(map); // Map(1) { 'age' => 30 }

3.5 clear()

clear 方法清空 Map 中所有的键值对。

const map = new Map();
map.set('name', 'John');
map.set('age', 30);
map.clear();
console.log(map); // Map(0) {}

3.6 size

size 属性返回 Map 中键值对的数量。

const map = new Map();
map.set('name', 'John');
map.set('age', 30);
console.log(map.size); // 2

4. Map 的迭代方法

与传统的对象不同，Map 可以很方便地进行迭代。你可以通过多种方式遍历 Map，包括：

4.1 forEach 方法

forEach 方法用于遍历 Map 中的每个键值对，并对每一对进行处理。

const map = new Map([
  ['name', 'John'],
  ['age', 30]
]);
map.forEach((value, key) => {
  console.log(`${key}: ${value}`);
});
// 输出:
// name: John
// age: 30

4.2 使用 for…of 迭代器

Map 支持 for...of 循环，它会返回每个键值对。你可以使用解构语法来直接访问键和值。

const map = new Map([
  ['name', 'John'],
  ['age', 30]
]);
for (const [key, value] of map) {
  console.log(`${key}: ${value}`);
}
// 输出:
// name: John
// age: 30

4.3 keys(), values(), 和 entries()

Map 提供了三个方法来分别获取所有的键、值和键值对。

keys() 返回一个包含所有键的迭代器。
values() 返回一个包含所有值的迭代器。
entries() 返回一个包含所有键值对的迭代器。

const map = new Map([
  ['name', 'John'],
  ['age', 30]
]);
console.log([...map.keys()]); // ['name', 'age']
console.log([...map.values()]); // ['John', 30]
console.log([...map.entries()]); // [['name', 'John'], ['age', 30]]

5. Map 相对于传统对象的优势

键的类型：在传统的 JavaScript 对象中，键（key）必须是字符串或者符号，而 Map 允许任何数据类型作为键（例如：对象、数组、函数等）。
保持插入顺序：Map 中的键值对是按插入顺序进行迭代的，而对象则没有这一保证。
性能：对于频繁的添加和删除操作，Map 通常比对象更高效，尤其是在大量数据的场景下。