JavaScript：ES6：Map数据类型-马育民老师

# 说明

ES6 提供了 **Map** 数据类型，存储 **键/值**，功能类似 object对象

见下面的两张身份证图片，观察区别，哪个身份证更加易于理解

[![](https://www.malaoshi.top/upload/0/0/1EF3XRBGQEZi.jpg)](https://www.malaoshi.top/upload/0/0/1EF3XRBGQEZi.jpg)

[![](https://www.malaoshi.top/upload/0/0/1EF3WKIIcywf.jpg)](https://www.malaoshi.top/upload/0/0/1EF3WKIIcywf.jpg)

“姓名”、“性别”就是key，与之对应的具体内容就是value

**注意：**`Map`中不能包含 **重复的键**，**值可以重复**，每个键只能对应一个值。

### Maps 和 Objects 的区别

**键值区别：**

- `Object` 的 **键** 只能是 **字符串**，但一个` Map` 的 **键** 可以是 **任意值**。
- `Map` 中的键值是 **有序的**（FIFO 原则），而添加到对象中的键则不是。
- Map 的键值对 **数量** 可以从 `size` 属性获取，而 Object 的键值对 **数量** 只能手动计算。
- Map 提供了 **方法** 来访问键值对，如：判断健是否存在、删除键值等

**性能区别：**

- 内存占用：给定固定大小的内存，Map可以比Object多存储50%的键值对。
- 插入性能：插入Map稍微快一点。
- 查找速度：Object更优。
- 删除性能：Map的delete()操作都比插入和查找更快。

# 创建

## 方式一
```
new Map();
```

#### 例子

```
const map = new Map();
console.log(m);
```

执行结果：

```
Map {}
```

## 方式二

使用嵌套数组初始化映射

```
new Map([
  ["key1", "value1"],
  ["key2", "value2"],
  ["key3", "value3"]
]);
```

#### 例子

```
const m1 = new Map([
  ["key1", "value1"],
  ["key2", "value2"],
  ["key3", "value3"]
]);
console.log(m1);
```

执行结果：

```
Map { 'key1' => 'value1', 'key2' => 'value2', 'key3' => 'value3' }
```

# 属性

返回 Map 中的 键/值对 数量

**注意：**一对键/值 算1个
```
.size
```

### 例子

```
const m1 = new Map([
  ["key1", "value1"],
  ["key2", "value2"],
  ["key3", "value3"]
]);
console.log(m1.size);
```

执行结果：

```
3
```

# 操作方法

- set(key,value)　　　　添加键值
- delete(key)　　　根据健删除键值
- has(key)　　　　查看是否存在某个健，返回一个布尔值
- clear()　　　　　　清除所有数据，没有返回值

### 例子

```
const m = new Map();
console.log(m.has("firstName")); // false
console.log(m.get("firstName")); // undefined
console.log(m.size); // 0

m.set("firstName", "Matt").set("lastName", "Frisbie");
console.log(m); // Map { 'firstName' => 'Matt', 'lastName' => 'Frisbie' }
console.log(m.size); // 2
console.log(m.has("firstName")); // true
console.log(m.get("firstName")); // Matt

m.delete("firstName");// 只删除这一个键值对

console.log(m.has("firstName")); // false
console.log(m.has("lastName")); // true
console.log(m.size); // 1

m.clear(); // 清除这个遇敌实例中的所有键值对

console.log(m.has("firstName")); // false
console.log(m.has("lastName")); // false
console.log(m.size); // 0

// set()方法返回映射实例，因此可以把多个操作连缀起来，包括初始化声明。
const mm = new Map().set("key1", "val1");
mm.set("key2", "val2").set("key3", "val3");
console.log(mm.size); // 3
console.log(mm); // Map { 'key1' => 'val1', 'key2' => 'val2', 'key3' => 'val3' }
```

# 遍历

- for...of
- **entries()**　　　 返回一个键值对的遍历器
- forEach()　　　使用回调函数遍历每个成员
- keys()　　　　 返回一个键名的遍历器
- values()　　　 返回一个键值的遍历器

### 准备数据

```
const m = new Map([
  ["key1", "val1"],
  ["key2", "val2"],
  ["key3", "val3"]
]);
```

### for...of

```
for (let pair of m) {
  console.log(key + " = " + value);
}
```
执行结果：
```
['key1', 'val1']
['key2', 'val2']
['key3', 'val3']
```

##### 第二种用法

```
for (let [key, value] of m) {
  console.log(key + " = " + value);
}
```
执行结果：
```
key1 = val1
key2 = val2
key3 = val3
```

### entries()

返回一个迭代器（iterator），能以插入顺序生成 `[key,value]` 形式的数组

```
for (let pair of m.entries()) {
  console.log(pair);
}
```

执行结果：
```
['key1', 'val1']
['key2', 'val2']
['key3', 'val3']
```

### forEach()
```
const m = new Map([
  ['key1', 'val1'],
  ['key2', 'val2'],
  ['key3', 'val3']
]);

m.forEach((val, key) => console.log(`${key}->${val}`))
```

执行结果：
```
key1 - > val1
key2 - > val2
key3 - > val3
```

### keys()
```
for (let key of m.keys()) {
  console.log(key);
}
```

执行结果：
```
key1
key2
key3
```

### values()

```
for (let key of m.values()) {
  console.log(key);
}
```

执行结果：
```
val1
val2
val3
```

参考：
https://segmentfault.com/a/1190000040385788
https://www.runoob.com/w3cnote/es6-map-set.html
https://blog.csdn.net/m0_58047238/article/details/120008399

原文出处：http://malaoshi.top/show_1GWH0QZuPmG.html