新增結構有: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);
傳回值 |
|
|
|
|
##add |
weakset 物件 |
新增元素
|
##delete
|
关于遍历
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
影响。
【相关推荐:javascript视频教程、web前端】
以上是新增的es6資料結構有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章!

React是由Meta開發的用於構建用戶界面的JavaScript庫,其核心是組件化開發和虛擬DOM技術。 1.組件與狀態管理:React通過組件(函數或類)和Hooks(如useState)管理狀態,提升代碼重用性和維護性。 2.虛擬DOM與性能優化:通過虛擬DOM,React高效更新真實DOM,提升性能。 3.生命週期與Hooks:Hooks(如useEffect)讓函數組件也能管理生命週期,執行副作用操作。 4.使用示例:從基本的HelloWorld組件到高級的全局狀態管理(useContext和

React生態系統包括狀態管理庫(如Redux)、路由庫(如ReactRouter)、UI組件庫(如Material-UI)、測試工具(如Jest)和構建工具(如Webpack)。這些工具協同工作,幫助開發者高效開發和維護應用,提高代碼質量和開發效率。

React是由Facebook開發的用於構建用戶界面的JavaScript庫。 1.它採用組件化和虛擬DOM技術,提高了UI開發的效率和性能。 2.React的核心概念包括組件化、狀態管理(如useState和useEffect)和虛擬DOM的工作原理。 3.在實際應用中,React支持從基本的組件渲染到高級的異步數據處理。 4.常見錯誤如忘記添加key屬性或不正確的狀態更新可以通過ReactDevTools和日誌調試。 5.性能優化和最佳實踐包括使用React.memo、代碼分割和保持代碼的可讀性與可維

React在HTML中的應用通過組件化和虛擬DOM提升了web開發的效率和靈活性。 1)React組件化思想將UI分解為可重用單元,簡化管理。 2)虛擬DOM優化性能,通過diffing算法最小化DOM操作。 3)JSX語法允許在JavaScript中編寫HTML,提升開發效率。 4)使用useState鉤子管理狀態,實現動態內容更新。 5)優化策略包括使用React.memo和useCallback減少不必要的渲染。

React的主要功能包括組件化思想、狀態管理和虛擬DOM。 1)組件化思想允許將UI拆分成可複用的部分,提高代碼可讀性和可維護性。 2)狀態管理通過state和props管理動態數據,變化觸發UI更新。 3)虛擬DOM優化性能,通過內存中的DOM副本計算最小操作更新UI。

React的優勢在於其靈活性和高效性,具體表現在:1)組件化設計提高了代碼重用性;2)虛擬DOM技術優化了性能,特別是在處理大量數據更新時;3)豐富的生態系統提供了大量第三方庫和工具。通過理解React的工作原理和使用示例,可以掌握其核心概念和最佳實踐,從而構建高效、可維護的用戶界面。

React是一個用於構建用戶界面的JavaScript庫,適用於大型和復雜的應用。 1.React的核心是組件化和虛擬DOM,提高了UI渲染性能。 2.與Vue相比,React更靈活但學習曲線較陡,適合大型項目。 3.與Angular相比,React更輕量,依賴社區生態,適用於需要靈活性的項目。

React通過虛擬DOM在HTML中運作。 1)React使用JSX語法編寫類似HTML的結構。 2)虛擬DOM管理UI更新,通過Diffing算法高效渲染。 3)使用ReactDOM.render()將組件渲染到真實DOM。 4)優化和最佳實踐包括使用React.memo和組件拆分,提升性能和可維護性。


熱AI工具

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

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

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

AI Hentai Generator
免費產生 AI 無盡。

熱門文章

熱工具

SecLists
SecLists是最終安全測試人員的伙伴。它是一個包含各種類型清單的集合,這些清單在安全評估過程中經常使用,而且都在一個地方。 SecLists透過方便地提供安全測試人員可能需要的所有列表,幫助提高安全測試的效率和生產力。清單類型包括使用者名稱、密碼、URL、模糊測試有效載荷、敏感資料模式、Web shell等等。測試人員只需將此儲存庫拉到新的測試機上,他就可以存取所需的每種類型的清單。

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Atom編輯器mac版下載
最受歡迎的的開源編輯器

MinGW - Minimalist GNU for Windows
這個專案正在遷移到osdn.net/projects/mingw的過程中,你可以繼續在那裡關注我們。 MinGW:GNU編譯器集合(GCC)的本機Windows移植版本,可自由分發的導入函式庫和用於建置本機Windows應用程式的頭檔;包括對MSVC執行時間的擴展,以支援C99功能。 MinGW的所有軟體都可以在64位元Windows平台上運作。