js-ES6學習筆記-Symbol

1、ES6引入了一種新的原始數據類型Symbol,表示獨一無二的值。它是JavaScript語言的第七種數據類型,前六種是:Undefined、Null、布爾值(Boolean)、字符串(String)、數值(Number)、對象(Object)。

2、Symbol值通過Symbol函數生成。這就是說,對象的屬性名現在可以有兩種類型,一種是原來就有的字符串,另一種就是新增的Symbol類型。凡是屬性名屬於Symbol類型,就都是獨一無二的,可以保證不會與其他屬性名產生衝突。

3、注意,Symbol函數前不能使用new命令,否則會報錯。這是因爲生成的Symbol是一個原始類型的值,不是對象。也就是說,由於Symbol值不是對象,所以不能添加屬性。基本上,它是一種類似於字符串的數據類型。

Symbol函數可以接受一個字符串作爲參數,表示對Symbol實例的描述,主要是爲了在控制檯顯示,或者轉爲字符串時,比較容易區分。

4、由於每一個Symbol值都是不相等的,這意味着Symbol值可以作爲標識符,用於對象的屬性名,就能保證不會出現同名的屬性。這對於一個對象由多個模塊構成的情況非常有用,能防止某一個鍵被不小心改寫或覆蓋。Symbol值作爲對象屬性名時,不能用點運算符。在對象的內部,使用Symbol值定義屬性時,Symbol值必須放在方括號之中。

5、Symbol實例:消除魔術字符串

魔術字符串指的是,在代碼之中多次出現、與代碼形成強耦合的某一個具體的字符串或者數值。風格良好的代碼,應該儘量消除魔術字符串,該由含義清晰的變量代替。

複製代碼

function getArea(shape, options) {
  var area = 0;

  switch (shape) {
    case 'Triangle': // 魔術字符串
      area = .5 * options.width * options.height;
      break;
    /* ... more code ... */
  }

  return area;
}

getArea('Triangle', { width: 100, height: 100 }); // 魔術字符串

複製代碼

上面代碼中,字符串“Triangle”就是一個魔術字符串。它多次出現,與代碼形成“強耦合”,不利於將來的修改和維護。

常用的消除魔術字符串的方法,就是把它寫成一個變量。

複製代碼

var shapeType = {
  triangle: 'Triangle'
};

function getArea(shape, options) {
  var area = 0;
  switch (shape) {
    case shapeType.triangle:
      area = .5 * options.width * options.height;
      break;
  }
  return area;
}

getArea(shapeType.triangle, { width: 100, height: 100 });

複製代碼

上面代碼中,我們把“Triangle”寫成shapeType對象的triangle屬性,這樣就消除了強耦合。

如果仔細分析,可以發現shapeType.triangle等於哪個值並不重要,只要確保不會跟其他shapeType屬性的值衝突即可。因此,這裏就很適合改用Symbol值。

const shapeType = {
  triangle: Symbol()
};

上面代碼中,除了將shapeType.triangle的值設爲一個Symbol,其他地方都不用修改。

摘自http://es6.ruanyifeng.com/#docs/symbol

6、有一個Object.getOwnPropertySymbols方法,可以獲取指定對象的所有 Symbol 屬性名。

Object.getOwnPropertySymbols方法返回一個數組,成員是當前對象的所有用作屬性名的 Symbol 值。

另一個新的API,Reflect.ownKeys方法可以返回所有類型的鍵名,包括常規鍵名和 Symbol 鍵名。

7、有時,我們希望重新使用同一個Symbol值,Symbol.for方法可以做到這一點。它接受一個字符串作爲參數,然後搜索有沒有以該參數作爲名稱的Symbol值。如果有,就返回這個Symbol值,否則就新建並返回一個以該字符串爲名稱的Symbol值。

Symbol.keyFor方法返回一個已登記的 Symbol 類型值的key

 

轉載自:https://www.cnblogs.com/zczhangcui/p/6435652.html

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章