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

新增的es6資料結構有哪些

Apr 15, 2022 pm 07:26 PM
es6 資料結構

新增結構有: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中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

使用Java函數比較進行複雜資料結構比較 使用Java函數比較進行複雜資料結構比較 Apr 19, 2024 pm 10:24 PM

Java中比較複雜資料結構時,使用Comparator提供靈活的比較機制。具體步驟包括:定義比較器類,重寫compare方法定義比較邏輯。建立比較器實例。使用Collections.sort方法,傳入集合和比較器實例。

Java資料結構與演算法:深入詳解 Java資料結構與演算法:深入詳解 May 08, 2024 pm 10:12 PM

資料結構與演算法是Java開發的基礎,本文深入探討Java中的關鍵資料結構(如陣列、鍊錶、樹等)和演算法(如排序、搜尋、圖演算法等)。這些結構透過實戰案例進行說明,包括使用陣列儲存分數、使用鍊錶管理購物清單、使用堆疊實現遞歸、使用佇列同步執行緒以及使用樹和雜湊表進行快速搜尋和身份驗證等。理解這些概念可以編寫高效且可維護的Java程式碼。

深入了解Go語言中的引用類型 深入了解Go語言中的引用類型 Feb 21, 2024 pm 11:36 PM

引用類型在Go語言中是一種特殊的資料類型,它們的值並非直接儲存資料本身,而是儲存資料的位址。在Go語言中,引用型別包括slices、maps、channels和指標。深入了解引用類型對於理解Go語言的記憶體管理和資料傳遞方式至關重要。本文將結合具體的程式碼範例,介紹Go語言中引用類型的特點和使用方法。 1.切片(Slices)切片是Go語言中最常用的引用類型之一

PHP資料結構:AVL樹的平衡之道,維持高效有序的資料結構 PHP資料結構:AVL樹的平衡之道,維持高效有序的資料結構 Jun 03, 2024 am 09:58 AM

AVL樹是一種平衡二元搜尋樹,確保快速且有效率的資料操作。為了實現平衡,它執行左旋和右旋操作,調整違反平衡的子樹。 AVL樹利用高度平衡,確保樹的高度相對於節點數始終較小,從而實現對數時間複雜度(O(logn))的查找操作,即使在大型資料集上也能保持資料結構的效率。

Java集合框架全解析:解剖資料結構,揭秘高效率儲存之道 Java集合框架全解析:解剖資料結構,揭秘高效率儲存之道 Feb 23, 2024 am 10:49 AM

Java集合框架概述Java集合框架是Java程式語言的重要組成部分,它提供了一系列可以儲存和管理資料的容器類別庫。這些容器類別庫具有不同的資料結構,可以滿足不同場景下的資料儲存和處理需求。集合框架的優點在於它提供了統一的接口,使得開發人員可以使用相同的方式來操作不同的容器類別庫,從而降低了開發難度。 Java集合框架的資料結構Java集合框架中包含多種資料結構,每種資料結構都有其獨特的特性和適用場景。以下是幾種常見的Java集合框架資料結構:1.List:List是一個有序的集合,它允許元素重複。 Li

基於哈希表的資料結構優化PHP數組交集和並集的計算 基於哈希表的資料結構優化PHP數組交集和並集的計算 May 02, 2024 pm 12:06 PM

利用雜湊表可最佳化PHP數組交集和並集計算,將時間複雜度從O(n*m)降低到O(n+m),具體步驟如下:使用雜湊表將第一個數組的元素映射到布林值,以快速找出第二個陣列中元素是否存在,提高交集計算效率。使用雜湊表將第一個陣列的元素標記為存在,然後逐一新增第二個陣列的元素,忽略已存在的元素,提高並集計算效率。

PHP SPL 資料結構:為你的專案注入速度與彈性 PHP SPL 資料結構:為你的專案注入速度與彈性 Feb 19, 2024 pm 11:00 PM

PHPSPL資料結構庫概述PHPSPL(標準php庫)資料結構庫包含一組類別和接口,用於儲存和操作各種資料結構。這些資料結構包括數組、鍊錶、堆疊、佇列和集合,每個資料結構都提供了一組特定的方法和屬性,用於操縱資料。數組在PHP中,數組是儲存一系列元素的有序集合。 SPL數組類別提供了對原生的PHP數組進行加強的功能,包括排序、過濾和映射。以下是使用SPL陣列類別的範例:useSplArrayObject;$array=newArrayObject(["foo","bar","baz"]);$array

深入學習Go語言資料結構的奧秘 深入學習Go語言資料結構的奧秘 Mar 29, 2024 pm 12:42 PM

深入學習Go語言資料結構的奧秘,需要具體程式碼範例Go語言作為一門簡潔、高效的程式語言,在處理資料結構方面也展現了其獨特的魅力。數據結構是電腦科學中的基礎概念,它旨在組織和管理數據,使得數據能夠更有效地被存取和操作。透過深入學習Go語言資料結構的奧秘,我們可以更好地理解資料的儲存方式和操作方法,從而提高程式效率和程式碼品質。一、數組數組是最簡單的資料結構之一

See all articles