ES6中Symbol、Set和Map用法詳解

本文實例講述了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 string
Boolean(s) // true
!s // false

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

let s = Symbol();
let obj = {};
obj[s] = 'hello world';
//或者
let obj = {
 [s] : 'hello world'
}
obj.s // undefined
obj[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")
// true
Symbol("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 // 2
s.has(1) // true
s.has(2) // true
s.has(3) // false
s.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
// blue
for (let item of set.values()) {
console.log(item);
}
// red
// green
// blue
for (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) // true
m.delete(o) // true
m.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) // 111
map.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"]]
//數組轉Map
const map = new Map([["name","hello"],[{},"world"]]);
map // {"name" => "hello", Object {} => "world"}

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。

更多關于JavaScript相關內容可查看本站專題：《javascript面向對象入門教程》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數學運算用法總結》

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

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com