ES6的Set、Map、Symbol實(shí)例分析

這篇文章主要介紹“ES6的Set、Map、Symbol實(shí)例分析”的相關(guān)知識(shí)，小編通過實(shí)際案例向大家展示操作過程，操作方法簡單快捷，實(shí)用性強(qiáng)，希望這篇“ES6的Set、Map、Symbol實(shí)例分析”文章能幫助大家解決問題。

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

??set 數(shù)據(jù)結(jié)構(gòu)，可以了解為集合，與數(shù)組相似，內(nèi)部的成員是唯一的(不重復(fù))。

const a = new Set();a.add(1),add(2).add(100).add(1);

a這個(gè)集合通過add方法增加數(shù)據(jù)后，會(huì)有返回值，返回值是它本身，所以可以采用鏈?zhǔn)皆黾拥姆绞皆黾訑?shù)據(jù)。
假如遇到重復(fù)的數(shù)據(jù)增加，只增加一次。

遍歷這個(gè)集合：

a.forEach(i => console.log(i));

還可以使用ES2015的新添加的循環(huán)for...of

for(let i of a){   console.log(i);}

Set的少量屬性：

• size屬性：集合的數(shù)據(jù)長度，console.log(a.size);

• has(值)： 判斷集合中能否存在某一個(gè)值,console.log(a.has(100));

• delete(值)：刪除集合中的某個(gè)值，刪除成功返回true,console.log(a.delete(1));

• clear()：刪除集合中所有數(shù)據(jù),a.clear();

Set應(yīng)用：數(shù)組去重

const arr = [1,2,3,1,2,4,6,76,44,3,4,8];const a = new Set(arr);console.log(arr);console.log(a);

這樣去重得到的是一個(gè)集合，ES2015中Array.from()可以將其轉(zhuǎn)換成數(shù)組。

const arr = [1,2,3,1,2,4,6,76,44,3,4,8];const a = Array.from(new Set(arr));console.log(arr);console.log(a);

當(dāng)然還可以使用...開展操作符，定義一個(gè)數(shù)組的字面量，再將集合開展，保存為數(shù)組數(shù)據(jù)

const arr = [1,2,3,1,2,4,6,76,44,3,4,8];const a = [...new Set(arr)];console.log(arr);console.log(a);

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

• Map與對象的結(jié)構(gòu)相似，是一個(gè)鍵值對的集合，與對象不一樣的是，對象在設(shè)置鍵時(shí)，這個(gè)鍵是字符串類型的，存儲(chǔ)結(jié)構(gòu)復(fù)雜的數(shù)據(jù)時(shí)，就會(huì)出現(xiàn)問題

const obj = {};obj[true] = "boolean";obj[123] = "number";obj[{a:1}] = "object";    console.log(Object.keys(obj));//keys 輸出對象的所有鍵

內(nèi)部通過toString方法自動(dòng)的將這些鍵的名稱變成字符串類型。當(dāng)給對象的隨意傳一個(gè)對象作為鍵來調(diào)用時(shí)，只需能匹配'[object object]'，所得到的結(jié)果還是object，這樣就會(huì)出現(xiàn)問題。不能實(shí)現(xiàn)一 一對應(yīng)的關(guān)系。

console.log(obj[{}]);//傳一個(gè)空對象console.log(obj[`[object object]`]);//傳一個(gè)一樣的字符串

而Map可以實(shí)現(xiàn)鍵值對一 一映射

const map = new Map();const a = {a:1};//a是一個(gè)對象，作為鍵，{a:1}map.set(a,100);//鍵為a，值為100console.log(map);//{{a:1} => 100}

這里的鍵a是一個(gè)對象型的數(shù)據(jù)，沒有被轉(zhuǎn)成字符串

console.log(map.get(a));//獲取a鍵的值，得到100

console.log(map.has(a));//找到鍵值a，返回true//map.delete(a);//map.clear();    map.forEach((value,key) => {    console.log(key,value);})

Symbol：全新的原始數(shù)據(jù)類型。最主要的作用就是為對象增加獨(dú)一無二的屬性標(biāo)識(shí)符

Symbol() === Symbol()的返回值是false，由此可以看出Symbol創(chuàng)立的值是獨(dú)一無二的。

const obj = {}obj[Symbol()] = 123;obj[Symbol()] = 446;//obj對象里的值沒有發(fā)生覆蓋console.log(obj);//通過形容文本區(qū)分Symbolconsole.log(Symbol('a'));console.log(Symbol('b'));console.log(Symbol('age'));

const obj = {   [Symbol()] : 999,   name : "li"}obj[Symbol()] = 111;obj[Symbol()] = 222;console.log(obj[Symbol()]);//undefined//Symbol定義的屬性是不能在對象以外進(jìn)行調(diào)用的console.log(obj.name);

需要注意的是console.log(obj[Symbol()]);//undefined  Symbol定義的屬性是不能在對象以外進(jìn)行調(diào)用的，由于通過Symbol（）生成的值，調(diào)用時(shí)無法確定獲取哪一個(gè)值。這樣可以作為對象內(nèi)部的私有成員。

Symbol 補(bǔ)充

• 每次調(diào)用Symbol的值都是全新的值，Symbol("a") === Symbol("a")返回值為false，即便形容文本一樣，Symbol每次調(diào)用的也不一樣的。

• 如何對Symbol的值進(jìn)行重復(fù)使用？

  定義一個(gè)全局變量，使其等于Symbol()，重復(fù)使用變量a

  const a = Symbol();

  使用Symbol類型中的靜態(tài)方法實(shí)現(xiàn)復(fù)用（Symbor.for()）

  const a = Symbol.for('symbol1');const b = Symbol.for('symbol1');console.log(a === b);//true

  const a = Symbol.for('true');const b = Symbol.for(true);console.log(a === b);//true,遇到布爾值會(huì)自動(dòng)轉(zhuǎn)換成字符串形式

• 對象的toString標(biāo)簽，任何對象.toString()都是[object Object]。如何自己設(shè)置對象的toString標(biāo)簽，[Symbol.toStringTag]:"objtag"

  const obj1 = {a:1};console.log(obj1.toString());//[object Object]const obj2 = {[Symbol.toStringTag]:"obj2"};console.log(obj2.toString());//[object obj2]

• 在對象中Symbol的屬性名用for循環(huán)是遍歷不出來的，Object.keys(obj)也不會(huì)顯示的，JSON的JSON.stringify(obj)也獲取不到。所以Symbol經(jīng)常會(huì)被忽略，不會(huì)在外面被獲取。所以Symbol作為對象的私有屬性名是非常安全的。

  若的確需要獲取對象中的Symbol（）屬性名時(shí)

  //若非要獲取，通過getOwnPropertySymbols[obj]方法const obj = {    [Symbol()]:"a",    b : 1        };console.log(Object.getOwnPropertySymbols(obj));//只能獲取Symbol()類型的屬性名

關(guān)于“ES6的Set、Map、Symbol實(shí)例分析”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。