本文小編為大家詳細介紹“新增的es6數據結構是什么”，內容詳細，步驟清晰，細節處理妥當，希望這篇“新增的es6數據結構是什么”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

10年積累的網站設計制作、成都做網站經驗，可以快速應對客戶對網站的新想法和需求。提供各種問題對應的解決方案。讓選擇我們的客戶得到更好、更有力的網絡服務。我雖然不認識你，你也不認識我。但先網站設計后付款的網站建設流程，更有普蘭免費網站建設讓你可以放心的選擇與我們合作。

新增結構有：1、Symbol，表示獨一無二的值，是一個函數結構；2、Set，指的是“集合”結構，類似數組，允許存放無序且不能重復的數據；3、WeakSet，類似Set，內部數據也不能有重復值；4、Map，指的是“字典”結構，可存儲映射關系。

本教程操作環境：windows7系統、ECMAScript 6版、Dell G3電腦。

ES6新增數據結構

1、Symbol

Symbol是ES6中新增的一個基本數據類型之一，它是一個函數。每一個從Symbol函數返回的Symbol值都是獨一無二的，symbol值作為對象屬性的標識符，也是唯一的用途的。

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

symbol作為key

第一種方式，直接在對象的字面量中添加。

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

第二種方式，通過添加數組方式添加。

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

第三種方式，通過對象中的defineProperty方法添加。

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

通過symbol獲取對應的值

需要用數組方式來獲取，不能通過點語法，否則會獲取到字符串key。

console.log(obj[s1]);

symbol不能被隱式轉換成string類型。

注意：Symbol函數中的參數是symbol描述符，這是在ES10新增的特性

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

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

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

遍歷symbol

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

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

全局symbol對象注冊

有時，我們可能需要多個symbol的值是一致的，我們可以通過symbol提供的靜態方法for方法傳入一樣的描述符來使它們的值一致。

Symbol.for

該方法會在使用給定鍵搜索運行時符號注冊表中的現有符號，并在找到時返回它。否則，使用此鍵在全局符號注冊表中創建一個新符號。

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對象（類似數組）允許你存放任何數據類型，但里面的值不能重復。

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常用方法

方法	返回值	說明
size	set對象中的數量	返回set對象中的數量
add	Set對象	添加元素
delete	boolean	刪除元素
has	boolean	Set對象中是否存在這個值
clear	無	清空Set對象中的值

3、WeakSet

WeakSet是類似Set的另外一種數據結構，內部數據也不能有重復值。

• 它與Set的區別

• WeakSet只能存放對象類型，不能存放基本數據類型

• WeakSet對元素是弱引用

基本使用

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

weakSet.add(obj);

WeakSet常用方法

方法	返回值	說明
add	weakset對象	添加元素
delete	boolean	刪除元素
has	boolean	weakset對象中是否存在這個值

關于遍歷

WeakSet不能被遍歷，因為它只是對對象進行弱引用，如果遍歷去獲取元素，有可能導致對象不能被GC回收。

所以WeakSet中的對象是不能獲取的

4、Map

ES6新增的數據結構，用于存儲映射關系。我們知道在JavaScript中對象中是不能用對象來作為key的。（假如我們把對象作為key，其內部會將對象轉換為字符串[object object]）

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

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

而Map則可以把對象作為key進行存儲，可以通過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	獲取對應的元素	通過key獲取對應元素
size	Map對象中的數量	返回Map對象中的數量
set	Map對象	添加元素
delete	boolean	刪除元素
has	boolean	Set對象中是否存在這個值
clear	無	清空Set對象中的值

遍歷Map

通過foreach語句遍歷Map

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

通過for..of遍歷Map

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

5、WeakMap

和Map類似，也是以鍵值對的形式存在的

• 和Map的區別

• WeakMap的key只能使用對象，不接受其他的類型作為key

• WeakMap的key對對象是弱引用

基本使用

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

WeakMap常用方法

方法	返回值	說明
get	weakmap對象	獲取元素
delete	boolean	刪除元素
has	boolean	weaksmap對象中是否存在這個值

關于遍歷

和WeakSet一樣，正因為它是弱引用，WeakMap的key是不可枚舉的，如果key可枚舉那其列表將會受GC影響。

讀到這里，這篇“新增的es6數據結構是什么”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注創新互聯行業資訊頻道。

網頁標題：新增的es6數據結構是什么
轉載源于：http://vcdvsql.cn/article46/pooihg.html

成都網站建設公司_創新互聯，為您提供網站維護、企業網站制作、品牌網站制作、網站排名、網站改版、做網站

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