啥时候应当使用ES6 Set?

你可能问,都2021年了,咋还在讨论Set基础知识?这不是Vue 3.0来了么,2021年就可以上生产了,Vue 2.0可以遍历Set,但是不支持响应式,现在3.0支持Set的响应式了,你说要不要开始学呢?

废话不说,跟数组做个对比。

Set优势方面

Set 数组
希望成员唯一 本身就是 需要排重
添加元素可链式操作 不能
根据值删除指定元素 简单 复杂

Set劣势方面

Set 数组
有序号下标
找出第N个元素 复杂 简单
原排序位置修改元素 无法直接修改,只能另定义Set重新存储 可以简单做到
数组的诸多方法 没有

Set无所谓优劣方面

Set 数组
长度 .size得出 .length得出
不考虑排序前提下修改元素 删除旧值,添加新值 查出下标,重新赋值

Set怎么判断成员唯一性

Set内部判断两个值是否不同,使用的算法叫做“Same-value-zero equality”,它类似于精确相等运算符(===),但区别是向Set加入值时认为NaN等于自身,而精确相等运算符认为NaN不等于自身。

Set的原生属性

  1. size,长度

Set的操作方法

  1. .add(value):添加某个值,返回 Set 结构本身。所以可以链式操作。

  2. .delete(value):删除某个值,返回一个布尔值,表示删除是否成功。这就比数组要牛逼,数组想删除特定值,必须先查出它的下标。

  3. .has(value):返回一个布尔值,表示该值是否为Set的成员。相当于数组的arr.includes(value)

  4. .clear():清除所有成员,没有返回值。相当于数组的arr.length = 0

Set的遍历方法

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

事实上Set的遍历方法都是模仿自Map,但是由于Set解构简单,所以这些方法都比较废。

比如.keys()跟.values()得到的结果永远一样,因为Set没有下标一说,键名就是键值。

如果打算遍历遍历器,倒不如用forEach直接遍历Set自身。

  1. .values():返回键值的遍历器。

不多说。

  1. .entries():返回键值对的遍历器
[...new Set([{},3,'5']).entries()]
// 得到
//0: (2) [{}, {}]
//1: (2) [3, 3]
//2: (2) ['5', '5']

这种数组有什么意义呢?可见.entries()实用价值也不大。

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

Set的唯一的一个有实用价值的遍历方法,由于键名就是键值,所以遍历起来比数组更简单,根本无需考虑下标。

Set的使用场合

  1. 储存不重复的数据。当添加重复数据的时候会存不上,依旧返回之前的Set。

  2. 实现数组去重。[...new Set([3,4,4,4,4,5])]得到[3,4,5]

  3. 只打算元素,不打算改元素,或者打算改元素但不在乎排序(或是原本就希望用先删后增来实现改),可以用Set。

  4. 很容易地实现并集(Union)、交集(Intersect)和差集(Difference)

let a = new Set([1, 2, 3]);
let b = new Set([4, 3, 2]);

// 并集
let union = new Set([...a, ...b]);
// Set {1, 2, 3, 4}

// 交集,原理是从Set a里找Set b里也有的元素
let intersect = new Set([...a].filter(x => b.has(x)));
// set {2, 3}

// (a 相对于 b 的)差集,原理是从Set a里找Set b里没有的元素
let difference = new Set([...a].filter(x => !b.has(x)));
// Set {1}

Vue 3拿Set当data存储列表数据是否适合?

Vue 3允许拿Set当data,所以可以在发挥Set优势的场合使用Set,通常用于业务代码,比如排重等,处理之后也支持在模板渲染。不过,服务器发回的对象数组就没必要特意转成Set了,因为我们要对这个对象数组进行复杂操作,Set对比并不擅长。

数组转Set

数组直接当参数传入new Set()即可。

Set转数组

最优雅的方式是解构:[...new Set([2,3,4,5])]

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