本節將會重點分析ES6引入的第6種基本類型:Symbol(符號)。符號可以像字符串那樣作為對象的屬性名,只是它有唯一性的特點,可以避免屬性名之間的沖突。
## 一、創建
  符號沒有字面量形式,只能通過Symbol()函數創建。該函數有一個可選的參數,只是用來描述當前符號,除了便于閱讀之外,沒有其他用途。由此可知,即使兩個符號的描述相同,它們還是不能畫等號。注意,Symbol()不是構造函數,因此不能和new運算符組合使用,否則會拋出類型錯誤。下面用一個例子展示符號的創建。
~~~
var sym1 = Symbol(),
sym2 = Symbol("name"),
sym3 = Symbol("name"),
sym4 = new Symbol(); //拋出類型錯誤
console.log(sym2 === sym3); //false
~~~
  如果要識別一個變量是否為符號,可以用typeof運算符。ES6擴展了它,當檢測到符號時,能返回一個新的類型字符串“symbol”,具體如下所示。
~~~
typeof sym1; //"symbol"
typeof sym2; //"symbol"
~~~
## 二、類型轉換
  符號在類型轉換時表現得并不靈活,它無法與數字或字符串進行運算,也無法顯式的轉換成數字。如下所示,后面四條語句在執行時都會報錯。
~~~
var sym = Symbol("age");
Number(sym);
parseInt(sym);
1 + sym;
"" + sym;
~~~
  不過,符號可以顯式的轉換成字符串或布爾值,具體如下所示。
~~~
Boolean(sym); //true
!sym; //false
sym.toString(); //"Symbol(age)"
String(sym); //"Symbol(age)"
~~~
## 三、全局共享
  ES6會在內部維護一張全局符號注冊表,通過Symbol.for()方法,可以登記指定符號,使其變成一個全局有效地符號,從而達到全局共享。該方法只接收一個參數,這個參數既是注冊表中的鍵值,同時也是此符號的描述。下面的代碼調用了兩次Symbol.for()方法,傳遞了相同的參數,返回的卻是同一個全局符號。
~~~
var sym1 = Symbol.for("name"),
sym2 = Symbol.for("name");
console.log(sym1 === sym2); //true
~~~
  在上面的代碼中,第一次調用Symbol.for()方法時,會在注冊表中搜索鍵值為“name”的符號,由于沒有找到,所以就會創建一個新的符號。而在第二次調用Symbol.for()方法時,由于傳遞的鍵值與前一次相同,因此會返回剛剛的那個符號。從而可知,對變量sym1和sym2進行全等比較,返回的結果將是true。
  如果要獲取某個全局符號所對應的鍵值(即它的描述),那么可以通過Symbol.keyFor()實現,具體操作如下所示。
~~~
Symbol.keyFor(sym1); //"name"
Symbol.keyFor(sym2); //"name"
~~~
## 四、屬性名
  本節開頭曾提到過對象的屬性名可以用符號表示,而這類屬性可以有三種賦值方式。第一種是用方括號,注意,不能用點號,因為點號后面的標識符會被識別成字符串而不是符號。下面代碼分別用方括號和點號為obj對象的sym屬性賦值,前者被識別成了符號屬性,而后者卻被識別成了字符串屬性。
~~~
var sym = Symbol("name"),
obj = {};
obj[sym] = "strick";
obj.sym = "strick";
console.log(obj); //{Symbol(name): "strick", sym: "strick"}
~~~
  第二種是在創建對象字面量時,用計算屬性名的方式(即屬性名被方括號包裹)為其賦值,如下所示。
~~~
obj = {
[sym]: "freedom"
};
~~~
  第三種是調用Object.defineProperty()或Object.defineProperties()方法來為符號屬性賦值,如下所示。
~~~
Object.defineProperty(obj, sym, { value: "justice" });
~~~
  注意,符號屬性是不可枚舉的,既不能被for-in等循環遍歷到,也不能被Object.keys()、Object.getOwnPropertyNames()等方法讀取到。但可以通過Object.getOwnPropertySymbols()方法獲得對象的符號屬性,具體如下所示。
~~~
obj = {
[sym]: "freedom",
age: 28
};
Object.keys(obj); //["age"]
Object.getOwnPropertyNames(obj); //["age"]
Object.getOwnPropertySymbols(obj); //[Symbol(name)]
~~~
## 五、內置符號
  ES6提供了一些內置符號,也叫做知名符號(Well-Known Symbol)。它們暴露了語言的內部邏輯,允許開發人員修改或拓展規范所描述的對象特征或行為。每一個內置符號對應Symbol對象的一個屬性,例如Symbol.hasInstance、Symbol.iterator等,表1列出了11個內置符號。
:-: 
表1 內置符號
  下面會給出4個內置符號的示例,分別是hasInstance、isConcatSpreadable、match和toStringTag。
