首頁 > web前端 > 前端問答 > 新增的es6資料結構有哪些

新增的es6資料結構有哪些

青灯夜游
發布: 2022-10-26 17:58:21
原創
2358 人瀏覽過

新增結構有:1、Symbol,表示獨一無二的值,是一個函數結構;2、Set,指的是「集合」結構,類似數組,允許存放無序且不能重複的資料; 3.WeakSet,類似Set,內部資料也不能有重複值;4、Map,指的是「字典」結構,可儲存映射關係。

新增的es6資料結構有哪些

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

ES6新增資料結構

1、Symbol

#SymbolES6 中新增的一個基本資料型別之一,它是一個函數。每一個從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常用方法

#方法傳回值說明
sizeset物件中的數量傳回set物件中的數量
addSet物件#新增元素
#deleteboolean#刪除元素
hasbooleanSet「物件中是否存在這個值
clear清空Set物件中的值

#3、 WeakSet

WeakSet是另一個類似Set的資料結構,內部資料也不能有重複值。

  • 它與Set的區別
    • WeakSet只能存放物件類型,不能存放基本資料類型
    • WeakSet

##

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

weakSet.add(obj);
登入後複製

#WeakSet常用方法#方法##addboolean
傳回值
weakset物件新增元素##delete
###刪除元素################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获取对应元素
sizeMap对象中的数量返回Map对象中的数量
setMap对象添加元素
deleteboolean删除元素
hasbooleanSet对象中是否存在这个值
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的区别
    • WeakMapkey只能使用对象,不接受其他的类型作为key
    • WeakMapkey对对象是弱引用

基本使用

const weakMap = new WeakMap();
weakMap.set(obj, "a");
console.log(weakMap.get(obj)); // a
登入後複製

WeakMap常用方法

方法 返回值 说明
get weakmap对象 获取元素
delete boolean 删除元素
has boolean weaksmap对象中是否存在这个值

关于遍历

WeakSet一样,正因为它是弱引用,WeakMapkey是不可枚举的,如果key可枚举那其列表将会受GC影响。

【相关推荐:javascript视频教程web前端

以上是新增的es6資料結構有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板