何為Symbol

ES5中對象的屬性名都是字符串，容易造成屬性名的沖突。也就是說，當我們在調用別人的對象的同時，又想為這個對象添加一個新的方法，這個新的方法名字就容易與原對象中已有的方法名沖突。ES6引入Symbol,就是為了解決這樣的問題。
Symbol是ES6新添加的一個基本數據類型。所以在ES6中一共有七種數據類型：undefined、null、Bollean、String、Number、Object以及Symbol.

創建Symbol

Symbol值通過Symbol函數生成。注意，Symbol前面不能使用new 運算符，否則會報錯。這是因為Symbol是一種原始數據類型，不是對象

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

Symbol函數可以接受字符串作為參數，這主要便于在控制顯示，或者轉為字符串時，方便區分。如：

var s1 = Symbol('foo');
var s2 = Symbol('bar');

s1 // Symbol(foo)
s2 // Symbol(bar)

s1.toString() // "Symbol(foo)"
s2.toString() // "Symbol(bar)"

注意： Symbol的參數僅用于對當前Symbol值的描述，并無其他實際意義。相同參數Symbol函數的返回值是不一樣的。

var s1 = Symbol();
var s2 = Symbol();
s1 === s2;      // false

var s1 = Symbol('foo');
var s2 = Symbol('foo');
s1 === s2;      // false

Symbol值不可與其他類型的值進行運算。

var sym = Symbol('My symbol');
"your symbol is " + sym
// TypeError: can't convert symbol to string
`your symbol is ${sym}`
// TypeError: can't convert symbol to string

但是，Symbol值可以顯示為字符串。

var sym = Symbol('My symbol');
String(sym) // 'Symbol(My symbol)'
sym.toString() // 'Symbol(My symbol)'

作為屬性名的Symbol

Symbol值作為對象的屬性名，有以下三種寫法：

var mySymbol = Symbol();

// 第一種寫法
var a = {};
a[mySymbol] = 'Hello!';

// 第二種寫法  在對象內部使用Symbol值定義屬性，Symbol值必須放在方括號中。
var a = {
    [mySymbol]: 'Hello!'
};

// 第三種學法
var a = {};
Object.defineProperty(a, mySymbol, {value: 'Hello!'});

注意：Symbol值作為對象屬性名時，不能用點運算符。因為點運算符后面總是字符串。

屬性名的遍歷 Object.getOwnPropertySymbols()

Object.getOwnPropertySymbols 返回的是一個數組，數組成員是作為當前對象的屬性名的Symbol值。

var obj = {};
var a = Symbol('a');
var b = Symbol('b');
obj[a] = 'Hello';
obj[b] = 'World';
var objectSymbols = Object.getOwnPropertySymbols(obj);
console.log(objectSymbols);     // [Symbol(a), Symbol(b)]

注意：Symbol 作為屬性名，該屬性不會出現在for...in、for...of循環中，也不會被Object.keys()、Object.getOwnPropertyNames()、JSON.stringify()返回。
Reflact.ownKeys()可以返回所有類型的鍵名，包括常規鍵名和Symbol鍵名。

let obj = {
  [Symbol('my_key')]: 1,
  enum: 2,
  nonEnum: 3
};

Reflect.ownKeys(obj)
//  ["enum", "nonEnum", Symbol(my_key)]

Symbol.for() Symbol.keyFor()

有時，我們希望重新使用同一個Symbol值，Symbol.for方法可以做到這一點。它接受一個字符串作為參數，然后搜索有沒有以該參數作為名稱的Symbol值。如果有，就返回這個Symbol值，否則就新建并返回一個以該字符串為名稱的Symbol值。
Symbol.for()和Symbol()都會生成新的Symbol.他們的區別是，Symbol.for()創建的Symbol是全局的，而Symbol()創建的是某個對象的Symbol值。Symbol.for()不會每次調用就返回一個新的Symbol類型的值，而是會先檢查給定的key是否已經存在，如果不存在才會新建一個值。比如，如果你調用Symbol.for("cat")30次，每次都會返回同一個Symbol值，但是調用Symbol("cat")30次，會返回30個不同的Symbol值。

Symbol.for("bar") === Symbol.for("bar")
// true

Symbol("bar") === Symbol("bar")
// false

Symbol.keyFor()返回Symbol.for()創建的Symbol值得key.

var s1 = Symbol.for('foo');
Symbol.keyFor(s1);  // 'foo'
var s2 = Symbol('foo');
Symbol.keyFor(s2);  // undefined

總結

以上是生活随笔為你收集整理的Symbol的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。