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

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

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']

所以重点是？

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

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

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"]

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

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

首先，让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通过他们的引用来比较对象，而不是他们的内容，而数组至少有特殊类型的对象。

总结

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

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

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

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

留言点赞关注

我们一起分享AI学习与发展的干货

如转载，请后台留言，遵守转载规范