理解数据结构之Set,只要5分钟!

前言

初衷: 最近在读《深入理解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


那么我们来说说SetSet集合是一个有序列表,里面不会出现重复的值,唯一例外的是在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中,我们大部分场景下使用该方法都是去重,然后去重完在转换为真数组。

感谢

谢谢各位在百忙之中点开这篇文章,希望对你们能有所帮助,如有问题欢迎各位大佬指正。

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

感兴趣的小伙伴可以加入 前端娱乐圈交流群 欢迎大家一起来交流讨论

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,884评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,347评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,435评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,509评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,611评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,837评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,987评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,730评论 0 267
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,194评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,525评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,664评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,334评论 4 330
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,944评论 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,764评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,997评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,389评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,554评论 2 349

推荐阅读更多精彩内容