JavaScript下一版本标准ES6的Set集合使用详解

 更新时间:2023年02月19日 10:12:24   作者:尼羲  
ES6:全称ECMAScript 6.0,是JavaScript语言的国际标准,JavaScript是ECMAScript的实现。今天我们就来学习一下ES6的Set集合的使用

Set如果要用一句来描述,我们可以说: ​​​Set​​​是一种叫做集合的数据结构。

​什么是集合?

集合是由一堆无序的、相关联的,且不重复的内存结构【数学中称为元素】组成的组合。

​Set​​​是​​es6​​新增的数据结构,类似于数组,但是成员的值都是唯一的,没有重复的值,我们一般称为集合

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

const s = new Set();

增删改查

​Set​​的实例关于增删改查的方法:

  • add()
  • delete()
  • has()
  • clear()

add()

添加某个值,返回 ​​Set​​ 结构本身

当添加实例中已经存在的元素,​​set​​不会进行处理添加

s.add(1).add(2).add(2); // 2只被添加了一次

delete()

删除某个值,返回一个布尔值,表示删除是否成功

s.delete(1)

has()

返回一个布尔值,判断该值是否为​​Set​​的成员

s.has(2)

clear()

清除所有成员,没有返回值

s.clear()

遍历

​Set​​实例遍历的方法有如下:

关于遍历的方法,有如下:

  • keys():返回键名的遍历器
  • values():返回键值的遍历器
  • entries():返回键值对的遍历器
  • forEach():使用回调函数遍历每个成员

​Set​​的遍历顺序就是插入顺序

​keys​​方法、​​values​​方法、​​entries​​方法返回的都是遍历器对象

let set = new Set(['red', 'green', 'blue']);

for (let item of set.keys()) {
console.log(item);
}
// red
// green
// blue

for (let item of set.values()) {
console.log(item);
}
// red
// green
// blue

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

​forEach()​​用于对每个成员执行某种操作,没有返回值,键值、键名都相等,同样的​​forEach​​方法有第二个参数,用于绑定处理函数的​​this​

let set = new Set([1, 4, 9]);
set.forEach((value, key) => console.log(key + ' : ' + value))
// 1 : 1
// 4 : 4
// 9 : 9

扩展运算符和​​Set​​ 结构相结合实现数组或字符串去重

// 数组
let arr = [3, 5, 2, 2, 5, 5];
let unique = [...new Set(arr)]; // [3, 5, 2]

// 字符串
let str = "352255";
let unique = [...new Set(str)].join(""); // "352"

实现并集、交集、和差集

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}

// 交集
let intersect = new Set([...a].filter(x => b.has(x)));
// set {2, 3}

// (a 相对于 b 的)差集
let difference = new Set([...a].filter(x => !b.has(x)));
// Set {1}

到此这篇关于JavaScript下一版本标准ES6的Set集合使用详解的文章就介绍到这了,更多相关ES6的Set集合内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 如何处理JSON中的特殊字符

    如何处理JSON中的特殊字符

    这篇文章主要介绍了如何处理JSON中的特殊字符,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-11-11
  • JavaScript中有关一个数组中最大值和最小值及它们的下表的输出的解决办法

    JavaScript中有关一个数组中最大值和最小值及它们的下表的输出的解决办法

    这篇文章主要介绍了JavaScript中有关一个数组中最大值和最小值及它们的下表的输出的一种解决办法,本文还给大家介绍了js快速获取数组中最大值和最小值的方法,非常不错,需要的朋友可以参考下
    2016-07-07
  • JavaScript两种跨域技术全面介绍

    JavaScript两种跨域技术全面介绍

    JavaScript是一种在Web开发中经常使用的前端动态脚本技术。在JavaScript中,有一个很重要的安全性限制,被称为“Same-Origin Policy”(同源策略)
    2014-04-04
  • 微信小程序实现文字从右向左无限滚动

    微信小程序实现文字从右向左无限滚动

    这篇文章主要为大家详细介绍了微信小程序实现文字从右向左无限滚动,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-12-12
  • uni-app如何页面传参数的几种方法总结

    uni-app如何页面传参数的几种方法总结

    这篇文章主要介绍了uni-app如何页面传参数的几种方法总结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-04-04
  • js对数字的格式化使用说明

    js对数字的格式化使用说明

    Javascript也提供了对数字进行格式化输出的支持,需要的朋友可以参考下。
    2011-01-01
  • 使用JS实现图片轮播的实例(前后首尾相接)

    使用JS实现图片轮播的实例(前后首尾相接)

    下面小编就为大家带来一篇使用JS实现图片轮播的实例(前后首尾相接)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • JavaScript事件处理的方式(三种)

    JavaScript事件处理的方式(三种)

    最近这段时间因为每天要修改网站,为网站做特效,所以看了很多的js接触事件,自己只会使用一小部分,有时用的时候也比较混乱,现在系统的整理了一下,特此分享到脚本之家平台供大家参考下
    2016-04-04
  • JavaScript 实现完美兼容多浏览器的复制功能代码

    JavaScript 实现完美兼容多浏览器的复制功能代码

    这两天在做Web前端时,遇到需求通过js实现文本复制的功能。经过一番测试,终于实现了出来,有需要的小伙伴可以参考下。
    2015-04-04
  • javascript模拟实现计算器

    javascript模拟实现计算器

    这篇文章主要为大家详细介绍了javascript模拟实现计算器,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-04-04

最新评论