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

Symbol

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

2.Symbol 值通過Symbol函數(shù)生成，可以作為對象的屬性名使用，保證不會與其他屬性名產(chǎn)生沖突；

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

ps：上面代碼表示創(chuàng)建一個Symbol變量，值得注意的是，Symbol函數(shù)前不能使用new命令，否則會報錯，也就是說Symbol 是一個原始類型的值，不是對象，也不能添加屬性；

3.Symbol函數(shù)可以接受一個字符串作為參數(shù)，表示對 Symbol 實例的描述，主要用于區(qū)分不同的 Symbol 變量；

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

ps：Symbol函數(shù)的參數(shù)只是表示對當(dāng)前 Symbol 值的描述，因此相同參數(shù)的Symbol函數(shù)的返回值是不相等的

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

4.Symbol 值不能與其他類型的值進(jìn)行運(yùn)算，但可以轉(zhuǎn)為布爾值，但是不能轉(zhuǎn)為數(shù)值；

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

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

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

6.Symbol 作為屬性名，不會被常規(guī)方法遍歷得到，即該屬性不會出現(xiàn)在for...in、for...of循環(huán)中，也不會被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方法接受一個字符串作為參數(shù)，然后搜索有沒有以該參數(shù)作為名稱的Symbol值。如果有，就返回這個Symbol值，否則就新建并返回一個以該字符串為名稱的Symbol值；它與Symbol()不同的是，Symbol.for()不會每次調(diào)用就返回一個新的 Symbol 類型的值，而是會先檢查給定的key是否已經(jīng)存在，如果不存在才會新建一個值，而 Symbol()每次都會返回3不同的Symbol值；

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

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

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

ps：Symbol.for為Symbol值登記的名字，是全局環(huán)境的，可以在不同的 iframe 或 service worker 中取到同一個值

Set 和 Map

1.ES6 提供了新的數(shù)據(jù)結(jié)構(gòu) Set。它類似于數(shù)組，但是成員的值都是唯一的，沒有重復(fù)的值，它 本身是一個構(gòu)造函數(shù)，用來生成 Set 數(shù)據(jù)結(jié)構(gòu)。

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

2.可以使用add(key)方法可以添加元素到Set中，可以重復(fù)添加，但不會有效果，值得注意的是向Set加入值的時候，不會發(fā)生類型轉(zhuǎn)換，即 5 和 "5" 是兩個不同的值，但在 Set 內(nèi)部，兩個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數(shù)據(jù)不重復(fù)的特性，提供一種新的數(shù)組去重方法

// 去除數(shù)組的重復(fù)成員

[...new Set(array)]
[...new Set([1,2,2,3,3,4,5,5])] //[1,2,3,4,5]

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

add(value)：添加某個值，返回Set結(jié)構(gòu)本身。
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 結(jié)構(gòu)的實例有四個遍歷方法，可以用于遍歷成員。

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

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

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 數(shù)據(jù)結(jié)構(gòu)，它類似于對象，也是鍵值對的集合，但是“鍵”的范圍不限于字符串，各種類型的值（包括對象）都可以當(dāng)作鍵，是一種更完善的 Hash 結(jié)構(gòu)實現(xiàn)。如果你需要“鍵值對”的數(shù)據(jù)結(jié)構(gòu)，Map 比 Object 更合適；

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

set(key，val)：添加某個值，返回Map結(jié)構(gòu)本身。
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 結(jié)構(gòu)才將其視為同一個鍵

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 的鍵實際上是跟內(nèi)存地址綁定的，只要內(nèi)存地址不一樣，就視為兩個鍵，因為 k1 和 k2 是兩個不同的對象，放在不同的內(nèi)存地址中，所以Map視為不同的鍵

9.Map 結(jié)構(gòu)原生提供三個遍歷器生成函數(shù)和一個遍歷方法。

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

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

10.可以使用擴(kuò)展運(yùn)算符（...）將Map轉(zhuǎn)換為數(shù)組，反過來，將數(shù)組傳入 Map 構(gòu)造函數(shù)，就可以轉(zhuǎn)為 Map了

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

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

更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專題：《javascript面向?qū)ο笕腴T教程》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

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

最新評論