js map类型|极客笔记

js map类型

1. 概述

JavaScript 中的 Map 类型是一种用于存储键值对的数据结构。它类似于对象（Object），但有以下几个区别：

对象的键只能是字符串或者 Symbol，而 Map 的键可以是任意类型的值，包括对象、函数、基本数据类型等。
Map 中的键值对是有序的，而对象中的键值对是无序的。
Map 类型有更丰富的方法和属性，方便对键值对进行操作。

在本文中，我们将详细介绍 JavaScript 中的 Map 类型，包括创建 Map、添加/获取/删除键值对、遍历 Map 等操作。

2. 创建 Map

我们可以使用 new Map() 来创建一个空的 Map 对象。也可以通过传入一个包含键值对的数组来初始化 Map 对象。

// 创建一个空的 Map 对象
let map = new Map();

// 创建并初始化 Map 对象
let initialMap = new Map([
  ['key1', 'value1'],
  ['key2', 'value2'],
  ['key3', 'value3']
]);

3. 添加和获取键值对

通过 set(key, value) 方法向 Map 中添加键值对，通过 get(key) 方法获取指定键对应的值。

let map = new Map();
map.set('key1', 'value1');
map.set('key2', 'value2');

console.log(map.get('key1'));  // 输出：value1
console.log(map.get('key2'));  // 输出：value2

4. 判断 Map 中是否存在键

可以使用 has(key) 方法来判断 Map 中是否存在指定的键。

let map = new Map();
map.set('key', 'value');

console.log(map.has('key'));    // 输出：true
console.log(map.has('unknown')); // 输出：false

5. 删除键值对

通过 delete(key) 方法可以从 Map 中删除指定的键值对。

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

map.delete('key2');
console.log(map.get('key2'));  // 输出：undefined

6. 获取 Map 中键值对的个数

可以通过 size 属性获取 Map 中键值对的个数。

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

console.log(map.size);  // 输出：3

7. 清空 Map

通过 clear() 方法可以清空 Map，即删除所有的键值对。

let map = new Map();
map.set('key1', 'value1');
map.set('key2', 'value2');

map.clear();
console.log(map.size);  // 输出：0

8. 遍历 Map

Map 对象提供了多种遍历方式，包括使用 for...of 循环、使用 forEach 方法和使用 entries() 方法。

8.1 使用 for…of 循环遍历

我们可以使用 for...of 循环来遍历 Map 中的键值对。

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

for (let [key, value] of map) {
  console.log(`Key:  ${key}, Value:$ {value}`);
}

8.2 使用 forEach 方法遍历

我们可以使用 forEach 方法来遍历 Map 中的键值对。

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

map.forEach((value, key) => {
  console.log(`Key:  ${key}, Value:$ {value}`);
});

8.3 使用 entries 方法遍历

Map 对象的 entries() 方法返回一个新的迭代器对象，该对象按照插入顺序包含了 Map 对象中的每个元素的[key, value]数组。

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

let iterator = map.entries();
console.log(iterator.next().value);  // 输出：['key1', 'value1']
console.log(iterator.next().value);  // 输出：['key2', 'value2']
console.log(iterator.next().value);  // 输出：['key3', 'value3']

9. Map 的应用场景

由于 Map 可以存储任意类型的键值对，并且有丰富的方法和属性支持，所以在一些特定的场景下，使用 Map 比使用对象更加方便和高效。

例如，对于需要建立多个键和同一个键对应值的对应关系时，使用 Map 类型会更加直观和简洁。

let urlMap = new Map();
urlMap.set('/home', '首页');
urlMap.set('/about', '关于我们');
urlMap.set('/contact', '联系我们');

console.log(urlMap.get('/home'));    // 输出：首页
console.log(urlMap.get('/about'));   // 输出：关于我们
console.log(urlMap.get('/contact')); // 输出：联系我们