溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

新增的es6數(shù)據(jù)結(jié)構(gòu)是什么

發(fā)布時(shí)間:2022-04-16 10:17:58 來源:億速云 閱讀:152 作者:zzz 欄目:web開發(fā)

本文小編為大家詳細(xì)介紹“新增的es6數(shù)據(jù)結(jié)構(gòu)是什么”,內(nèi)容詳細(xì),步驟清晰,細(xì)節(jié)處理妥當(dāng),希望這篇“新增的es6數(shù)據(jù)結(jié)構(gòu)是什么”文章能幫助大家解決疑惑,下面跟著小編的思路慢慢深入,一起來學(xué)習(xí)新知識(shí)吧。

新增結(jié)構(gòu)有:1、Symbol,表示獨(dú)一無二的值,是一個(gè)函數(shù)結(jié)構(gòu);2、Set,指的是“集合”結(jié)構(gòu),類似數(shù)組,允許存放無序且不能重復(fù)的數(shù)據(jù);3、WeakSet,類似Set,內(nèi)部數(shù)據(jù)也不能有重復(fù)值;4、Map,指的是“字典”結(jié)構(gòu),可存儲(chǔ)映射關(guān)系。

本教程操作環(huán)境:windows7系統(tǒng)、ECMAScript 6版、Dell G3電腦。

ES6新增數(shù)據(jù)結(jié)構(gòu)

1、Symbol

SymbolES6中新增的一個(gè)基本數(shù)據(jù)類型之一,它是一個(gè)函數(shù)。每一個(gè)從Symbol函數(shù)返回的Symbol值都是獨(dú)一無二的,symbol值作為對(duì)象屬性的標(biāo)識(shí)符,也是唯一的用途的。

const s1 = Symbol()
const s2 = Symbol()
console.log(s1 === s2); // false

symbol作為key

第一種方式,直接在對(duì)象的字面量中添加。

// symbol作為key
const obj = {
  [s1]:'abc',
  [s2]:'cc',
}

第二種方式,通過添加數(shù)組方式添加。

// 需要用數(shù)組方式來獲取,不能通過點(diǎn)語法,否則會(huì)獲取到字符串key
console.log(obj[s1]);

第三種方式,通過對(duì)象中的defineProperty方法添加。

const s4=Symbol()
Object.defineProperty(obj,s4,{
  configurable:true,
  enumerable:true,
  writable:true,
  value:'ff'
})

通過symbol獲取對(duì)應(yīng)的值

需要用數(shù)組方式來獲取,不能通過點(diǎn)語法,否則會(huì)獲取到字符串key。

console.log(obj[s1]);

symbol不能被隱式轉(zhuǎn)換成string類型。

注意:Symbol函數(shù)中的參數(shù)是symbol描述符,這是在ES10新增的特性

let Sym = Symbol("Sym")
alert(Sym)  // TypeError: Cannot convert a Symbol value to a string

我們不能直接alert一個(gè)symbol對(duì)象,但是我們可以通過toString的方式或者.description來獲取symbol對(duì)象的描述符。

let sym = Symbol('a')
console.log(sym.description); // 'a'

遍歷symbol

在使用for遍歷、object.keys中是獲取不到symbol健的,對(duì)此object還提供了getOwnPropertySymbols方法,用于獲取對(duì)象中所有symbol的key。

const sKeys=(Object.getOwnPropertySymbols(obj));
for(const skey of sKeys){
  console.log(obj[skey]);
}

全局symbol對(duì)象注冊(cè)

有時(shí),我們可能需要多個(gè)symbol的值是一致的,我們可以通過symbol提供的靜態(tài)方法for方法傳入一樣的描述符來使它們的值一致。

Symbol.for

該方法會(huì)在使用給定鍵搜索運(yùn)行時(shí)符號(hào)注冊(cè)表中的現(xiàn)有符號(hào),并在找到時(shí)返回它。否則,使用此鍵在全局符號(hào)注冊(cè)表中創(chuàng)建一個(gè)新符號(hào)。

const sa=Symbol.for('cc')
const sb=Symbol.for('cc')
console.log(sa===sb); //true

Symbol.keyFor

該方法用于獲取全局symbol的描述符。

const key =Symbol.keyFor(sb)
console.log(key); // c

2、Set

Set對(duì)象(類似數(shù)組)允許你存放任何數(shù)據(jù)類型,但里面的值不能重復(fù)。

