带你入门 JavaScript ES6 (五) 集合

BetaRabbit 发布于2019-08-26 17:04 / 1611人阅读

摘要：一概述集合是引入的新的内置对象类型，其特点同数学意义的集合，即集合内所有元素不重复元素唯一。数组集合对比数组和集合，数组可以加入重复数据，而集合的所有元素是唯一的不允许重复。因此，适合临时存放一组对象，以及存放跟对象绑定的信息。

本文同步带你入门 带你入门 JavaScript ES6 (五) 集合，转载请注明出处。

前面我们学习了：

for of 变量和扩展语法

块作用域变量和解构

箭头函数

类

本章我们将学习 ES6 中的 Set(集合) 及 WeakSet 集合的相关用法及使用场景。

一、概述

Set 集合是 ES6 引入的新的内置对象类型，其特点同数学意义的集合，即集合内所有元素不重复(元素唯一)。

要了解 Set 集合，我们可以先看看数组，ES6 之前数组类似于数学意义上集合，但是差异在于数组元素值是可重复。

// 数组
let nums = [1, 2, 3, 4, 5]
console.log(nums)// [1, 2, 3, 4, 5]

nums.push(1)
console.log(nums)// [1, 2, 3, 4, 5, 1]

// 集合
let sLang = new Set(["javascript", "java", "c++", "php", "javascript"])
console.log(sLang)//  Set {"javascript", "java", "c++", "php"}

对比数组 nums 和集合 sLang，数组可以加入重复数据，而集合的所有元素是唯一的不允许重复。

二、Set 集合常用操作 2.1 初始化

① 申明空集合

// 创建空集合
let s = new Set();
console.log(s)// Set {}

s.add("php")
console.log(s)//Set {"php"}

② 申明初始值集合

let s = new Set(["php", "javascript"])
console.log(s)// Set {"php", "javascript"}

③ 语法

new Set([iterable]);

申明集合时，构造函数里可选接收一个可迭代对象(iterable)。

目前支持可迭代协议的可迭代对象有 Array, [Map], Set, String, TypedArray, arguments对象等.

所以一下初始化都是合法的

// string
let str = new Set("name")
console.log(str)// Set {"n", "a", "m", "e"}

// set
let strSet = new Set(str)
console.log(strSet)// Set {"n", "a", "m", "e"}

// array
let nums = new Set([1, 2, 3])
console.log(nums)// Set {1, 2, 3}

//arguments
function add(...nums) {
    let args =  new Set(arguments)
    return args
}

console.log(add(1));// Set {1}
console.log(add(1, 2));// Set {1, 2}

2.1 集合操作

常见的操作有添加(add)、删除(delete)、清空(clear)、判断是否存在(has)、获取所有值(values) 及获取集合元素个数

let lang = new Set(["javascript", "java", "c++", "php", "javascript"])
console.log(lang)// Set {"javascript", "java", "c++", "php"}

// add
lang.add("ruby")
console.log(lang)// Set {"javascript", "java", "c++", "php", "ruby"}

// delete
lang.delete("java")
console.log(lang)// Set {"javascript", "c++", "php", "ruby"}

// 判断是否存在 python，javascript
console.log(`has python: ${lang.has("python")}`)// has python: false
console.log(`has javascript: ${lang.has("javascript")}`)// has javascript: true

// 获取所有元素
console.log(lang.values()) // SetIterator {"javascript", "c++", "php", "ruby"}
console.log(lang.keys()) // SetIterator {"javascript", "c++", "php", "ruby"}

// 获取个数
console.log(lang.size);// 4

// 清空
lang.clear()
console.log(lang);// Set {}

2.2 迭代

Set 集合是一个可迭代的对象，所以可以使用 for of 进行迭代获取所有数据。

let lang = new Set(["javascript", "java", "c++", "php", "javascript"])
for (let l of lang) {
    console.log(l);
}

三、 WeakSet 集合

WeakSet 和普通的 Set 相似，不同点在于:

WeakSet 只能添加对象元素

WeakSet 无法迭代

没有 clear() 方法

为什么没有 clear 方法，阮一峰老师的 ES6 教程中有过解释：

