ES6 新特性梳理系列丨新的数据结构-Set

ES6 新特性梳理系列文章将在本号持续发布，一起查漏补缺学个痛快！若您有遇到其它相关问题，非常欢迎在评论中留言讨论，达到帮助更多人的目的。若感本文对您有所帮助请点个赞吧！

---

JavaScript 与 ECMAScript

JavaScript 诞生于1995年，设计者是就职于 Netscape 公司的工程师 Brendan Eich。它是一门仅用10天就完成设计的编程语言，但至今为止已对业界保持26年的影响，且势头愈发强劲

1996年 Netscape 将 JavaScript 提交给ECMA，希望它可以成为“标准化一个通用的、跨平台的、中立于厂商的脚本语言的语法和语义标准”，1997年 ECMA 确定将 JavaScript 作为浏览器脚本语言的标准，并为之重命名为 ECMAScript，所以通常来讲我们将 ECMAScript 视为 JavaScript 的标准，而 JavaScript 则是 ECMAScript 的实现及扩展

1997年-1999年连续发布了ES1-ES3发布，2000年开始酝酿新版本的升级内容，中间因标准委员会意见未能达成一致，只做了部分功能的小范围升级及支持，于2009年12月发布了过渡版 ECMAScript 5.0，2011年6月发布 ECMAScript 5.1 并成为 ISO 国际标准

2013年3月 ECMAScript 6 草案冻结，2013年12月 ECMAScript 草案发布，2015年6月 ECMAScript 6 正式通过，成为新的国际标准。ES6 泛指自2015年升级为 ECMAScript 6.0 后的所有子版本，如：ES2015-ES2020，等同于ES6.0-ES6.5，这是 JavaScript 走向企业级编程语言的强势升级

不断升级的标准与实现，对于开发效率及产品质量起到强有力的支撑，接下来我们开始梳理ES6的新特性吧！

---

什么是 Set

Set 是 ES6 引入的新的数据结构，类似数组，但 Set 中成员的值是唯一的，不存在重复的值。

---

创建一个 Set

通过new Set()，可以创建一个 Set 对象

var s = new Set()
typeof s // Object
console.log(s)  // [Object Set]

Set() 函数也可以接收一个数组，或者类似数组的对象作为参数

var s = new Set([1,2,3,1,2,4])
console.log(s)  // [Object Set]
console.log(...s)  // 1 2 3 4   

关于 ... 扩展运算符参考本系列  ES6 新特性梳理系列丨变量的解构赋值

---

Set 的属性和方法

• Set.prototype.constructor : 构造函数，默认就是 Set 函数

• Set.prototype.size : 返回 Set 实例的成员总数 

• add(value) : 添加某个值，返回添加后的 Set 实例

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

• has(value) : 查看当前 set 中是否包含指定值，返回一个布尔值

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

var s = new Set()
s.add(1).add(2).add(3).add(2)
console.log(..s) // 1 2 3 


s.has(1) // true
s.has(2) // true
s.has(4) // false


s.delete(1) 
s.has(1) // false


s.clear()
console.log(s) // [object Set]
console.log(...s) // 空 

Array.from 方法可以将一个 Set 结构转换为一个数组

var s = new Set([1,2,3])
var arr = Array.from(s)
console.log(arr)  // Array [1,2,3]
console.log(arr.length) // 3
console.log(arr.size) // undefined

所以，我们可以根据这个方法和 Set 的唯一性，对数组的重复成员可以很方便的去重。

console.log(Array.from(new Set([1,2,3,4,2,4])))  //  Array [1,2,3,4]

---

Set 的遍历

• keys(): 返回键名的遍历器

• values() : 返回键值的遍历器

• entries() : 返回键值对的遍历器

• forEach() : 使用回调函数遍历每个成员

由于 Set 结构没有键名，只有键值（或者说键名和键值是同一个值），所以 keys() 方法和 values() 方法的行为完全一致。

注意，这里 key()、value()、entries() 方法返回的都是遍历器对象。

var s = new Set(['hehe','haha','xixi'])
for(let i of s.keys()){
  console.log(i)
}
// hehe
// haha 
// xixi
for(let i of s.values()){
  console.log(i)
}
// hehe
// haha 
// xixi
for(let i of s.entries()){
  console.log(i)
}
// ['hehe':'hehe']
// ['haha':'haha']
// ['xixi':'xixi']

又由于 Set 实例默认就是可遍历的，它的默认遍历器生成函数就是它的 values 方法。所以我们遍历的时候，可以省略 values() 方法，直接用 for...of 循环遍历 Set。

至于什么是可遍历的解构，我们将在下一部分详细介绍。这里只为了展示 Set 结构的遍历特性。

Set.prototype[Symbol.iterator] === Set.prototype.values
// true


var s = new Set(['hehe','haha','xixi'])
for(let i of s){   // 注意，这里并没有values()
  console.log(i)
}
// hehe
// haha 
// xixi

我们还可以通过 forEach() 来对 Set 结构进行遍历操作。

let s = new Set([1, 2, 3]);
s.forEach((value, key) => console.log(value + 10) )
// 11   12   13

此外，因为扩展运算符（...）内部使用 for...of 循环，所以我们还可以通过扩展运算符对Set结构进行遍历操作。

let s = new Set(['haha', 'xixi', 'hehe']);
console.log(...s);
// "haha" "xixi" "hehe"

---

Set 的实战小技巧

// 下面是快速去除数组重复元素
let arr = [1,3,4,2,1,2,3]
console.log(...new Set(arr))
// 1 3 2 4


let arr1 = [1,2,3]
let arr2 = [2,3,4]
let s1 = new Set(arr1)
let s2 = new Set(arr2)


// 快速合并两个数组并去除重复元素（并集）
console.log(...new Set([...s1, ...s2]))    // 1 2 3 4


// 快速实现两个数组的差集
let result = new Set([...s1].filter(x => !s2.has(x)))
console.log(...result)  // 1


// 快速实现两个数组的交集
let result = new Set([...s1].filter(x => s2.has(x)))
console.log(...result)  // 2 3

---

ES6 新特性梳理系列文章将在本号持续发布，一起查漏补缺学个痛快！若您有遇到其它相关问题，非常欢迎在评论中留言讨论，达到帮助更多人的目的。若感本文对您有所帮助请点个赞吧！

叶阳辉

HFun 前端攻城狮

往期精彩：

• ES6 新特性梳理系列丨Var + Let + Const 的区别与作用域

• ES6 新特性梳理系列丨变量的解构赋值

• ES6 新特性梳理系列丨Symbol - 新的数据类型