国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 開發 > JS > 正文

ES6中Symbol、Set和Map用法詳解

2024-05-06 16:54:21
字體:
來源:轉載
供稿:網友

本文實例講述了ES6中Symbol、Set和Map用法。分享給大家供大家參考,具體如下:

Symbol

1.Symbol 是 ES6 引入了一種新的原始數據類型,表示獨一無二的值。它是 JavaScript 語言的第七種數據類型,前六種分別是:undefined、null、布爾值(Boolean)、字符串(String)、數值(Number)、對象(Object);

2.Symbol 值通過Symbol函數生成,可以作為對象的屬性名使用,保證不會與其他屬性名產生沖突;

let s = Symbol();typeof s // symbol

ps:上面代碼表示創建一個Symbol變量,值得注意的是,Symbol函數前不能使用new命令,否則會報錯,也就是說Symbol 是一個原始類型的值,不是對象,也不能添加屬性;

3.Symbol函數可以接受一個字符串作為參數,表示對 Symbol 實例的描述,主要用于區分不同的 Symbol 變量;

let s1 = Symbol('a');let s2 = Symbol('b');s1.toString() // 'Symbol(a)'s2.toString() // 'Symbol(b)'

ps:Symbol函數的參數只是表示對當前 Symbol 值的描述,因此相同參數的Symbol函數的返回值是不相等的

let s1 = Symbol('a');let s2 = Symbol('a');s1 === s2 //false

4.Symbol 值不能與其他類型的值進行運算,但可以轉為布爾值,但是不能轉為數值;

let s = Symbol();s + '2'    // Cannot convert a Symbol value to a stringBoolean(s)  // true!s      // false

5.用于對象的屬性名,可以保證不會出現同名的屬性,對于一個對象由多個模塊構成的情況非常有用,能防止某一個鍵被不小心改寫或覆蓋;值得注意的是,Symbol 值作為對象屬性名時,不能用點運算符,因為點運算符后面是一個字符串;

let s = Symbol();let obj = {};obj[s] = 'hello world';//或者let obj = {  [s] : 'hello world'}obj.s  // undefinedobj[s] // hello world

6.Symbol 作為屬性名,不會被常規方法遍歷得到,即該屬性不會出現在for...in、for...of循環中,也不會被Object.keys()、Object.getOwnPropertyNames()、JSON.stringify()返回,但是,它并不是私有屬性,可以使用 Object.getOwnPropertySymbols 方法,可以獲取指定對象的所有 Symbol 屬性名;

