摘要:的默認遍歷器是另外這里需要格外強調(diào)的是中的方法是判斷鍵值是否存在的,如中的方法是判斷鍵名是否存在的,如解構(gòu)轉(zhuǎn)換技巧轉(zhuǎn)轉(zhuǎn)為防止不必要的錯誤,直接丟棄不是字符串為鍵的屬性轉(zhuǎn)和類似,不過它只接受對象作為鍵名,除外。
Set
Set 是一種集合結(jié)構(gòu),特征和數(shù)學中的一致,具有以下特征:
同一個集合中不能有相同元素
set 可以存放不同類型的數(shù)據(jù)
但使用過程中請注意以下幾點:
存入 set 的數(shù)據(jù)不會進行類型轉(zhuǎn)換,即"5"和 5 是不一樣的
內(nèi)部采用嚴格相等比較元素,但-0等于+0,NaN也等于NaN
定義聚合和定義其他數(shù)據(jù)結(jié)構(gòu)一樣,其構(gòu)造函數(shù)接受一個數(shù)組,集合或類數(shù)組對象初始化:
var set1 = new Set(); var set2 = new Set([1,2,3,3,4,4,5]); console.log(set1); //Set(0) {} console.log(set2); //Set(5) {1, 2, 3, 4, 5}
Set結(jié)構(gòu)具有以下屬性和方法,由于和數(shù)組方法基本一致,不細細列舉
size屬性: 當前集合的元素數(shù)量,相當于數(shù)組熟悉的length
constructor屬性: Set()
add()方法: 相當于數(shù)組的push()方法,但只能接受一個參數(shù)
delete()方法: 刪除集合中的一個值
has()方法: 判斷數(shù)組的中是否含有某個值
clear()方法: 清空當前數(shù)組
keys()方法: 返回鍵名的遍歷器,和數(shù)組keys()方法一樣
values()方法: 返回值的遍歷器,和數(shù)組values()方法一樣
entires()方法: 返回鍵值對的遍歷器,和數(shù)組entires()方法一樣
forEach()方法: 使用回調(diào)函數(shù)遍歷集合成員,和數(shù)組forEach()方法一樣
map()方法: 相當于數(shù)組的map()方法
filter()方法: 相當于數(shù)組的filter()方法
Set的默認遍歷器遍歷的是值:
Set.prototype[Symbol.iterator] === Set.prototype.values; //true
集合運算:
并集
var a = new Set([1,2,3]); var b = new Set([2,4,5]); var union = new Set([...a, ...b]); //[1,2,3,4,5]
交集
var a = new Set([1,2,3]); var b = new Set([2,4,5]); var intersect = new Set([...a].filter(item => b.has(item))); //[2]
差集
var a = new Set([1,2,3]); var b = new Set([2,4,5]); var diffsect = new Set([...a].filter(item => !b.has(item))); //[1,3]WeakSet
WeakSet 和 Set類似,但是具有以下區(qū)別:
WeakSet 的元素只能是對象,不能是別的類型
WeakSet 的元素無法被引用,其元素不具有別的引用時,GC 會立刻釋放對象的內(nèi)存資源,因此 WeakSet 不能被遍歷。
定義WeakSet和定義其他數(shù)據(jù)結(jié)構(gòu)一樣,其構(gòu)造函數(shù)接受一個數(shù)組,集合或類數(shù)組對象初始化:
var set1 = new WeakSet(); var set2 = new WeakSet([[1,2],[3,3],[4,4,5]]); console.log(set1); //WeakSet(0) {} console.log(set2); //WeakSet {(2) [1, 2], (2) [3, 3], (3) [4, 4, 5]}
WeakSet 沒有 size 屬性,有如下3個方法:
add()方法: 相當于數(shù)組的push()方法,但只能接受一個參數(shù)
delete()方法: 刪除集合中的一個值
has()方法: 判斷數(shù)組的中是否含有某個值
WeakSet 不能遍歷,它的作用是臨時存儲DOM節(jié)點,這樣不必擔心內(nèi)存泄漏:
//例 const foos = new WeakSet(); class Foo{ constructor(){ foos.add(this); } method(){ if(!foos.has(this)){ throw new TypeError(`"foo.prototype.method" is only called by object of Foo`); } console.log(`"Foo.prototype.method" has been called`); } } var obj = new Foo(); obj.method(); //Foo.prototype.method" has been called obj.method.call({}); //typeError: "foo.prototype.method" is only called by object of FooMap
js 中的對象是鍵值對的集合,但是鍵只能是字符串其實并不方便。Map結(jié)構(gòu)本質(zhì)和對象一樣,只是鍵名可以使用各種類型的值。如果這么理解,那么Map就是一種值-值對而不是鍵-值對,這一點類似hash結(jié)構(gòu):
var o = {name: "Bob"}; var map = new Map(); map.set(o, "hello"); console.log(map.get(o)); //"hello"
構(gòu)造 Map 結(jié)構(gòu)的構(gòu)造函數(shù)接受數(shù)組,對象等類型作為構(gòu)造函數(shù)的參數(shù):
var map = new Map([["name","Bob"], ["age", 12]]); map.get("name"); //"Bob" map.get("age"); //12
map具有如下屬性和方法:
size 屬性: 返回 map 中元素的數(shù)量,類似數(shù)組的 length
set(key, value)方法: 向map中添加值-值對
get(key)方法: 讀取map中的值
delete(key, value)方法: 刪除map中的值-值對
has(key)方法: 判斷某個鍵名是否存在
clear()方法: 清空當前 map 中所以數(shù)據(jù)
keys()方法: 返回鍵名的遍歷器,和數(shù)組keys()方法類似,用于 for...of 循環(huán)
values()方法: 返回值的遍歷器,和數(shù)組values()方法類似,用于 for...of 循環(huán)
entires()方法: 返回值-值對的遍歷器,和數(shù)組entires()方法類似,用于 for...of 循環(huán)
forEach()方法: 使用回調(diào)函數(shù)遍歷集合成員,和數(shù)組forEach()方法類似
var o = {name: "Bob"}; var map = new Map(); map.set(o, "hello"); console.log(map.get(o)); //"hello" map.set(o, "world"); //重復定義,覆蓋之前的定義 console.log(map.get(o)); //"world" console.log(map.get({name: "Bob"})); //undefined, 不同的對象引用不認為是同一個對象 map.delete(o); //刪除對象屬性 o console.log(map.get(o)); //undefined
從上方的例子不難發(fā)現(xiàn),不同的對象屬性對于 map 來說就是不同的,不管內(nèi)部的內(nèi)容是否一致。這和對象的 === 比較是一樣的道理,帶來的好處是我們不用擔心和會 map 原有屬性重名,而直接向 map 添加對象屬性即可。
注意 undefined,NaN和 null 也可以作為 map 的鍵名
var map = new Map(); map.set(undefined, 1); map.set(null, 2); map.set(NaN, 3); console.log(map.get(undefined)); //1 console.log(map.get(null)); //2 console.log(map.get(NaN)); //3
但使用過程中請注意以下幾點:
存入 map 的數(shù)據(jù)不會進行類型轉(zhuǎn)換,即"5"和 5 是不一樣的, {} 和 {}也是不一樣的。
內(nèi)部采用嚴格相等比較元素,但-0等于+0,NaN也等于NaN。
map 的默認遍歷器是 entries()
Map.prototype[Symbol.iterator] === Map.prototype.entries; //true
另外這里需要格外強調(diào)的是:
Set中的 has 方法是判斷鍵值是否存在的,如 Set.prototype.has(value), WeakSet.prototype.has(value)
Map中的 has 方法是判斷鍵名是否存在的,如 Map.prototype.has(key), WeakMap.prototype.has(key), Reflect.has(target, propertyKey)
Map解構(gòu)轉(zhuǎn)換技巧:
Map 轉(zhuǎn) Array
var map = new Map([[1,"one"], [2, "two"], [3, "three"]]); var keyArr = [...map.keys()]; //[1,2,3] var valueArr = [...map.values()]; //["one","two","three"] var entriesArr = [...map.entries()]; //[[1,"one"], [2, "two"], [3, "three"]] var arr = [...map]; //[[1,"one"], [2, "two"], [3, "three"]]
Map 轉(zhuǎn) Object(為防止不必要的錯誤,直接丟棄不是字符串為鍵的屬性)
function map2arr(map){ var o = {}; for(let [key, value] of map.entries()){ if(typeof key === "string"){ o[key] = value; } } return o; } var map = new Map([[1,"one"], [2, "two"], ["three", 3], ["four", 4]]); map2arr(map); //Object {three: 3, four: 4}
Map 轉(zhuǎn) JSON
var map = new Map([[1,"one"], [2, "two"], ["three", 3], ["four", 4]]); JSON.stringify([...map]); //"[[1,"one"],[2,"two"],["three",3],["four",4]]"WeakMap
WeakMap 和 map 類似,不過它只接受對象作為鍵名,null除外。試想,如果對象 o 是一個 map的屬性,如果該對象被釋放了,那這個 map 屬性會導致內(nèi)存溢出。解決這個問題就是使用 WeakMap:
var o = {name: "Bob"}; var map = new WeakMap(); map.set(o, 12); console.log(map.get(o)); //12 o = null; console.log(map.get(o)); //undefined
WeakMap的對象屬性名,不計入 GC,所以當對象不存在的時候,這個 weakmap 中相應(yīng)的鍵值對就被刪除了。值得一提的是,代碼對于 map 可以得到一樣的輸出。那是因為最后一行相當于console.log(map.get(null)), 我們沒有定義 null 對應(yīng)的值,所以得到 undefined, 其實內(nèi)存泄露的隱患依然存在:
var o = {name: "Bob"}; var map = new Map(); map.set(o, 12); console.log(map.get(o)); //12 o = null; console.log(map.size); //1
WeakMap 和 WeakSet 類似,由于不計入 GC 回收機制,所以不支持遍歷操作,也不支持被清空,所以 WeakMap 只有以下 4 個方法,沒有 size 屬性:
set(key, value)方法: 向weakMap中添加值-值對
get(key)方法: 讀取map中的值
delete(key, value)方法: 刪除weakMap中的值-值對
has(key)方法: 判斷某個鍵名是否存在
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/97446.html
摘要:由于中引入了許多數(shù)據(jù)結(jié)構(gòu)算上原有的包括等等數(shù)組需要一個東西來管理他們這就是遍歷器。數(shù)組默認遍歷器遍歷值相當于依次輸出依次輸出依次輸出依次輸出不難看出默認得到值而只能得到索引。即遍歷器的本質(zhì)就是一個指針。 由于 ES6 中引入了許多數(shù)據(jù)結(jié)構(gòu), 算上原有的包括Object, Array, TypedArray, DataView, buffer, Map, WeakMap, Set, We...
摘要:解構(gòu)賦值解構(gòu)賦值簡單來說就是對應(yīng)位置數(shù)組或?qū)?yīng)鍵名對象的變量匹配過程。字符串集合使用結(jié)構(gòu)賦值實現(xiàn)疊加并交換變量對象的解構(gòu)賦值對象的解構(gòu)賦值與變量位置次序無關(guān)只取決于鍵名是否嚴格相等。 解構(gòu)賦值 解構(gòu)賦值簡單來說就是 對應(yīng)位置(數(shù)組)或?qū)?yīng)鍵名(對象)的變量匹配過程。如果匹配失敗, 對于一般變量匹配不到結(jié)果就是 undefined, 對于具有展開運算符(...)的變量結(jié)果就是空數(shù)組。 數(shù)...
摘要:一簡介與的關(guān)系是的規(guī)格,是的一種實現(xiàn)另外的方言還有和轉(zhuǎn)碼器命令行環(huán)境安裝直接運行代碼命令將轉(zhuǎn)換成命令瀏覽器環(huán)境加入,代碼用環(huán)境安裝,,根目錄建立文件加載為的一個鉤子設(shè)置完文件后,在應(yīng)用入口加入若有使用,等全局對象及上方法安裝 一、ECMAScript6 簡介 (1) 與JavaScript的關(guān)系 ES是JS的規(guī)格,JS是ES的一種實現(xiàn)(另外的ECMAScript方言還有Jscript和...
摘要:數(shù)組的解構(gòu)賦值允許按照一定模式,從數(shù)組和對象中提取值,對變量進行賦值,這被稱為解構(gòu)。如果變量名與屬性名不一致,必須寫成下面這樣。 1 數(shù)組的解構(gòu)賦值 ES6允許按照一定模式,從數(shù)組和對象中提取值,對變量進行賦值,這被稱為解構(gòu)(Destructuring)。 基本用法 { var [a,[b,c],d,,...f] = [1,[2,3],4,5,6,7]; console...
摘要:原來的也被修改了數(shù)組實例的喝方法,用于找出第一個符合條件的數(shù)組成員。它的參數(shù)是一個回調(diào)函數(shù),所有數(shù)組成員依次執(zhí)行該回調(diào)函數(shù),直到找出第一個返回值為的成員,然后返回該成員。數(shù)組實例的方法使用給定值,填充一個數(shù)組。 1 Array.from() Array.from方法用于將兩類對象轉(zhuǎn)為真正的數(shù)組:類似數(shù)組的對象(array-like object)和可遍歷(iterable)的對象(包括...
閱讀 3839·2021-10-12 10:12
閱讀 1471·2021-10-11 10:58
閱讀 2307·2021-10-09 10:01
閱讀 2617·2021-09-24 09:48
閱讀 2713·2021-09-09 11:38
閱讀 3538·2019-08-30 15:44
閱讀 1733·2019-08-30 14:22
閱讀 530·2019-08-29 12:42