【JavaScript】Map和Set看这一篇就够了

前言

作为一个前端开发初学者，随着学习的逐渐的深入，用到的对象就不再局限于Object和Array，开始使用Map和Set这两种数据结构无疑是重要的.

最近在学习Vue3响应式，依赖收集track以及触发依赖trigger，都使用到了WeakMap、Map、以及Set和WeakSet这些数据结构，WeakMap和WeakSet我们后续再说，本篇主要介绍的是Map和Set的基本使用

Map

官网解释

Map 对象保存键对,并且能够记住键的原始插入顺序,任何值(对象或者基本类型)都可以作为一个键或一个值。

特点总结

• Map 对象这种数据结构和和对象类型，都已键值对的形式存储数据，即 key-vlue 形式。
• Map 对象存储的数据是有序的，而我们平常使用的对象是无序的，所以通常当我们需要使用对象形式（键值对）存储数据且需要有序时，采用 Map 对象进行存储。
• Map 对象的键值可以是任意类型，我们平时使用的对象只能使用字符串作为键。

基本使用

使用 new 关键字和 Map 构造函数可以创建一个空映射:

const myMap = new Map();

如果想在创建的同时初始化实例,可以给 Map 构造函数传入一个可迭代对象,需要包含 "键/值" 对数组。可迭代对象中途的每个 "键值" 对都会按照迭代顺序插入到新映射实例中:

const myMap = new Map([
  ["key1", "val1"],
  ["key2", "val2"],
  ["key3", "val3"],
]);
//例如
let userMap = new Map([['name', '卡特琳娜'], ['age', 18]]);

打印出来看一下结果：

Map的属性和方法

从Map的原型中，我们可以看到Map身上的属性和方法

从这个上方，我们可以将其分为两类——属性和操作方法和遍历方法

属性和操作方法

1. size 属性，返回 Map 结构的成员总数

let map = new Map([['name', '卡特琳娜'], ['age', 18]]);
console.log(map.size); // 输出 2 

2. set() 向Map中添加或更新元素

const map = new Map([["name", "亚索"]]);
map.set("name", "永恩");
map.set("age", 20);
console.log(map); // 输出 Map(2) { 'name' => '永恩', 'age' => 20 }

3. get() 读取key对应的键值，如果找不到key，返回undefined

const map = new Map([
    ["name", "亚索"],
    ["age", 20]
]);
console.log(map.get("name"); // 亚索
console.log(map.get("sex")); // undefined

4. has() 判断 Map 对象中是否有 Key 所对应的值，有返回 true，否则返回 false

const map = new Map([
    ["name", "亚索"],
    ["age", 20]
]);

console.log(map.has("name")); // true
console.log(map.has("sex")); // false

5. delete() 删除某个键，返回true。如果删除失败，返回false

const map = new Map([
    ["name", "亚索"],
    ["age", 20]
]);

console.log(map); // 输出 Map(2) { 'name' => '亚索', 'age' => 20 }
console.log(map.delete("name")); // true
console.log(map.delete("sex")); // false
console.log(map); // Map(1) { 'age' => 20 }

6. clear() 清除所有成员，没有返回值

const map = new Map([
    ["name", "亚索"],
    ["age", 20]
]);
console.log(map.clear()); //undefined
console.log(map.size); // 0
console.log(map); //Map(0) {size: 0}

遍历方法

1. keys() 返回键名的遍历器。

const m = new Map([
    ["name", "亚索"],
    ["age", 20],
    ["sex", "男"],
]);
console.log(m.keys()); // [Map Iterator] { 'name', 'age', 'sex' }

2. values() ：返回键值的遍历器。

const m = new Map([
    ["name", "亚索"],
    ["age", 20],
    ["sex", "男"],
]);
console.log(m.values()); // [Map Iterator] { '亚索', 20, '男' }

3. entries() 返回所有成员的遍历器。

const m = new Map([
    ["name", "亚索"],
    ["age", 20],
    ["sex", "男"],
]);

const mapIter = m.entries();

console.log(mapIter.next().value);  //  ['name', '亚索']
console.log(mapIter.next().value);  //  ['age', 20]
console.log(mapIter.next().value);  //  ['sex', '男']

4. forEach()：遍历 Map 的每个成员。

const m = new Map([
    ["name", "亚索"],
    ["age", 20],
    ["sex", "男"],
]);

m.forEach((value, key, map) => {
  console.log(key, value, map);
});
// name  亚索  Map(3) {'name' => '亚索', 'age' => 20, 'sex' => '男'}
// age   20   Map(3) {'name' => '亚索', 'age' => 20, 'sex' => '男'}
// sex   男   Map(3) {'name' => '亚索', 'age' => 20, 'sex' => '男'}

Map的使用场景

我们可以使用Map对象建立一个请求状态码对象字典，因为状态码是数字类型，所以使用Map对象很合适。

let errors = new Map([
  [400, 'InvalidParameter'],
  [404, 'Not found'],
  [500, 'InternalError']
]);
console.log(errors);

除了该场景外，如果需要保证对象的顺序，那么也是可以使用Map对象的。

Set

和 Map 类似,Set 也是一个对象，但是它是一个类数组对象，也就是说它长得像数组，我们通常直接称它为 Set 对象。

官网解释

Set 对象允许你存储任何类型的唯一值，无论是原始值或者是对象引用。

Set 在很多方面都像是加强的 Map,这是因为它们的大多数 API 和行为都是共有的。

特点总结：

• Set 对象是一个类数组对象，它长得就很像数组。
• Set 对象存储的值是不重复的，所以我们通常使用它来实现数组去重。
• Set 对象存储的数据不是键值对的形式，而且它可以存储任何类型的数据。

基本使用

因为 Set 的 API 和 Map 的一致,这里就不详细讲了,值得注意的是 Set 对象没有 get(...) 方法,使用代码如下:

const s = new Set(["亚索", "永恩", "卡莎"]);
s.add("杰斯");
s.add("永恩");
s.delete("卡莎");

console.log(s.has("亚索"));//true
console.log(s.values());// SetIterator {'亚索', '永恩', '杰斯'}
console.log(s.keys());// SetIterator {'亚索', '永恩', '杰斯'}

s.forEach((key, value) => {
    console.log(key, value);
});
//亚索 亚索
//永恩 永恩
//杰斯 杰斯

Set的使用场景

在日常开发中,我们可以通过使用 Set 进行数组去重:

const result = [1, 2, 3, 4, 5, 5, 6, 7, 7, 7, 8];
console.log([...new Set(result)]); // [1, 2, 3, 4, 5, 6, 7, 8];

需要注意的是Set对象是一个类数组，我们使用...扩展运算符将一个类数组转化为了一个真正的数组。
Set的使用场景

在日常开发中,我们可以通过使用 Set 进行数组去重:

const result = [1, 2, 3, 4, 5, 5, 6, 7, 7, 7, 8];
console.log([...new Set(result)]); // [1, 2, 3, 4, 5, 6, 7, 8];

需要注意的是Set对象是一个类数组，我们使用...扩展运算符将一个类数组转化为了一个真正的数组。