~~~
let digit = {
[Symbol.hasInstance](number) {
return !(number % 2); //判斷數字是否為偶數
}
};
1 instanceof digit; //false
2 instanceof digit; //true
let arr1 = [3, 4];
[1, 2].concat(arr1); //[1, 2, 3, 4]
let arr2 = [3, 4];
arr2[Symbol.isConcatSpreadable] = false; //禁止展開
[1, 2].concat(arr2); //[1, 2, [3, 4]]
let regex = {
[Symbol.match](str) {
return str.substr(0, 10);
}
},
message = "My name is strick";
message.match(regex); //"My name is"
let people = {
[Symbol.toStringTag]: "People"
};
people.toString(); //"[object People]"
~~~
*****
> 原文出處:
[博客園-ES6躬行記](https://www.cnblogs.com/strick/category/1372951.html)
[知乎專欄-ES6躬行記](https://zhuanlan.zhihu.com/pwes6)
已建立一個微信前端交流群,如要進群,請先加微信號freedom20180706或掃描下面的二維碼,請求中需注明“看云加群”,在通過請求后就會把你拉進來。還搜集整理了一套[面試資料](https://github.com/pwstrick/daily),歡迎瀏覽。

推薦一款前端監控腳本:[shin-monitor](https://github.com/pwstrick/shin-monitor),不僅能監控前端的錯誤、通信、打印等行為,還能計算各類性能參數,包括 FMP、LCP、FP 等。
- ES6
- 1、let和const
- 2、擴展運算符和剩余參數
- 3、解構
- 4、模板字面量
- 5、對象字面量的擴展
- 6、Symbol
- 7、代碼模塊化
- 8、數字
- 9、字符串
- 10、正則表達式
- 11、對象
- 12、數組
- 13、類型化數組
- 14、函數
- 15、箭頭函數和尾調用優化
- 16、Set
- 17、Map
- 18、迭代器
- 19、生成器
- 20、類
- 21、類的繼承
- 22、Promise
- 23、Promise的靜態方法和應用
- 24、代理和反射
- HTML
- 1、SVG
- 2、WebRTC基礎實踐
- 3、WebRTC視頻通話
- 4、Web音視頻基礎
- CSS進階
- 1、CSS基礎拾遺
- 2、偽類和偽元素
- 3、CSS屬性拾遺
- 4、浮動形狀
- 5、漸變
- 6、濾鏡
- 7、合成
- 8、裁剪和遮罩
- 9、網格布局
- 10、CSS方法論
- 11、管理后臺響應式改造
- React
- 1、函數式編程
- 2、JSX
- 3、組件
- 4、生命周期
- 5、React和DOM
- 6、事件
- 7、表單
- 8、樣式
- 9、組件通信
- 10、高階組件
- 11、Redux基礎
- 12、Redux中間件
- 13、React Router
- 14、測試框架
- 15、React Hooks
- 16、React源碼分析
- 利器
- 1、npm
- 2、Babel
- 3、webpack基礎
- 4、webpack進階
- 5、Git
- 6、Fiddler
- 7、自制腳手架
- 8、VSCode插件研發
- 9、WebView中的頁面調試方法
- Vue.js
- 1、數據綁定
- 2、指令
- 3、樣式和表單
- 4、組件
- 5、組件通信
- 6、內容分發
- 7、渲染函數和JSX
- 8、Vue Router
- 9、Vuex
- TypeScript
- 1、數據類型
- 2、接口
- 3、類
- 4、泛型
- 5、類型兼容性
- 6、高級類型
- 7、命名空間
- 8、裝飾器
- Node.js
- 1、Buffer、流和EventEmitter
- 2、文件系統和網絡
- 3、命令行工具
- 4、自建前端監控系統
- 5、定時任務的調試
- 6、自制短鏈系統
- 7、定時任務的進化史
- 8、通用接口
- 9、微前端實踐
- 10、接口日志查詢
- 11、E2E測試
- 12、BFF
- 13、MySQL歸檔
- 14、壓力測試
- 15、活動規則引擎
- 16、活動配置化
- 17、UmiJS版本升級
- 18、半吊子的可視化搭建系統
- 19、KOA源碼分析(上)
- 20、KOA源碼分析(下)
- 21、花10分鐘入門Node.js
- 22、Node環境升級日志
- 23、Worker threads
- 24、低代碼
- 25、Web自動化測試
- 26、接口攔截和頁面回放實驗
- 27、接口管理
- 28、Cypress自動化測試實踐
- 29、基于Electron的開播助手
- Node.js精進
- 1、模塊化
- 2、異步編程
- 3、流
- 4、事件觸發器
- 5、HTTP
- 6、文件
- 7、日志
- 8、錯誤處理
- 9、性能監控(上)
- 10、性能監控(下)
- 11、Socket.IO
- 12、ElasticSearch
- 監控系統
- 1、SDK
- 2、存儲和分析
- 3、性能監控
- 4、內存泄漏
- 5、小程序
- 6、較長的白屏時間
- 7、頁面奔潰
- 8、shin-monitor源碼分析
- 前端性能精進
- 1、優化方法論之測量
- 2、優化方法論之分析
- 3、瀏覽器之圖像
- 4、瀏覽器之呈現
- 5、瀏覽器之JavaScript
- 6、網絡
- 7、構建
- 前端體驗優化
- 1、概述
- 2、基建
- 3、后端
- 4、數據
- 5、后臺
- Web優化
- 1、CSS優化
- 2、JavaScript優化
- 3、圖像和網絡
- 4、用戶體驗和工具
- 5、網站優化
- 6、優化閉環實踐
- 數據結構與算法
- 1、鏈表
- 2、棧、隊列、散列表和位運算
- 3、二叉樹
- 4、二分查找
- 5、回溯算法
- 6、貪心算法
- 7、分治算法
- 8、動態規劃
- 程序員之路
- 大學
- 2011年
- 2012年
- 2013年
- 2014年
- 項目反思
- 前端基礎學習分享
- 2015年
- 再一次項目反思
- 然并卵
- PC網站CSS分享
- 2016年
- 制造自己的榫卯
- PrimusUI
- 2017年
- 工匠精神
- 2018年
- 2019年
- 前端學習之路分享
- 2020年
- 2021年
- 2022年
- 2023年
- 2024年
- 日志
- 2020