const s1 = new Set()
s1.add(10)
s1.add(20)
s1.add(30)
s1.add(40)

console.log(s1) // Set(4) { 10, 20, 30, 40 }

s1.add(20)
console.log(s1) // Set(4) { 10, 20, 30, 40 }

Set常用方法

方法返回值說明
sizeset對(duì)象中的數(shù)量返回set對(duì)象中的數(shù)量
addSet對(duì)象添加元素
deleteboolean刪除元素
hasbooleanSet對(duì)象中是否存在這個(gè)值
clear清空Set對(duì)象中的值

3、WeakSet

WeakSet是類似Set的另外一種數(shù)據(jù)結(jié)構(gòu),內(nèi)部數(shù)據(jù)也不能有重復(fù)值。

  • 它與Set的區(qū)別

    • WeakSet只能存放對(duì)象類型,不能存放基本數(shù)據(jù)類型

    • WeakSet對(duì)元素是弱引用

基本使用

const weakSet = new WeakSet();
let obj = {
  name: "_island"
};

weakSet.add(obj);

WeakSet常用方法

方法返回值說明
addweakset對(duì)象添加元素
deleteboolean刪除元素
hasbooleanweakset對(duì)象中是否存在這個(gè)值

關(guān)于遍歷

WeakSet不能被遍歷,因?yàn)樗皇菍?duì)對(duì)象進(jìn)行弱引用,如果遍歷去獲取元素,有可能導(dǎo)致對(duì)象不能被GC回收。

所以WeakSet中的對(duì)象是不能獲取的

4、Map

ES6新增的數(shù)據(jù)結(jié)構(gòu),用于存儲(chǔ)映射關(guān)系。我們知道在JavaScript中對(duì)象中是不能用對(duì)象來作為key的。(假如我們把對(duì)象作為key,其內(nèi)部會(huì)將對(duì)象轉(zhuǎn)換為字符串[object object]

const obj1 = { name: "_island" };
const obj2 = { name: "QC2125" };
const obj3={
  [obj1]:'a',
  [obj2]:'b',
}

console.log(obj3);
// { '[object Object]': 'b' }

Map則可以把對(duì)象作為key進(jìn)行存儲(chǔ),可以通過set方法添加到Map中,也直接通過字面量的方式添加。

const obj1 = { name: "_island" };
const obj2 = { name: "QC2125" };
const map = new Map();
map.set(obj1, "a");
map.set(obj2, "b");
console.log(map); // Map(2) { { name: '_island' } => 'a', { name: 'QC2125' } => 'b' }

// or
const map2 = new Map([[obj1,'a'],[obj2,'b']])

Map常用方法

方法返回值說明
get獲取對(duì)應(yīng)的元素通過key獲取對(duì)應(yīng)元素
sizeMap對(duì)象中的數(shù)量返回Map對(duì)象中的數(shù)量
setMap對(duì)象添加元素
deleteboolean刪除元素
hasbooleanSet對(duì)象中是否存在這個(gè)值
clear清空Set對(duì)象中的值

遍歷Map

通過foreach語句遍歷Map

map2.forEach((item) => console.log(item));

通過for..of遍歷Map

for ([val, key] of map2) {
  console.log(`${key}---${val}`);
}

5、WeakMap

Map類似,也是以鍵值對(duì)的形式存在的

  • 和Map的區(qū)別

    • WeakMapkey只能使用對(duì)象,不接受其他的類型作為key

    • WeakMapkey對(duì)對(duì)象是弱引用

基本使用

const weakMap = new WeakMap();
weakMap.set(obj, "a");
console.log(weakMap.get(obj)); // a

WeakMap常用方法

方法返回值說明
getweakmap對(duì)象獲取元素
deleteboolean刪除元素
hasbooleanweaksmap對(duì)象中是否存在這個(gè)值

關(guān)于遍歷

WeakSet一樣,正因?yàn)樗侨跻茫?code>WeakMap的key是不可枚舉的,如果key可枚舉那其列表將會(huì)受GC影響。

讀到這里,這篇“新增的es6數(shù)據(jù)結(jié)構(gòu)是什么”文章已經(jīng)介紹完畢,想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過才能領(lǐng)會(huì),如果想了解更多相關(guān)內(nèi)容的文章,歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。

es6
AI