Web前端这些高端技术只有你还不知道，ES6 入门—ES6 Map 与 Set，细数前端开发者的艰辛历程

=====================================================================

本文主要介绍了 Set 以及 Map 数据结构，对他们实例方法、遍历、以及类型转换进行了详细的讲解。

一、Set 数据结构

=============================================================================

ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。Set 本身是一个构造函数，用来生成 Set 数据结构。Set 数据结构我们一般运用在电商网站的搜索历史关键字的存储。

Set 本身是一个构造函数，用来生成 Set 数据结构。

const s = new Set();

Set 函数可以接受一个数组作为参数，用来初始化。

const set = new Set([1, 2, 3, 4, 4]); // {1, 2, 3, 4}

通过示例可以看出，成员的值都是唯一的，没有重复的值。

二、实例方法

=========================================================================

• add(value)：添加某个值，返回 Set 结构本身。

• delete(value)：删除某个值，返回一个布尔值，表示删除是否成功。

• has(value)：返回一个布尔值，表示该值是否为 Set 的成员。

• clear()：清除所有成员，没有返回值。

const s = new Set();

s.add(1).add(2).add(3); // 向 set 结构中添加值

s.delete(2); // 删除 set 结构中的 2 值，返回一个布尔值，表示删除是否成功。

s.has(1); // 表示 set 结构中是否有 1 这个值 返回布尔值，表示该值是否为 Set 的成员。

s.clear(); // 清除 set 结构中的所有值

// 注意：删除的是元素的值，不是代表的索引。

示例代码：

新建 index.html 文件，代码如下：

显示效果：

三、遍历

=======================================================================

Set 结构的实例与数组一样，也拥有 forEach 方法，用于对每个成员执行某种操作，没有返回值。

s.forEach((value) => console.log(value));

示例代码：

新建 test.js 文件，代码如下：

// 遍历 set 数据结构，从中取值

const s1 = new Set([“a”, “b”, “c”, “A”, “B”]);

s1.forEach((value) => {

console.log(value);

});

显示效果：

四、类型转换

=========================================================================

Array

// Array 转 Set

var mySet = new Set([“value1”, “value2”, “value3”]);

// 用…操作符，将 Set 转 Array

var myArray = […mySet];

在终端使用 node 命令运行：

String

// String 转 Set

var mySet = new Set(‘hello’);

// Set(4) {“h”, “e”, “l”, “o”}

copy

Set 中 toString 方法是不能将 Set 转换成 String。

在终端使用 node 命令运行：

五、Set 对象作用

=============================================================================

数组去重

var mySet = new Set([1, 2, 3, 4, 4]);

[…mySet];

// [1, 2, 3, 4]

在终端使用 node 命令运行：

并集

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

var b = new Set([4, 3, 2]);

var union = new Set([…a, …b]);

// {1, 2, 3, 4}

在终端使用 node 命令运行：

交集

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

var b = new Set([4, 3, 2]);

var intersect = new Set([…a].filter(x => b.has(x)));

// {2, 3}

在终端使用 node 命令运行：

差集

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

var b = new Set([4, 3, 2]);

var difference = new Set([…a].filter(x => !b.has(x)));

// {1}

在终端使用 node 命令运行：

六、Map

========================================================================

Map 对象保存键值对，任何值（对象或者原始值） 都可以作为一个键或一个值。它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。也就是说，Object 结构提供了“字符串 — 值”的对应，Map 结构提供了“值 — 值”的对应，是一种更完善的 Hash 结构实现。如果你需要“键值对”的数据结构，Map 比 Object 更合适。

var m = new Map();

var o = { p: “Hello World” };

m.set(o, “content”);

m.get(o); // “content”

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录大纲截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且后续会持续更新

如果你觉得这些内容对你有帮助，可以添加V获取：vip1024c （备注前端）

最后

小编的一位同事在校期间连续三年参加ACM-ICPC竞赛。从参赛开始，原计划每天刷一道算法题，实际上每天有时候不止一题，一年最终完成了 600+：

凭借三年刷题经验，他在校招中很快拿到了各大公司的offer。

入职前，他把他的刷题经验总结成1121页PDF书籍，作为礼物赠送给他的学弟学妹，希望同学们都能在最短时间内掌握校招常见的算法及解题思路。

整本书，我仔细看了一遍，作者非常细心地将常见核心算法题和汇总题拆分为4个章节。

而对于有时间的同学，作者还给出了他结合众多数据结构算法书籍，挑选出的一千多道题的解题思路和方法，以供有需要的同学慢慢研究。

一个人可以走的很快，但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

16241cf00d213.png)

整本书，我仔细看了一遍，作者非常细心地将常见核心算法题和汇总题拆分为4个章节。

而对于有时间的同学，作者还给出了他结合众多数据结构算法书籍，挑选出的一千多道题的解题思路和方法，以供有需要的同学慢慢研究。

一个人可以走的很快，但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
[外链图片转存中…(img-OIJcsokz-1712459176956)]