帶你入門 JavaScript ES6 (五) 集合

BetaRabbit 發(fā)布于2019-08-26 17:04 / 1793人閱讀

摘要：一概述集合是引入的新的內(nèi)置對(duì)象類型，其特點(diǎn)同數(shù)學(xué)意義的集合，即集合內(nèi)所有元素不重復(fù)元素唯一。數(shù)組集合對(duì)比數(shù)組和集合，數(shù)組可以加入重復(fù)數(shù)據(jù)，而集合的所有元素是唯一的不允許重復(fù)。因此，適合臨時(shí)存放一組對(duì)象，以及存放跟對(duì)象綁定的信息。

本文同步帶你入門 帶你入門 JavaScript ES6 (五) 集合，轉(zhuǎn)載請(qǐng)注明出處。

前面我們學(xué)習(xí)了：

for of 變量和擴(kuò)展語(yǔ)法

塊作用域變量和解構(gòu)

箭頭函數(shù)

類

本章我們將學(xué)習(xí) ES6 中的 Set(集合) 及 WeakSet 集合的相關(guān)用法及使用場(chǎng)景。

一、概述

Set 集合是 ES6 引入的新的內(nèi)置對(duì)象類型，其特點(diǎn)同數(shù)學(xué)意義的集合，即集合內(nèi)所有元素不重復(fù)(元素唯一)。

要了解 Set 集合，我們可以先看看數(shù)組，ES6 之前數(shù)組類似于數(shù)學(xué)意義上集合，但是差異在于數(shù)組元素值是可重復(fù)。

// 數(shù)組
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"}

對(duì)比數(shù)組 nums 和集合 sLang，數(shù)組可以加入重復(fù)數(shù)據(jù)，而集合的所有元素是唯一的不允許重復(fù)。

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

① 申明空集合

// 創(chuàng)建空集合
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"}

③ 語(yǔ)法

new Set([iterable]);

申明集合時(shí)，構(gòu)造函數(shù)里可選接收一個(gè)可迭代對(duì)象(iterable)。

目前支持可迭代協(xié)議的可迭代對(duì)象有 Array, [Map], Set, String, TypedArray, arguments對(duì)象等.

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

// 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) 及獲取集合元素個(gè)數(shù)

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

// 獲取個(gè)數(shù)
console.log(lang.size);// 4

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

2.2 迭代

Set 集合是一個(gè)可迭代的對(duì)象，所以可以使用 for of 進(jìn)行迭代獲取所有數(shù)據(jù)。

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

三、 WeakSet 集合

WeakSet 和普通的 Set 相似，不同點(diǎn)在于:

WeakSet 只能添加對(duì)象元素

WeakSet 無(wú)法迭代

沒有 clear() 方法

為什么沒有 clear 方法，阮一峰老師的 ES6 教程中有過解釋：

WeakSet 中的對(duì)象都是弱引用，即垃圾回收機(jī)制不考慮 WeakSet 對(duì)該對(duì)象的引用，也就是說(shuō)，如果其他對(duì)象都不再引用該對(duì)象，那么垃圾回收機(jī)制會(huì)自動(dòng)回收該對(duì)象所占用的內(nèi)存，不考慮該對(duì)象還存在于 WeakSet 之中。這是因?yàn)槔厥諜C(jī)制依賴引用計(jì)數(shù)，如果一個(gè)值的引用次數(shù)不為0，垃圾回收機(jī)制就不會(huì)釋放這塊內(nèi)存。結(jié)束使用該值之后，有時(shí)會(huì)忘記取消引用，導(dǎo)致內(nèi)存無(wú)法釋放，進(jìn)而可能會(huì)引發(fā)內(nèi)存泄漏。WeakSet 里面的引用，都不計(jì)入垃圾回收機(jī)制，所以就不存在這個(gè)問題。因此，WeakSet 適合臨時(shí)存放一組對(duì)象，以及存放跟對(duì)象綁定的信息。只要這些對(duì)象在外部消失，它在 WeakSet 里面的引用就會(huì)自動(dòng)消失。
由于上面這個(gè)特點(diǎn)，WeakSet 的成員是不適合引用的，因?yàn)樗鼤?huì)隨時(shí)消失。另外，由于 WeakSet 內(nèi)部有多少個(gè)成員，取決于垃圾回收機(jī)制有沒有運(yùn)行，運(yùn)行前后很可能成員個(gè)數(shù)是不一樣的，而垃圾回收機(jī)制何時(shí)運(yùn)行是不可預(yù)測(cè)的，因此 ES6 規(guī)定 WeakSet 不可遍歷。

參考資料

Set 對(duì)象

WeakSet 對(duì)象

Set 和 Map 數(shù)據(jù)結(jié)構(gòu)