重学ES6 Set 数据结构(1)

Caicloud 发布于2019-05-22 19:25 / 2874人阅读

摘要：数据结构类似于数组，但是成员的值都是唯一的，没有重复。本身是一个构造函数，用来生成数据结构。函数接受一个数组或者具有接口的其他数据结构作为参数。遍历的应用扩展运算符内部使用循环，所以也可以用于结构。

Set数据结构类似于数组，但是成员的值都是唯一的，没有重复。

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

Set 结构不会添加重复的值。

const s = new Set();
[2,3,5,4,4,2,2].froEach(x => s.add(x));

for(let i of s) {
    console.log(i)
}
// 2 3 4 5

Set函数接受一个数组（或者具有 iterable接口的其他数据结构）作为参数。

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

// example 2
const items = new Set([1,2,3,4,5,5,5,5]);
items.size // 5

// example 3
function divs(){
    return [...document.querySelectorAll("div")]
}
const set = new Set(divs());
set.size // 60

//类似于
divs().forEach(div => set.add(div))

数组去重的方法 [...new Set(array)]

注意：向Set加入值时，不会发生类型转换，所以 5 和 “5” 是两个不同的值。Set内部判断两个值是否相同使用的算法叫做“Same-value equality”类似于“===”，主要区别在于 NaN等于自身，而精确相等认为 NaN 不等于自身。

另外，两个对象总是不相等的。

let set = new Set();
set.add({});
set.size // 1
set.add({})
set.size // 2

Set 实例的属性和方法

属性

Set.prototype.constructor: 构造函数

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

方法

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

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

has(value)：返回布尔值，表示参数是否为Set成员

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

// 对象写法
const properties = {
    "width" : 1,
    "height": 1
}

if(properties[someName]){
    // do something
}

//Set 写法
const properties = new Set();
properties.add("width");
properties.add("height");

if(properties.has(someName){
    // do something
}

Array.from方法将Set转化为数组。

const items = new Set([1,2,3,4,5]);
const array = Array.from(items);

// 去除数组重复元素的方法
function dedupe(array){
    return Array.from(new Set(array))
}

dedupe([1,2,3,3,2]); // [1,2,3]

遍历操作

keys()

values()

entries()

forEach()

特别指出：Set遍历顺序就是插入顺序。比如可以使用Set保存一个回调函数列表，调用时，就可以按照添加顺序来调用。

keys,values,entries 方法都是返回遍历器对象。由于Set没有键名，只有键值，（或者说是键名和键值是一样的），所以，keys和values方法的行为完全一致。

let set = new Set(["red","green","blue"]);
for(let item of set.keys()){
    console.log(item)
}
// red
// green
// blue

let set = new Set(["red","green","blue"]);
for(let item of set.values()){
    console.log(item)
}
// red
// green
// blue

let set = new Set(["red","green","blue"]);
for(let item of set.entries()){
    console.log(item)
}
// ["red","red"]
// ["green","green"]
// ["blue","blue"]

可以直接用 for ... of 循环遍历Set。

forEach()

set 结构的 forEach 对于每个成员执行操作，没有返回值。

let set = new Set([1,2,3])
set.forEach((value,key) => console.log(value * 2))

遍历的应用

扩展运算符(...)内部使用 for of 循环，所以也可以用于Set结构。

let set = new Set(["red","green","blue"])
let arr = [...set]
//["red","green","blue"]

扩展运算符(...)结合set，就可以进行数组去重

let arr = [1,2,3,2,5,3,4,5]
let unique = [... new Set(arr)]
// [1,2,3,4,5]

map和filter 也可以用于 Set

let set = new Set([1,2,3])
set = new Set([...set].map(x => x*2))
// set {2,4,6}

let set = new Set([1,2,3,4,5])
set = new Set([...set].filter(x => (x%2) == 0))

使用Set结构，很容易实现并集，交集，差集

let a = new Set([1,2,3])
let b = new Set([4,3,2])
//并集
let union = new Set([...a,...b])
//交集
let intersect = new Set([...a].filter(x => b.has(x)))
//差集
let difference = new Set([...a].filter(x => !b.has(x)))

如果想在遍历操作中，同步改变原来的Set结构，没有直接的办法。只能变通一下，一种是利用原来的Set结构映射一个新的结构，然后赋值给原来的Set结构，另一种就是Array.from

//1
let set = new Set([1,2,3])
set = new Set([...set].map(val => val*2)

//2
let set = new Set([1,2,3])
set = new Set(Array.from(set,val => val*2))

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/6867.html

重学前端学习笔记（九）--JavaScript中的对象分类

摘要：固有对象由标准规定，随着运行时创建而自动创建的对象实例。普通对象由语法构造器或者关键字定义类创建的对象，它能够被原型继承。笔记说明重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，每天10分钟，重构你的前端知识体系，笔者主要整理学习过程的一些要点笔记以及感悟，完整的可以加入winter的专栏学习【原文有winter的语音】，如有侵权请联系我，邮箱：ka...

ShowerSun 2019-08-02 16:16 评论0 收藏0
重学前端学习笔记（九）--JavaScript中的对象分类

摘要：固有对象由标准规定，随着运行时创建而自动创建的对象实例。普通对象由语法构造器或者关键字定义类创建的对象，它能够被原型继承。笔记说明重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，每天10分钟，重构你的前端知识体系，笔者主要整理学习过程的一些要点笔记以及感悟，完整的可以加入winter的专栏学习【原文有winter的语音】，如有侵权请联系我，邮箱：ka...

tinna 2019-08-30 10:48 评论0 收藏0
重学前端学习笔记（九）--JavaScript中的对象分类

摘要：固有对象由标准规定，随着运行时创建而自动创建的对象实例。普通对象由语法构造器或者关键字定义类创建的对象，它能够被原型继承。笔记说明重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，每天10分钟，重构你的前端知识体系，笔者主要整理学习过程的一些要点笔记以及感悟，完整的可以加入winter的专栏学习【原文有winter的语音】，如有侵权请联系我，邮箱：ka...

dantezhao 2019-08-23 17:20 评论0 收藏0
重学前端学习笔记（六）--JavaScript类型有哪些你不知道的细节？

摘要：的码点被称为基本字符区域。关于的介绍，我准备用文档阮一峰来做一些介绍，具体的可以参考文档引入的原因的对象属性名都是字符串，这容易造成属性名的冲突。其他的一些属性可以去看文档阮一峰注意函数前不能使用命令，否则会报错。笔记说明重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，每天10分钟，重构你的前端知识体系，笔者主要整理学习过程的一些要点笔记以及感悟，完...

Lsnsh 2019-08-02 16:15 评论0 收藏0