JavaScript：集合与数组，重要但你不知道的ES6数据类型

全文共3313字，预计学习时长10分钟

图源：Unsplash

Set（集合）对象类型于2015年在ECMAScript*规范中提出，可以在 Node.js和大部分浏览器中使用。

*ECMA是EuropeanComputer Manufacturers Association的缩写。

即欧洲计算机制造商协会，是制定信息传输与通讯的国际化标准组织。

ECMAScript是ECMA制定的标准化脚本语言。

集合和数组很像，但是还是存在一定差别。

本文旨在探讨这些差异，以及区别两者的不同用法。下面正式开始。

新概念，集合

集合是ES6中非常特殊的对象类型。创建一个如下的空集合：

const characters =new Set()

可以在集合的构造函数里传递iterable来填充它。iterable就是一种可以循环访问的对象，比如 Array（数组）或 String（字符串）。

const characters =new Set(['Rod', 'Todd', 'Sherri', 'Terri'])

值得信赖的主力，数组

数组是大多数JavaScript应用程序的主要板块，不论新旧。如果你以前编写过JavaScript，应该会对此比较熟悉。你可以写出类似的数组：

const characters =['Rod', 'Todd', 'Sherri', 'Terri']

所以重点是？

图源：Unsplash

这两种数据类型是相似的，但是要做的事情却略有不同。集合表示一组唯一的项，而数组的应用更为广泛。

有个很好的例子来表示集合，就像大学生的在一个学期的课程。他们可以修一门或多门课程，但是同一学期同一门课他们只能修一次。

const courses = newSet(['English', 'Science', 'Lego Robotics'])

const cards = [

'Machop',

'Diglett',

'Charmeleon',

'Machop',

'Squirtle'

]

另一方面，一组宝可梦卡牌就不是用于形容集合的好例子，因为这里面有重复。这种情况，用数组可以更好的表示数据。

const cards = [

'Machop',

'Diglett',

'Charmeleon',

'Machop',

'Squirtle'

]

重复的部分可以传输到集合中，但是他们不会被存入。将下面的代码复制到你的浏览器控制台，自己看看：

new Set([

'Machop',

'Diglett',

'Charmeleon',

'Machop',

'Squirtle'

])// Set(4) {"Machop", "Diglett", "Charmeleon","Squirtle"}

传递到集合的数组包括两个Machop，但是集合里只保留一份副本。这种行为非常微妙，但是很有用。

这有什么用？

假设你正在开发一个博客，想要添加一个功能，允许访问者搜索符合一个或多个类别匹配的文章。每个类别只使用一次。

如果你使用数组来代表活动类别列表，你就需要注意避免重复。这可以通过检查没添加类别的列表来实现。

类函数indexOf或includes可以应用于此：

// If our list doesnot include the category

if (!list.includes(category)) {

// Then add the new category to thelist

list.push(category)

}

我曾经发现自己一直在编写这类的代码，但是集合可以自动处理这些问题。你可以直接用类函数add，集合将始终独一无二。

// Just add thecategory to the list

// No need to perform any checks in advance!

list.add(category)

将集合转变回数组

我们已经知道，通过将数组传递到集合的构造函数中，数组可以转化为集合，但是集合是如何转化为数组的呢？

一种方法是静态地使用类函数from

const set = newSet(['Casablanca', 'The Wizard of Oz', 'Jaws'])

const arr = Array.from(set)

console.log(arr)// (3) ["Casablanca", "The Wizard of Oz","Jaws"]

ES6延展操作符是另一个选择：

const set = newSet(['Casablanca', 'The Wizard of Oz', 'Jaws'])

const arr = [...set]

console.log(arr)// (3) ["Casablanca", "The Wizard of Oz","Jaws"]

集合不支持诸如map,filter和reduce这些函数式编程方法，因此，将他们转换成数组更方便。

使用集合从数组中删除重复

即使更倾向于在数组中保存数据，集合依旧很有用。从数组中删除重复项的一个简便方法，就是将它转化为集合后再重新转化成数组。

const cards = [

'Machop',

'Diglett',

'Charmeleon',

'Machop',

'Squirtle'

]

const uniqueCards = [...new Set(cards)]

console.log(uniqueCards)// (4) ["Machop", "Diglett","Charmeleon", "Squirtle"]

如何辨别哪些值是唯一的？

图源：Unsplash

目前为止，已经知道集合如何只保留唯一的值，但这些唯一的值是怎么确定的呢？下面来讨论一下。

首先，让3这个值在集合里出现两次：

new Set([1, 2, 3, 4,3])// Set(4) {1, 2, 3, 4}

