前端技術(shù)日新月異散罕，不斷有新技術(shù)出現(xiàn)，我們就需要不斷地學(xué)習(xí)新知識(shí)，雖然ES6已經(jīng)提出很久了碧浊，但是最近我才有時(shí)間靜下心來好好學(xué)習(xí)一下里面提出的新規(guī)則。今天總結(jié)下ES6提出的這個(gè)新的原始數(shù)據(jù)類型--Symbol瘟仿。
為啥需要Symbol
一個(gè)新規(guī)則的提出箱锐，必然是因?yàn)橛行枨螅煜S5的人都知道劳较，ES5里面對(duì)象的屬性名都是字符串驹止，如果你需要使用一個(gè)別人提供的對(duì)象，你對(duì)這個(gè)對(duì)象有哪些屬性也不是很清楚观蜗，但又想為這個(gè)對(duì)象新增一些屬性臊恋，那么你新增的屬性名就很可能和原來的屬性名發(fā)送沖突，顯然我們是不希望這種情況發(fā)生的墓捻。所以捞镰，我們需要確保每個(gè)屬性名都是獨(dú)一無二的，這樣就可以防止屬性名的沖突了。因此岸售，ES6里就引入了Symbol践樱，用它來產(chǎn)生一個(gè)獨(dú)一無二的值。
Sumbol是什么
我們已經(jīng)知道ES6中引入了一個(gè)叫Symbol的東西凸丸，但是這個(gè)東西到底是什么呢拷邢？是一個(gè)函數(shù)還是一個(gè)對(duì)象或者是其他什么？Symbol實(shí)際上是ES6引入的一種原始數(shù)據(jù)類型屎慢，除了Symbol瞭稼，JavaScript還有其他5種數(shù)據(jù)類型，分別是Undefined腻惠、Null环肘、Boolean、String集灌、Number悔雹、對(duì)象，這5種數(shù)據(jù)類型都是ES5中就有的欣喧。
怎么生成一個(gè)Symbol類型的值
既然我們已經(jīng)知道了Symbol是一種原始的數(shù)據(jù)類型腌零，那么怎么生成這種數(shù)據(jù)類型的值呢？Symbol值是通過Symbol函數(shù)生成的唆阿，如下：
let s = Symbol();
console.log(s); // Symbol()
typeof s; // "symbol"
上面代碼中益涧，s就是一個(gè)Symbol類型的值，它是獨(dú)一無二的驯鳖。
Symbol函數(shù)前不能用new
Symbol函數(shù)不是一個(gè)構(gòu)造函數(shù)闲询，前面不能用new操作符。所以Symbol類型的值也不是一個(gè)對(duì)象浅辙，不能添加任何屬性扭弧，它只是一個(gè)類似于字符型的數(shù)據(jù)類型。如果強(qiáng)行在Symbol函數(shù)前加上new操作符摔握，會(huì)報(bào)錯(cuò)寄狼，如下：
let s = new Symbol();
// Uncaught TypeError: Symbol is not a constructor(…)
Symbol函數(shù)的參數(shù)
字符串作為參數(shù)
用上面的方法生成的Symbol值不好進(jìn)行區(qū)分丁寄，Symbol函數(shù)還可以接受一個(gè)字符串參數(shù)氨淌，來對(duì)產(chǎn)生的Symbol值進(jìn)行描述，方便我們區(qū)分不同的Symbol值伊磺。
let s1 = Symbol('s1');
let s2 = Symbol('s2');
console.log(s1); // Symbol(s1)
console.log(s2); // Symbol(s2)
s1 === s2; // false
let s3 = Symbol('s2');
s2 === s3; // false
從上面代碼可以看出：
- 給Symbol函數(shù)加了參數(shù)之后盛正，控制臺(tái)輸出的時(shí)候可以區(qū)分到底是哪一個(gè)值；
- Symbol函數(shù)的參數(shù)只是對(duì)當(dāng)前Symbol值的描述屑埋，因此相同參數(shù)的Symbol函數(shù)返回值是不相等的豪筝；
對(duì)象作為參數(shù)
如果Symbol函數(shù)的參數(shù)是一個(gè)對(duì)象，就會(huì)調(diào)用該對(duì)象的toString方法，將其轉(zhuǎn)化為一個(gè)字符串续崖，然后才生成一個(gè)Symbol值敲街。所以，說到底严望，Symbol函數(shù)的參數(shù)只能是字符串多艇。
Symbol值可以進(jìn)行運(yùn)算么？
既然Symbol是一種數(shù)據(jù)類型像吻，那我們一定想知道Symbol值是否能進(jìn)行運(yùn)算峻黍。告訴你，Symbol值是不能進(jìn)行運(yùn)算的,不僅不能和Symbol值進(jìn)行運(yùn)算拨匆，也不能和其他類型的值進(jìn)行運(yùn)算姆涩，否則會(huì)報(bào)錯(cuò)。
Symbol值可以顯式轉(zhuǎn)化為字符串和布爾值惭每，但是不能轉(zhuǎn)為數(shù)值骨饿。
var mysym1 = Symbol('my symbol');
mysym1.toString() // 'Symbol('my symbol')'
String(mysym1) // 'Symbol('my symbol')'
var mysym2 = Symbol();
Boolean(mysym2); // true
Number(mysym2) // TypeError: Cannot convert a Symbol value to a number(…)
Symbol如何作為屬性名
Symbol就是為對(duì)象的屬性名而生，那么Symbol值怎么作為對(duì)象的屬性名呢洪鸭？有下面幾種寫法：
let a = {};
let s4 = Symbol();
// 第一種寫法
a[s4] = 'mySymbol';
// 第二種寫法
a = {
[s4]: 'mySymbol'
}
// 第三種寫法
Object.defineProperty(a, s4, {value: 'mySymbol'});
a.s4; // undefined
a.s4 = 'mySymbol';
a[s4] // undefined
a['s4'] // 'mySymbol'
從上面代碼可以看出：
- 使用對(duì)象的Symbol值作為屬性名時(shí)样刷，獲取相應(yīng)的屬性值不能用點(diǎn)運(yùn)算符；
- 如果用點(diǎn)運(yùn)算符來給對(duì)象的屬性賦Symbol類型的值览爵，實(shí)際上屬性名會(huì)變成一個(gè)字符串置鼻，而不是一個(gè)Symbol值；
- 在對(duì)象內(nèi)部蜓竹，使用Symbol值定義屬性時(shí)箕母，Symbol值必須放在方括號(hào)之中，否則只是一個(gè)字符串俱济。
Symbol值作為屬性名的遍歷
使用for...in和for...of都無法遍歷到Symbol值的屬性嘶是，Symbol值作為對(duì)象的屬性名，也無法通過Object.keys()蛛碌、Object.getOwnPropertyNames()來獲取了聂喇。但是，不同擔(dān)心蔚携，這種平常的需求肯定是會(huì)有解決辦法的希太。我們可以使用Object.getOwnPropertySymbols()方法獲取一個(gè)對(duì)象上的Symbol屬性名。也可以使用Reflect.ownKeys()返回所有類型的屬性名酝蜒，包括常規(guī)屬性名和 Symbol屬性名誊辉。
let s5 = Symbol('s5');
let s6 = Symbol('s6');
let a = {
[s5]: 's5',
[s6]: 's6'
}
Object.getOwnPropertySymbols(a); // [Symbol(s5), Symbol(s6)]
a.hello = 'hello';
Reflect.ownKeys(a); // ["hello", Symbol(s5), Symbol(s6)]
利用Symbol值作為對(duì)象屬性的名稱時(shí)，不會(huì)被常規(guī)方法遍歷到這一特性亡脑，可以為對(duì)象定義一些非私有的但是又希望只有內(nèi)部可用的方法堕澄。
Symbol.for()和Symbol.keyFor()
Symbol.for()函數(shù)也可以用來生成Symbol值邀跃，但該函數(shù)有一個(gè)特殊的用處，就是可以重復(fù)使用一個(gè)Symbol值蛙紫。
let s7 = Symbol.for('s7');
console.log(s7); // Symbol(s7)
s7.toString(); // "Symbol(s7)"
let s8 = Symbol.for('s8');
s7 === s8 // true
let s9 = Symbol();
Symbol.keyFor(s9); // undefined
Symbol.keyFor(s8); // "s8"
Symbol.for()函數(shù)要接受一個(gè)字符串作為參數(shù)拍屑，先搜索有沒有以該參數(shù)作為名稱的Symbol值，如果有坑傅，就直接返回這個(gè)Symbol值丽涩，否則就新建并返回一個(gè)以該字符串為名稱的Symbol值。上面代碼中裁蚁，s7和s8實(shí)際上就是同一個(gè)Symbol值矢渊，所以兩者是相等的。
Symbol.keyFor()函數(shù)是用來查找一個(gè)Symbol值的登記信息的枉证，Symbol()寫法沒有登記機(jī)制矮男，所以返回undefined；而Symbol.for()函數(shù)會(huì)將生成的Symbol值登記在全局環(huán)境中室谚，所以Symbol.keyFor()函數(shù)可以查找到用Symbol.for()函數(shù)生成的Symbol值毡鉴。
內(nèi)置Symbol值
ES6提供了11個(gè)內(nèi)置的Symbol值，分別是Symbol.hasInstance 秒赤、Symbol.isConcatSpreadable 猪瞬、Symbol.species 、Symbol.match 入篮、Symbol.replace 陈瘦、Symbol.search 、Symbol.split 潮售、Symbol.iterator 痊项、Symbol.toPrimitive 、Symbol.toStringTag 酥诽、Symbol.unscopables 等鞍泉。
有興趣的可以自行了解：http://es6.ruanyifeng.com/#docs/symbol