var obj = {};var a = Symbol('a');var b = Symbol('b');obj[a] = 'Hello';obj[b] = 'World';obj.c = 'Mine';for( let key in obj ){  console.log(key)     // c}var objectSymbols = Object.getOwnPropertySymbols(obj);console.log(objectSymbols) // [Symbol(a), Symbol(b)]

7.Symbol.for方法接受一個字符串作為參數,然后搜索有沒有以該參數作為名稱的Symbol值。如果有,就返回這個Symbol值,否則就新建并返回一個以該字符串為名稱的Symbol值;它與Symbol()不同的是,Symbol.for()不會每次調用就返回一個新的 Symbol 類型的值,而是會先檢查給定的key是否已經存在,如果不存在才會新建一個值,而 Symbol()每次都會返回3不同的Symbol值;

Symbol.for("name") === Symbol.for("name")// trueSymbol("name") === Symbol("name")// false

8.Symbol.keyFor方法返回一個已登記的 Symbol 類型值的key,而Symbol()寫法是沒有登記機制的;

var s1 = Symbol.for("name");Symbol.keyFor(s1) // "name"var s2 = Symbol("name");Symbol.keyFor(s2) // undefined

ps:Symbol.for為Symbol值登記的名字,是全局環境的,可以在不同的 iframe 或 service worker 中取到同一個值

Set 和 Map

1.ES6 提供了新的數據結構 Set。它類似于數組,但是成員的值都是唯一的,沒有重復的值,它 本身是一個構造函數,用來生成 Set 數據結構。

let s = new Set([1,2,3,4,5,2,2,3,5]);s // [1,2,3,4,5]

2.可以使用add(key)方法可以添加元素到Set中,可以重復添加,但不會有效果,值得注意的是向Set加入值的時候,不會發生類型轉換,即 5 和 "5" 是兩個不同的值,但在 Set 內部,兩個NaN是相等

let s = new Set([1,2,3]);s.add(4)  //[1,2,3,4]s.add(4)  //[1,2,3,4]s.add(5)  //[1,2,3,4,5]s.add('5') //[1,2,3,4,5,"5"]s.add(NaN) //[1,2,3,4,5,"5",NaN]s.add(NaN) //[1,2,3,4,5,"5",NaN]

3.可以利用Set數據不重復的特性,提供一種新的數組去重方法

// 去除數組的重復成員[...new Set(array)][...new Set([1,2,2,3,3,4,5,5])] //[1,2,3,4,5]

4.Set常見的操作方法有:

add(value):添加某個值,返回Set結構本身。
delete(value):刪除某個值,返回一個布爾值,表示刪除是否成功。
has(value):返回一個布爾值,表示該值是否為Set的成員。

clear():清除所有成員,沒有返回值。

s.add(1).add(2).add(2);// 注意2被加入了兩次s.size // 2s.has(1) // trues.has(2) // trues.has(3) // falses.delete(2);s.has(2) // false

5.Set 結構的實例有四個遍歷方法,可以用于遍歷成員。

keys():返回鍵名的遍歷器
values():返回鍵值的遍歷器
entries():返回鍵值對的遍歷器

forEach():使用回調函數遍歷每個成員
需要特別指出的是,Set的遍歷順序就是插入順序。這個特性有時非常有用,比如使用Set保存一個回調函數列表,調用時就能保證按照添加順序調用。

let set = new Set(['red', 'green', 'blue']);for (let item of set.keys()) {console.log(item);}// red// green// bluefor (let item of set.values()) {console.log(item);}// red// green// bluefor (let item of set.entries()) {console.log(item);}// ["red", "red"]// ["green", "green"]// ["blue", "blue"]

6.ES6 提供了 Map 數據結構,它類似于對象,也是鍵值對的集合,但是“鍵”的范圍不限于字符串,各種類型的值(包括對象)都可以當作鍵,是一種更完善的 Hash 結構實現。如果你需要“鍵值對”的數據結構,Map 比 Object 更合適;

7.Map常見的操作方法有:

set(key,val):添加某個值,返回Map結構本身。
get(key):     讀取某個鍵,如果該鍵未知,則返回undefined
delete(key):  刪除某個鍵,返回一個布爾值,表示刪除是否成功。
has(key):     返回一個布爾值,表示該值是否為Map的鍵。
clear() :      清除所有成員,沒有返回值。

const m = new Map();const o = { str : 'Hello World'};m.set(o, 'content')m.get(o) // "content"m.has(o) // truem.delete(o) // truem.has(o) // false

8.只有對同一個對象的引用,Map 結構才將其視為同一個鍵

const map = new Map();const k1 = ['a'];const k2 = ['a'];map.set(k1, 111).set(k2, 222);map.get(k1) // 111map.get(k2) // 222

上面例子表明,Map 的鍵實際上是跟內存地址綁定的,只要內存地址不一樣,就視為兩個鍵,因為 k1 和 k2 是兩個不同的對象,放在不同的內存地址中,所以Map視為不同的鍵

9.Map 結構原生提供三個遍歷器生成函數和一個遍歷方法。

keys():返回鍵名的遍歷器。
values():返回鍵值的遍歷器。
entries():返回所有成員的遍歷器。
forEach():遍歷 Map 的所有成員。

ps:Map 的遍歷順序就是插入順序,這里就不示例了,大家自己動手實踐一下。

10.可以使用擴展運算符(...)將Map轉換為數組,反過來,將數組傳入 Map 構造函數,就可以轉為 Map了

//Map轉數組const map = new Map();map.set('name' , 'hello').set({},'world');[...map] //[["name","hello"],[{},"world"]]//數組轉Mapconst map = new Map([["name","hello"],[{},"world"]]);map // {"name" => "hello", Object {} => "world"}

 

希望本文所述對大家JavaScript程序設計有所幫助。


注:相關教程知識閱讀請移步到JavaScript/Ajax教程頻道。
發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 台前县| 宾川县| 澳门| 镇巴县| 鹤峰县| 固安县| 车险| 霞浦县| 永寿县| 克东县| 中阳县| 砀山县| 靖宇县| 安远县| 沈阳市| 左权县| 弥渡县| 虞城县| 高唐县| 来安县| 疏附县| 安岳县| 张家口市| 饶平县| 绥德县| 辛集市| 临高县| 周宁县| 富顺县| 黑龙江省| 哈密市| 北辰区| 定日县| 井冈山市| 应城市| 连云港市| 扎赉特旗| 吴堡县| 鄯善县| 尚义县| 沂南县|