乐趣区

关于javascript:理解数据结构之Set只要5分钟

jiezi

前言

初衷： 最近在读《深刻了解 Es6》这本书，之前没好好全面学过 Es6 语法，也是趁着不忙的阶段从新好好钻研一下整顿一下笔记分享给大家，不喜勿喷。

适宜人群：前端高级开发，大佬绕道。

内容构造：概念 -> 根本语法 -> 利用场景

在 Es6 之前，数组始终是 JavaScript 中惟一的汇合类型，不过有一些开发者们认为非数组对象的也是汇合，只不过是键值对汇合。然而在 Es6 之前，开发者们只能应用数组汇合，然而数组是用下标索引 index 取值，所以常常被用于创立队列和栈，如果开发者们要应用非数组索引汇合，就会应用对象字面量场景所需的构造。

Set 是什么

Set 是一个无反复元素的汇合，但不会像数组那样用索引值去拜访数组值，通常的做法是检测某个值是否存在这个汇合中。

为什么要出 Set

咱们来看两个案例解说一下为什么要出Set

案例一

let o = {}
let key1 = {}
let key2 = {}
o[key1] = "val"

console.log(o[key1]) // val
console.log(o[key2]) // val

下面 example 中，对象的键值都会转换为字符串 [object Object], 外部都会调用toString，所以不论应用key1 还是 key2 都会返回雷同的 val 值。

案例二

let o = {}
o.count = 1;
if (o.count) {console.log(o.count)
}

下面 example 中，存在两个问题是到底是判断有没有这个属性呢，还是检测值是否非零，如果对象这个值真的等于 0 那么这个判断就不会执行，如果呈现在大型项目中这种问题不容易被发现。（有的小伙伴可能认为，检测对象有没有这个属性谁这样写啊，能够应用 in 操作符或者getOwnProperty）心愿这里不要跟我杠啊！，只管能够应用，但要明确本文这里讲的是Set

那么咱们来说说 Set，Set 汇合是一个有序列表，外面不会呈现反复的值，惟一例外的是在 Set 中+0和 -0 是相等的。Set中也不会对所存储的值进行转换，如下面的 {} 间接转换为 [object Object] 在Set中不会存在这种状况，当然也包含数值类型和字符串类型 24 和"24"这两种也不会存在抵触。

let o = new Set()
let key1 = {}
let key2 = {}
o.add(key1)
o.add(key2)
console.log(o.size) // 2

下面 example 中，能够看到增加了 2 个对象 {}，size 是有 2 条数据也就是并没有被笼罩。上面咱们来认识一下它们的语法吧

根底语法

Set是一个构造函数，它参数接管所有可迭代对象(Iterator)，数组、字符串、Set 汇合等这些都是可迭代的。

增加元素

调用 new Set() 创立 Set 汇合，应用 add 办法给汇合里增加对象。

let o = new Set()
o.add(24)
o.add("24")
console.log(o.size) // 查看汇合的元素数量 2

下面这个 example，能够分明的看到 Set 汇合中是没有将键值强制转换为字符串的，不同类型和指针都会彼此独立。

下面咱们也说了 Set 汇合中不会从新反复值

let o = new Set()
o.add(24)
o.add(24) // 这一行代码则会疏忽，let arr = new Set([1,1,2,3,4,5,1])

下面 example 中，第二次跟第一个传入的值并且类型都一样，所以 Set 则会疏忽该代码不会增加到汇合中。看下方那个 arr 变量申明间接初始化了一些数组值，而这些外面数值反复的会间接过滤掉，在生成的时候会只有一个。

检测元素

调用 has 办法来检测汇合中是否存在某个值，返回值为 Boolean 值，汇合不能像数组那样获取索引值，在 Set 汇合中是没有 index 索引值的。

let o = new Set()
o.add("蛙人")
console.log(o.has("蛙人")) // true

移除元素

调用 delete 办法能够移除 Set 汇合中某一个元素，返回值返回 Boolean，也能够调用clear 办法将汇合中元素全副移除，clear办法没有返回值。

单个移除

let o = new Set()
o.add("蛙人")
o.delete("蛙人") // true
console.log(o.size) 0

全副移除

let o = new Set()
o.add("蛙人")
o.clear()
console.log(o.size) 0

Set 汇合应用 forEach 遍历

这里 Set 的 forEach 遍历和数组的 forEach 遍历应用办法截然不同，就是参数返回值有些不同。该 Set 办法的 forEach 也接管三个参数。

  • Set 汇合里索引地位
  • 与第一个参数一样的值
  • Set 汇合自身
let o = new Set(["蛙人", 24, "male"])
o.forEach((value, key, self) => {console.log(value, key, self) 
    // 蛙人 蛙人 set 对象
    // 24 24 set 对象
    // male male set 对象
})

下面 exmaple 中，只所以 forEach 第一个参数和第二个参数一样的起因是因为，Set对象中本没有索引值，所以它的索引值参数也是值，Es6 官网本能够去掉这个参数的，然而思考到怕开发者误会和传统的 forEach 不一样，所以就对立了参数。

利用场景

去重

let list = [1,3,1,2,3,5]
let o = new Set(list);
console.log(o) // 1 3 2 5

let newList = [...o] // 将遍历对象汇合转换为真数组

下面 example 中，咱们大部分场景下应用该办法都是去重，而后去重完在转换为真数组。

感激

谢谢各位在百忙之中点开这篇文章，心愿对你们能有所帮忙，如有问题欢送各位大佬斧正。

如果感觉写得还行的话，那就点个赞吧。

感兴趣的小伙伴能够退出 前端娱乐圈交换群 欢送大家一起来交换探讨

退出移动版