第二个3消失了。这和我们目前学到的内容是一致的，但是如果把3作为字符串添加会是什么样的呢？

new Set([1, 2, 3, 4,'3'])// Set(5) {1, 2, 3, 4, "3"}

有趣了。认为3和“3”是不同的。如果我们将匹配的数组加入集合会怎么样呢？

new Set([['JessePinkman'], ['Jesse Pinkman']])// Set(4) {['Jesse Pinkman'], ['Jesse Pinkman']}

在这种情况下，集合保留两个具有相同内容的数组。那么对象呢？

new Set([{name: 'RonBurgundy'}, {name: 'Ron Burgundy'}])// Set(2) {{name: 'Ron Burgundy'}, {name:'Ron Burgundy'}}

有匹配键和值的对象字面值，也被认为是不同的......

这该如何解释？

集合使用绝对相等strictequality (===)来确定哪些值是唯一的。这解释了为什么集合同时保留3（数字）和“3”（字符串）的副本。

这同样解释了，为什么数组和对象字面值相同，却被认为是唯一的。JavaScript通过他们的引用来比较对象，而不是他们的内容，而数组至少有特殊类型的对象。

总结

图源：Unsplash

集合为JavaScript开发者提供了新方法表示数据。数组仍然是JavaScript应用程序中通用的主力，集合则主要为了表示唯一的值的集合。

集合和数组之间的转换很容易。你可以使用集合来确保数据保持唯一，然后将其转化为数组，以便使用map、filter和reduce等函数。

集合使用绝对相等来比较值，并确定什么是唯一的。因为JavaScript通过引用比较对象，数组和对象字面值即使内容相同，也会被认为是唯一的。

本文重点讨论有关集合的概念。现在你应该知道了什么时候该用集合，什么时候用数组更好了吧？

留言点赞关注

我们一起分享AI学习与发展的干货
欢迎关注全平台AI垂类自媒体 “读芯术”

（添加小编微信：dxsxbb，加入读者圈，一起讨论最新鲜的人工智能科技哦～）

JavaScript：集合与数组，重要但你不知道的ES6数据类型相关推荐

es6删除数组某一项_JavaScript：集合与数组，重要但你不知道的ES6数据类型
全文共3313字,预计学习时长10分钟图源:Unsplash Set(集合)对象类型于2015年在ECMAScript*规范中提出,可以在 Node.js和大部分浏览器中使用. *ECMA是Euro ...
javascript 中的数据结构集合转数组，数组转集合等操作
数组与集合的转换数组转集合 let arr = ["A", "B", "C", "A", "C", ...
集合和数组的正确转换方式（可能有你不知道的坑哦）
文章目录一.集合转数组二.数组转集合 1. Arrays.asList(): 2. 正确的转换方式: 一.集合转数组 <阿里巴巴 Java 开发手册>中写道:使用集合转数组的方法,必须 ...
翻译连载 | 第 9 章：递归（下）－《JavaScript轻量级函数式编程》 |《你不知道的JS》姊妹篇...
为什么80%的码农都做不了架构师?>>> 原文地址:Functional-Light-JS 原文作者:Kyle Simpson-<You-Dont-Know-JS> ...
遍历JavaScript中的数组
在Java中,可以使用for循环遍历数组中的对象,如下所示: String[] myStringArray = {"Hello", "World"}; for ...
JavaScript中的数组和字符串
知识内容: 1.JavaScript中的数组 2.JavaScript中的字符串一.JavaScript中的数组 1.JavaScript中的数组是什么数组指的是数据的有序列表,每种语言基本上都有 ...
Javascript - 1 引入方式，变量常量，数据类型，运算符，流程控制，数组，函数，对象，DOM
Javascipt:是一门弱类型的脚本语言,需要在网页上执行. html负责框架结构,css负责样式修饰,js负责行为交互,动态效果. 前端三大件:html,css,js. javascript 和 ...
【JavaScript】类数组详解
[JavaScript]类数组详解文章目录 [JavaScript]类数组详解什么是类数组类数组转换成数组 ES6 的方法转数组 callee属性箭头函数没有arguments HTMLCol ...
翻译连载 | 第 10 章：异步的函数式（下）－《JavaScript轻量级函数式编程》 |《你不知道的JS》姊妹篇...
为什么80%的码农都做不了架构师?>>> 原文地址:Functional-Light-JS 原文作者:Kyle Simpson-<You-Dont-Know-JS> ...

JavaScript：集合与数组，重要但你不知道的ES6数据类型

JavaScript：集合与数组，重要但你不知道的ES6数据类型相关推荐

最新文章

热门文章