往期回顾

「JavaScript 从入门到精通」1.语法和数据类型

「JavaScript 从入门到精通」2.流程控制和错误处理

「JavaScript 从入门到精通」3.循环和迭代

「JavaScript 从入门到精通」4.函数

「JavaScript 从入门到精通」5.表达式和运算符

「JavaScript 从入门到精通」6.数字

「JavaScript 从入门到精通」7.时间对象

「JavaScript 从入门到精通」8.字符串

「JavaScript 从入门到精通」9.正则表达式

「JavaScript 从入门到精通」10.数组

前置知识：

Map和Set对象是在ES6中被引入的，作为一种由key值标记的数据容器。

Map和Set对象承载的数据元素可以按照插入时的顺序，被迭代遍历。

1.Set对象

介绍:

Set数据结构类似数组，但所有成员的值唯一。

Set本身为一个构造函数，用来生成Set数据结构，使用add方法来添加新成员。

基础使用：

注意：

• 向Set中添加值的时候，不会类型转换，即5和'5'是不同的。

[...new Set([5,'5'])]; // [5, "5"]

属性和方法：

• 属性：
• Set.prototype.constructor：构造函数，默认就是Set函数。
• Set.prototype.size：返回Set实例的成员总数。
• 操作方法：
• add(value)：添加某个值，返回 Set 结构本身。
• delete(value)：删除某个值，返回一个布尔值，表示删除是否成功。
• has(value)：返回一个布尔值，表示该值是否为Set的成员。
• clear()：清除所有成员，没有返回值。

数组去重：

let a = new Set([1,2,3,3,3,3]);

2.Set的应用

数组去重：

遍历和过滤：

获取并集、交集和差集：

• 遍历方法：
• keys()：返回键名的遍历器。
• values()：返回键值的遍历器。
• entries()：返回键值对的遍历器。
• forEach()：使用回调函数遍历每个成员。

Set遍历顺序是插入顺序，当保存多个回调函数，只需按照顺序调用。但由于Set结构没有键名只有键值，所以keys()和values()是返回结果相同。

并且 还可以使用for...of直接遍历Set。

forEach与数组相同，对每个成员执行操作，且无返回值。

3.Map对象

由于传统的JavaScript对象只能用字符串当做键，给开发带来很大限制，ES6增加Map数据结构，使得各种类型的值(包括对象)都可以作为键。

Map结构提供了“值—值”的对应，是一种更完善的 Hash 结构实现。 基础使用：

注意：

• 传入数组作为参数，指定键值对的数组。

• 如果对同一个键多次赋值，后面的值将覆盖前面的值。

• 如果读取一个未知的键，则返回undefined。

new Map().get('abcdef'); // undefined

• 同样的值的两个实例，在 Map 结构中被视为两个键。

遍历方法： Map 的遍历顺序就是插入顺序。

• keys()：返回键名的遍历器。
• values()：返回键值的遍历器。
• entries()：返回所有成员的遍历器。
• forEach()：遍历 Map 的所有成员。

将Map结构转成数组结构：

4.Map与其他数据结构互相转换

• Map 转 数组

• 数组 转 Map

• Map 转 对象 如果所有 Map 的键都是字符串，它可以无损地转为对象。
• 如果有非字符串的键名，那么这个键名会被转成字符串，再作为对象的键名。

• 对象 转 Map

• Map 转 JSON

(1)Map键名都是字符串，转为对象JSON：

(2)Map键名有非字符串，转为数组JSON：

• JSON 转 Map

(1)所有键名都是字符串：

(2)整个 JSON 就是一个数组，且每个数组成员本身，又是一个有两个成员的数组:

公众号：前端自习课