您当前的位置:首页 > 电脑百科 > 程序开发 > 语言 > javascript

一文了解 JavaScript 中的 Set(集合)

时间:2019-09-19 10:17:11  来源:  作者:

 

在写 Chrome插件时「插件分享,头条文章代码高亮,助力程序员文章分享」,刚好用到 Set 这个数据结构,所以这期就来谈谈 Set。

什么是 Set(集合)

Set 是 ES6 中新增的一种对象类型,它存储的是唯一值的集合。

也就是说,即使 Set 中存入相同的元素,也只会被保留一个。

一文了解 JavaScript 中的 Set(集合)

 

Set 的创建

Set 的创建有两种方法。

1.创建空集后填充元素

一文了解 JavaScript 中的 Set(集合)

 

也可以使用链式写法

一文了解 JavaScript 中的 Set(集合)

 

2.Set 构造函数传入可迭代对象

一文了解 JavaScript 中的 Set(集合)

 

需要注意,当接收字符串作为可迭代对象时,是逐个字符进行迭代。

一文了解 JavaScript 中的 Set(集合)

 

确定 Set 的大小

通过 .size ——

一文了解 JavaScript 中的 Set(集合)

 

扩展一下,为什么不是使用常见的 length?

根据 ECMA-262 规范,数据集合(collection)的形式分为两大类:

  • Indexed Collection(索引集合)
  • Keyed Collection(键集合)

像字符串、数组等属于索引集合。它们通过索引进行元素的访问。这种形式的集合使用 length 确定集合大小。

而像 Map(映射),Set(集合)等是属于键集合。它们通过键来进行元素的访问。这种形式的集合使用 size 来确定集合的大小。

Set 新增元素

通过 .add(),并且可以链式操作 ——

一文了解 JavaScript 中的 Set(集合)

 

Set 删除元素

通过 .delete() ——

一文了解 JavaScript 中的 Set(集合)

 

检查 Set 中是否存在某个元素

通过 .has() ——

一文了解 JavaScript 中的 Set(集合)

 

清空 Set 中元素

通过 .clear() ——

一文了解 JavaScript 中的 Set(集合)

 

Set 的迭代操作

Set 属于可迭代对象,迭代顺序是基于插入的顺序。所以,它也存在可迭代对象的一些方法。

1.遍历 Set

使用 .forEach()

一文了解 JavaScript 中的 Set(集合)

 

作为可迭代对象,也可以使用 for of 进行遍历

一文了解 JavaScript 中的 Set(集合)

 

2.迭代方法

根据 ECMA-262 定义,Set 的迭代过程类似于具有相同键值对的 Map。

For iteration purposes, a Set Appears similar to a Map where each entry has the same value for its key and value.

所以,Set 中的 .keys() 与 .values() 的 返回相同。均返回一个迭代器对象,包含 Set 中的按插入顺序排列的所有元素的值。

而键值对 .entries() 返回的迭代器对象,包含 Set 中的按插入顺序排列的所有元素的值的 [value, value] 数组。

一文了解 JavaScript 中的 Set(集合)

 

常用场景

数组去重

一文了解 JavaScript 中的 Set(集合)

 

除了这个使用场景外,日常中很少有使用 Set 的地方。

部分原因在于,与提供了很多内置方法的数组 Array 相比,Set 的内置方法还是偏少。例如:基本的交集,并集等操作都没有提供。

因此,下期我们就对 Set 进行一个扩展,手把手将它改造成更加实用的结构。不妨先收藏加关注。



Tags:JavaScript Set   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
在写 Chrome插件时「插件分享,头条文章代码高亮,助力程序员文章分享」,刚好用到 Set 这个数据结构,所以这期就来谈谈 Set。什么是 Set(集合)Set 是 ES6 中新增的一种对象类型,它存...【详细内容】
2019-09-19  Tags: JavaScript Set  点击:(187)  评论:(0)  加入收藏
▌简易百科推荐
1、通过条件判断给变量赋值布尔值的正确姿势// badif (a === 'a') { b = true} else { b = false}// goodb = a === 'a'2、在if中判断数组长度不为零...【详细内容】
2021-12-24  Mason程    Tags:JavaScript   点击:(6)  评论:(0)  加入收藏
给新手朋友分享我收藏的前端必备javascript已经写好的封装好的方法函数,直接可用。方法函数总计:41个;以下给大家介绍有35个,需要整体文档的朋友私信我,1、输入一个值,将其返回数...【详细内容】
2021-12-15  未来讲IT    Tags:JavaScript   点击:(20)  评论:(0)  加入收藏
1. 检测一个对象是不是纯对象,检测数据类型// 检测数据类型的方法封装(function () { var getProto = Object.getPrototypeOf; // 获取实列的原型对象。 var class2type =...【详细内容】
2021-12-08  前端明明    Tags:js   点击:(23)  评论:(0)  加入收藏
作者:一川来源:前端万有引力 1 写在前面Javascript中的apply、call、bind方法是前端代码开发中相当重要的概念,并且与this的指向密切相关。本篇文章我们将深入探讨这个关键词的...【详细内容】
2021-12-06  Nodejs开发    Tags:Javascript   点击:(19)  评论:(0)  加入收藏
概述DOM全称Document Object Model,即文档对象模型。是HTML和XML文档的编程接口,DOM将文档(HTML或XML)描绘成一个多节点构成的结构。使用JavaScript可以改变文档的结构、样式和...【详细内容】
2021-11-16  海人为记    Tags:DOM模型   点击:(35)  评论:(0)  加入收藏
入口函数 /*js加载完成事件*/ window.onload=function(){ console.log("页面和资源完全加载完毕"); } /*jQuery的ready函数*/ $(document).ready(function(){ co...【详细内容】
2021-11-12  codercyh的开发日记    Tags:jQuery   点击:(36)  评论:(0)  加入收藏
一、判断是否IE浏览器(支持判断IE11与edge)function IEVersion() {var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串var isIE = userAgent.indexOf("comp...【详细内容】
2021-11-02  V面包V    Tags:Javascript   点击:(40)  评论:(0)  加入收藏
Null、Undefined、空检查普通写法: if (username1 !== null || username1 !== undefined || username1 !== '') { let username = username1; }优化后...【详细内容】
2021-10-28  前端掘金    Tags:JavaScript   点击:(51)  评论:(0)  加入收藏
今天我们将尝试下花 1 分钟的时间简单地了解下什么是 JS 代理对象(proxies)?我们可以这样理解,JS 代理就相当于在对象的外层加了一层拦截,在拦截方法里我们可以自定义一些个性化...【详细内容】
2021-10-18  前端达人    Tags:JS   点击:(51)  评论:(0)  加入收藏
带有多个条件的 if 语句把多个值放在一个数组中,然后调用数组的 includes 方法。// bad if (x === "abc" || x === "def" || x === "ghi" || x === "jkl") { //logic } // be...【详细内容】
2021-09-27  羲和时代    Tags:JS   点击:(58)  评论:(0)  加入收藏
最新更新
栏目热门
栏目头条