ES6 - Set

stefan 发布于2019-08-26 10:23 / 3402人阅读

摘要：之前，数组是里面的唯一一个集合对象。没有重复的元素的列表。而的元素是一个个的键值对。在后面的内容，我们可以看到怎样为它添加元素。这是区别于普通对象的地方一般的对象，数值型的属性名会被强制转换为字符串型但是不会。

ES6之前，数组是javaScript里面的唯一一个集合对象。如果你接触过其他编程语言，可能会知道用来表示集合的数据结构往往还有两种：Set和Map。
Set没有重复的元素的列表。而Map的元素是一个个的键值对。这一篇我们只说Set，Map会另起一篇文章。接下来我们就来看看Set的相关知识：
一：创建Set
1: 通过new Set()创建一个空列表

let set = new Set();

以上我们就成功地创建好了一个Set列表，只是它暂时没有任何元素。在后面的内容，我们可以看到怎样为它添加元素。

2: 以一个可迭代对象初始化列表

let array = [1, 2];
let map = new Map([["name", "mike"],["age", 25]]);
let setOfArray = new Set(array);
let setOfMap = new Set(map);

setOfArray.forEach(function (value, key, set) {
    console.log(`${key}: ${value}`);
});

setOfMap.forEach(function (value, key, set) {
    console.log(`${key}: ${value}`);
});

以上例子里面的setOfArray.forEach()我们得到的打印结果是：

1: 1
2: 2

从这个打印结果，我们也可以看得出来，Set元素的key和value是同一个值。

以上例子里面的setOfMap.forEach()我们得到的打印结果是：

name,mike: name,mike
age,25: age,25

虽然我们可以用Map初始化一个Set，但是显然这么做没什么意义。通常我们还是更多会使用Array。
二：Set的增
当我们通过给new Set()不传递任何参数而创建一个空Set之后，一般还需要通过add()方法来添加元素：

let set = new Set();
set.add(1);
set.add("1");
console.log(set.size); // 2

在上面的例子里，我们分别添加了数字型的和字符串形的1，最终我们得到两个元素。这是Set区别于普通对象的地方：一般的对象，数值型的属性名会被强制转换为字符串型；但是Set不会。

三：Set的删
想要删除Set里面的所有元素，只需要调用clear()方法：

let set = new Set([1, 2, 3]);
set.clear();
console.log(set.size); // 0

四：Set的查
我们可以通过has()方法来查询某个元素是否在Set集合里面：

let set = new Set([1, 2, 3]);
console.log(set.has(1)); //true
console.log(set.has("1"));//false

五：Set的减
delete()方法可用于从Set集合里面除去某个元素：

let set = new Set([1, 2, 3]);
set.delete(1);
console.log(set.has(1)); //fasle
console.log(set.size); // 2

七：Set的使用场景
从前面的文章中我们陆陆续续了解到了Set集合的一些重要特性，比如：

1: Set没有重复元素
2: Set元素的key和value为同一值
3: 我们可以使用可迭代对象初始化Set

根据这些特性，我们可以实现Array的去重。基本的思路就是：

1: 要处理的Array集合作为参数来初始化Set集合，这时我们得到一个没有重复元素的Set
2: 通过展开运算符(...), 把第一步得到的Set集合转换为一个数组

代码示例：

let originalArray = [1, 1, 2, 2, 3, 4];
let set = new Set(originalArray);
let newArray = [...set];
console.log(newArray); // [1, 2, 3, 4]

以上，就是Set的一些基本特性，语法和使用场景。

混合云私有云 ES6 es6-系列 ES6入门 es6 js

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/106097.html

ES6引入的数据结构 - ES6 - ECMAScript特性 - Javascript核心

摘要：引入的数据结构新加入的数据类型有这些数据结构的支持并不广泛，在写这篇文章的时候。是或其他可枚举的对象，其每个元素是的元数组。开头的和不对持有引用，不影响。因此，他们没有办法对自身的进行直接的枚举。目前新版的和支持。原文：http://pij.robinqu.me/JavaScript_Core/ECMAScript/es6/es6_data_types.html 源代...

fobnn 2019-08-19 14:50 评论0 收藏0
深入理解ES6笔记（七）Set集合和Map集合

摘要：创建并添加项目可以使用数组来初始化一个，并且构造器会确保不重复地使用这些值使用方法来测试某个值是否存在于中移除值使用方法来移除单个值，或调用方法来将所有值从中移除。属性的初始化将数组传递给构造器，以便使用数据来初始化一个。主要知识点：Set的基本操作，Weak Set，Map的基本操作，Weak MapshowImg(https://segmentfault.com/img/bVbf...

loostudy 2019-08-23 11:26 评论0 收藏0
带你入门 JavaScript ES6 (五) 集合

摘要：一概述集合是引入的新的内置对象类型，其特点同数学意义的集合，即集合内所有元素不重复元素唯一。数组集合对比数组和集合，数组可以加入重复数据，而集合的所有元素是唯一的不允许重复。因此，适合临时存放一组对象，以及存放跟对象绑定的信息。本文同步带你入门带你入门 JavaScript ES6 (五) 集合，转载请注明出处。前面我们学习了： for of 变量和扩展语法块作用域变量和解构...

BetaRabbit 2019-08-26 17:04 评论0 收藏0
深入理解：ES6中的Set和Map数据结构，Map与其它数据结构的互相转换

摘要：学习笔记工作中常用到的语法只是简单提及和，今天有空于是写了这篇文章深入理解中的和数据结构，与其它数据结构的互相转换。的提供了新的数据结构。本身是一个构造函数，用来生成数据结构。文中的内容主要是来自于阮一峰的《ES6标准入门》（第三版）。《学习ES6笔记──工作中常用到的ES6语法》只是简单提及Set和Map，今天有空于是写了这篇文章──《深入理解：ES6中的Set和Map数据结构，M...

Cristalven 2019-08-23 12:00 评论0 收藏0
ES6的Set数据结构

摘要：本身是一个构造函数，用来生成数据结构可以接受一个数组或者类数组对象作为参数，用来初始化可用于数组去重方法可以将结构转换为数组向加入值时，不会发生类型转换类似于精确相等，但是要注意在里是等于自身的。 ES6：Set 大神地址：来自阮一峰大神的ES6入门书籍了解Set ES6提供了数据结构Set。类似于数组，但是没有重复值。 Set本身是一个构造函数，用来生成Set数据结构 const ...

hiyayiji 2019-08-20 15:19 评论0 收藏0
ES6-前世今生（0）

摘要：更新了个版本，最新正式版是语言的下一代标准，早已在年月正式发布。基本不支持移动端浏览器对的支持情况版起便可以支持的新特性。比较通用的工具方案有，，，等。 1、ECMAScript是什么？和 JavaScript 有着怎样的关系？ 1996 年 11 月，Netscape 创造了javascript并将其提交给了标准化组织 ECMA，次年，ECMA 发布 262 号标准文件（ECMA-...

LeviDing 2019-08-26 13:41 评论0 收藏0