Symbol 屬性 · 前端知識 -- 學習整理

[TOC] >[success] # Symbol [借鑒了阮一峰老師的es6](http://es6.ruanyifeng.com/#docs/symbol) [MDN關于Symbol粗略了解](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Symbol) ~~~ 1.ES6 引入了一種新的原始數據類型Symbol，表示獨一無二的值。它是 JavaScript 語言的第七種數據類型 2.Symbol函數前不能使用new命令，否則會報錯。這是因為生成的 Symbol 是一個原始類型的值，不是對象。也就是說，由于 Symbol 值不是對象，所以不能添加屬性。基本上，它是一種類似于字符串的數據類型。 3.Symbol函數可以接受一個字符串作為參數，表示對 Symbol 實例的描述，主要是為了在控制臺顯示，或者轉為字符串時，比較容易區分。 4. 在ts中想使用'Symbol' 需要在'tsconfig.json'的lib中配置 ["es6"] ~~~ >[danger] ##### Symbol -- 獨一無二特性(因此比較為false) ~~~ 1.下面的環境在js 中寫的，因為'Symbol ' 是獨一無二的，跟任何變量比較都是'false' 因此ts中會提示不用做比較因為是'false',所以下面的案例是在瀏覽器中直接運行的 2.'Symbol'函數的參數只是表示對當前 'Symbol' 值的描述，因此相同參數的 'Symbol'函數的返回值是不相等的。 3.下面案例中創建了兩'Symbol' ,打印的結果為false也說明了Symbol獨一無二的特性 ~~~ ~~~ const s1 = Symbol() console.log(s1) const s2 = Symbol() console.log(s2) console.log(s1 === s2) // 在ts中會提示錯誤的 ~~~ >[danger] ##### Symbol -- 接受參數用來區分 ~~~ 1.Symbol函數可以接受一個字符串作為參數，表示對 Symbol 實例的描述，主要是為了在控制臺顯示，或者轉為字符串時，比較容易區分。 2.下面的案例只是為了區分不同的'Symbol' 因此傳遞了字符串用來標記 ~~~ ~~~ const s4 = Symbol('wang') const s3 = Symbol('wang') console.log(s3) console.log(s4) console.log(s4 === s3) ~~~ * 打印結果 ~~~ Symbol(wang) Symbol(wang) false ~~~ >[danger] ##### Symbol -- 傳遞對象打印 ~~~ 1. 'Symbol' 的參數是一個對象，就會調用該對象的'toString'方法，將其轉為字符串，然后才生成一個 Symbol 值。 2.在'ts'中Symbol 只能是字符串類型或者數字類型，所以下面的案例是js中 ~~~ * 對象沒有 'toString' ~~~ const s3 = Symbol({ a: 'a' }) console.log(s3) // Symbol([object Object]) ts 這么寫會報錯 ~~~ * 對象有'toString' ~~~ const obj = { toString() { return 'abc'; } }; const sym = Symbol(obj); // 在ts 不允許的傳入對象，js中可以 sym // Symbol(abc) ~~~ >[danger] ##### Symbol -- 不能和其他值進行運算 ~~~ 1.'Symbol' 不能和其他值進行計算，但是可以將 'Symbol' 轉成'布爾'和'字符串類型' ~~~ * 錯誤的不能和其他值進行計算 ~~~ // const s4 = Symbol('wang') // s4 += "wang" ~~~ * 可以轉成布爾和字符 ~~~ const s4 = Symbol('wang') console.log(typeof s4.toString()) // string console.log(typeof Boolean(s4)) // boolean console.log(typeof !s4) // boolean ~~~ >[info] ## 在ts 中使用 Symbol 獨一無二特性 ~~~js 1.使用前了解 es6 新的定義對象key的變量寫法形式: // 使用[] 接受動態形式的key let prop = 'name' const info = { // name: 'lison' [`my${prop}is`]: 'lison', [prop]:'wang' } console.log(info) ~~~ >[danger] ##### Symbol -- 作為對象key的使用 ~~~ 1.利用'Symbol' 的特性對象的屬性名，就能保證不會出現同名的屬性 2.在對象的內部，使用 Symbol 值定義屬性時，Symbol 值必須放在方括號之中。 3.Symbol 值作為對象屬性名時，不能用點運算符 ~~~ ~~~ const s5 = Symbol('name') const info2 = { [s5]: 'wang', age: 18, sex: 'man' } console.log(info2) // {age: 18, sex: "man", Symbol(name): "wang"} info2[s5] = 'haha' // info2.s5 = 'haha' 錯誤寫法 console.log(info2) //{age: 18, sex: "man", Symbol(name): "haha"} ~~~ * 但value 是方法的時候 ~~~ // 縮寫 let obj = { [s](arg) { ... } }; ~~~ >[info] ## 獲取對象中Symbol -- 里面的key ~~~js 1.找出對象中的key三種方式(這三種都不會輸出key為Symbol的key)： 1.1 for(i in obj) 1.2.Object.keys() 1.3.Object.getOwnPropertyNames() 2.只打印key為Symbol的key: Object.getOwnPropertySymbols 3.全都打印：ownKeys ~~~ * for(i in obj) ~~~ const names = Symbol('names') let info2 = { [names]:'wang', age:16 } for (const key in info2) { console.log(key) } 打印結果：age ~~~ * Object.keys ~~~ const names = Symbol('names') let info2 = { [names]:'wang', age:16 } console.log(Object.keys(info2)) 打印結果：["age"] ~~~ * Object.getOwnPropertyNames ~~~ const names = Symbol('names') let info2 = { [names]:'wang', age:16 } console.log(Object.getOwnPropertyNames(info2)) 打印結果：["age"] ~~~ * JSON.stringify ~~~ const names = Symbol('names') let info2 = { [names]:'wang', age:16 } console.log(JSON.stringify(info2)) 打印結果：{"age":16} ~~~ * Object.getOwnPropertySymbols ~~~ const names = Symbol('names') let info2 = { [names]:'wang', age:16 } console.log(Object.getOwnPropertySymbols(info2)) // [Symbol(names)] ~~~ * ownKeys ~~~ const names = Symbol('names') let info2 = { [names]:'wang', age:16 } console.log(Reflect.ownKeys(info2)) // ["age", Symbol(names)] ~~~ * 強制更改 ~~~ const sy = Symbol('aaa') const obj = { [sy]: 1, } const [s] = Object.getOwnPropertySymbols(obj) obj[s] = 12 console.log(obj) // { [Symbol(aaa)]: 12 } ~~~ >[info] ## Symbol.for -- 使用同一個 Symbol 值 ~~~ 1.它接受一個字符串作為參數，然后搜索有沒有以該參數作為名稱的 Symbol 值。如果有，就返回這個 Symbol 值，否則就新建并返回一個以該字符串為名稱的 Symbol 值。 2.Symbol.for()與Symbol()這兩種寫法，都會生成新的 Symbol。它們的區別是，前者會被登記在全局環境中供搜索，后者不會。Symbol.for()不會每次調用就返回一個新的 Symbol 類型的值，而是會先檢查給定的key是否已經存在，如果不存在才會新建一個值 ~~~ >[danger] ##### 案例 ~~~ let s1 = Symbol.for('foo'); let s2 = Symbol.for('foo'); s1 === s2 // true ~~~ >[danger] ##### 使用Symbol.keyFor -- 找到Symbol.for 標記 ~~~ 1.用來找到Symbol.for 標記的字符串 ~~~ ~~~ const s10 = Symbol.for('haha') console.log(Symbol.keyFor(s10)) // haha ~~~ >[info] ## 總結 1. Symbol是ES6中新增的一個**基本數據類型** 2. 可以解決類似比如原來有一個對象，我們希望在其中添加一個**新的屬性和值**，但是我們在**不確定它原來內部有什么內容的情況下，很容易造成沖突，從而覆蓋掉它內部的某個屬性**