WeakSet 中的对象都是弱引用，即垃圾回收机制不考虑 WeakSet 对该对象的引用，也就是说，如果其他对象都不再引用该对象，那么垃圾回收机制会自动回收该对象所占用的内存，不考虑该对象还存在于 WeakSet 之中。

这是因为垃圾回收机制依赖引用计数，如果一个值的引用次数不为0，垃圾回收机制就不会释放这块内存。结束使用该值之后，有时会忘记取消引用，导致内存无法释放，进而可能会引发内存泄漏。WeakSet 里面的引用，都不计入垃圾回收机制，所以就不存在这个问题。因此，WeakSet 适合临时存放一组对象，以及存放跟对象绑定的信息。只要这些对象在外部消失，它在 WeakSet 里面的引用就会自动消失。

由于上面这个特点，WeakSet 的成员是不适合引用的，因为它会随时消失。另外，由于 WeakSet 内部有多少个成员，取决于垃圾回收机制有没有运行，运行前后很可能成员个数是不一样的，而垃圾回收机制何时运行是不可预测的，因此 ES6 规定 WeakSet 不可遍历。

参考资料

Set 对象

WeakSet 对象

Set 和 Map 数据结构

私有云专线服务 ES6入门 javascript集合 javascript的集合 javascript入门

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

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

带你玩转 JavaScript ES6 (六) - Map 映射

摘要：初始化申明一个设置和获取值使用设置新值或更新值申明设置值张三丰张三丰重复设置值如果键值存在则新值替换旧值张三丰使用获取值，如果获取的不存在返回分别获取判断是否存在使用判断给定是否存在映射内。本文同步带你入门带你玩转 JavaScript ES6 (六) - Map 映射，转载请注明出处。本章我们讲学习 ES6 中的 Map(映射)。上一章节我们学习了 [Set(集合)]()的相关...

acrazing 2019-08-22 14:02 评论0 收藏0
带你入门 JavaScript ES6 (四)

摘要：方法如示例中定义的方法静态方法使用关键字修饰的方法，允许通过类名直接调用静态方法而无需实例化。本文同步带你入门 JavaScript ES6 (四)，转载请注明出处。前面我们学习了： for of 变量和扩展语法块作用域变量和解构箭头函数本章我们将学习 ES6 中的类，了解类基本定义和继承相关知识一、概述 ES6 中的类是基于原型的继承语法糖，本质上它是一个 fu...

he_xd 2019-08-21 18:40 评论0 收藏0
带你入门 JavaScript ES6 (一)

摘要：是国际组织于年月日发布的第六版，正式名为通常被成为或。二模版字面量提供一种简单实现表达式嵌套的字符串字面量操作，简而言之就是能够以简单的方法实现字符串拼接操作。本文同步带你入门 JavaScript ES6 (一)，转载请注明出处。 ES6: 是 ECMA国际组织于 2015 年 6 月 17 日发布的 ECMAScript 第六版，正式名为 ECMAScript 2015,通常被...

lindroid 2019-08-21 18:24 评论0 收藏0
带你入门 JavaScript ES6 (二)

摘要：上一篇学习下一代语法一，我们学习了关于块作用域变量或常量声明和语法新的字符串拼接语法模版字面量数组元素或对象元素的解构赋值和对象字面量简写的相关知识。这便是扩展运算符的用途之一。本文同步带你入门 JavaScript ES6 (二)，转载请注明出处。上一篇学习下一代 JavaScript 语法: ES6 (一)，我们学习了关于块作用域变量或常量声明 let 和 const 语法、...

chanthuang 2019-08-21 18:26 评论0 收藏0
带你入门 JavaScript ES6 (三)

摘要：上一章我们学习了遍历和扩展字符语法。本章我们主要学习中的箭头函数箭头函数更准确来说叫箭头函数表达式。箭头函数余普通函数功能相同，但语法差别比较大。带你入门 JavaScript ES6 (三) 本文同步带你入门 JavaScript ES6 (三)，转载请注明出处。上一章我们学习了 for of 遍历和扩展字符语法。本章我们主要学习 ES6 中的箭头函数箭头函数更准确来说叫箭...

刘福 2019-08-21 18:35 评论0 收藏0