大家好，我是Echa。

上個月有部分前端友友私信小編咨詢 JAVAScript 中 Symbol 怎么使用的呢？在哪些應用場景下會用到這個Symbol？有哪些內置屬性？等等。問的問題五花八門，今天無意中翻到《JavaScript 權威指南》這本書集中有幾頁詳細解讀——Symbol 。

所以小編決定出一期關于Symbol 讀后感的文章來深入解讀它。閑話少說，直接進入主題。

全文大綱

Symbol 前身
Symbol 介紹
Symbol 使用注意事項
Symbol 的應用場景
Symbol 名下哪些屬性？

Symbol 前身

ES5的對象屬性名都是字符串，這很容易造成屬性名的沖突。 比如，你使用了一個他人提供的對象，但又想為這個對象添加新的方法，新方法的名字就有可能與現有方法產生沖突。如果有一種機制，保證每個屬性的名字都是獨一無二的就好了，這樣就從根本上防止屬性名的沖突。這就是ES6引入的Symbol的原因。

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

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

在JavaScript誕生之初，對象屬性只能使用字符串作為鍵，這導致了一些問題。例如，當兩個不同的對象試圖使用相同的字符串作為屬性名時，可能會導致屬性名沖突。此外，JavaScript中沒有一種簡單的方法來實現私有屬性或方法。

其實對于Symbol的追溯早在Lisp語言中就有體現：

(setq e (intern "echa-symbol"))

這里其實就是創建了一個名為 echa-symbol 的符號對象，并將其賦值給變量e。

另外，ES6引入Symbol其實離不開Ruby的身影，在Ruby中，可以使用冒號（:）來創建符號。冒號后面跟著符號的名稱，如：

:echa-symbol

可以看到其實Ruby的語法更加簡潔，定義和使用都是用冒號區分：

person = {
  'name' => 'Echa',
  'age' => 35,
  :gender => 'Male'
}
puts person[:gender]  # 輸出：'Male'

所以，在這樣的需求背景下，ES6在首批特性中包含了Symbol也不足為奇了。

Symbol 介紹

Symbol是ES6中新增的一種原始數據類型, 被劃分到了基本數據類型中基本數據類型: 字符串、數值、布爾、undefined、null、Symbol 引用數據類型: Object。

例如 number, boolean或者null，它們通常用于避免屬性名稱沖突，或模擬 JavaScript 對象的私有值。

您可以通過調用全局函數來創建 Symbol()：

const sym = Symbol();

Symbol() 函數接受一個參數，一個字符串 description 打印 Symbols 時會顯示。

const sym = Symbol('my description');
console.log(sym); 
// Prints "Symbol(my description)"

主要特征

Symbols 有兩個關鍵特征。

第一個關鍵特征是 沒有兩個 Symbols 永遠相等 。即使兩個 Symbols 具有相同的描述，它們也不相等。

let s1 = Symbol('foo');
let s2 = Symbol('foo');

console.log(s1 === s2)
//false

第二個關鍵特性是 對象鍵可以是 Symbols。通常對象鍵只能是 Symbols 或字符串。

const test = Symbol('test');
const obj = {};
obj.test = 'hello';
obj[test] = 'world';
obj.test;
// 'hello'obj[test];
// 'world'

由于沒有兩個 Symbols 永遠相等，因此除非您有權訪問 Symbols，否則您無法訪問 Symbols 屬性。這使得 Symbols 可以方便地創建只能在特定函數中訪問的隱藏值。

function addSymbol(obj) {  
  const sym = Symbol('test'); 
  obj[sym] = 'my hidden value'; 
  return obj;
}
const obj = addSymbol({});
// No way to access obj[sym] here, unless you explicitly look
// into `Object.getOwnPropertySymbols()`.

Symbols 也被排除在外JSON.stringify()輸出，這使得它們非常適合存儲最終用戶不應該看到的純程序數據。

Symbol 值最顯著的用途是作為對象屬性的 key。而 ES6 之前，屬性的 key 只能是字符串（否則也會發生自動類型轉換）。key 為 Symbol 值的屬性無法使用點號（.）訪問，只能使用中括號（[]）。類似地，在對象字面值或類定義中，添加 key 為 Symbol 值的屬性需要借助計算屬性名的語法，如：

const MY_KEY = Symbol();
const FOO = Symbol();
let obj = {
    [MY_KEY]: 123,
    [FOO]() {
        return 'bar';
    }
};

JavaScript 模塊化后，在模塊中創建 Symbol 值并用作對象屬性 key，模塊作者可以自信地認為該屬性不會覆寫對象上已有的屬性。類似道理，如果模塊中使用了 Symbol key 的對象屬性，只要不把 Symbol 值導出，就可以確信其他模塊不會不經意地覆寫該屬性。

對于應用開發者，Symbol 可以有這樣的使用場景：你從某第三方代碼獲得了一個對象，你想在該對象上存儲自己的屬性，但該第三方代碼是不透明的，或者不受你控制，所以你無從得知第三方代碼會在該對象上設置什么屬性，此時就可以使用 Symbol key 屬性，既能確信不會和已有屬性沖突，也能確信第三方代碼不會意外地修改你設置的屬性：

const extension = Symbol('my extension symbol');
let o = {
    [extension]: {/* 將擴展數據存儲于該對象*/}
};
o[extension].x = 0; // 無論怎樣都不可能和 o 的其他屬性產生沖突。

以上場景還可表述為給對象關聯一個值，但存儲關聯值的鍵名希望從機制上防止和其他屬性名沖突。另外也可用 WeakMap 存儲對象到其關聯值的映射，兩種方法的異曲同工之處是：當對象本身消亡時，該映射關系也隨之消亡。

然而，必須知道的是，Symbol key 屬性并不是一種安全機制，第三方代碼仍然可以調用
Object.getOwnPropertySymbols(o) 獲得對象上的 Symbol key 屬性，改變屬性值，但此時就是第三方庫有意為之，而不是不經意的行為了，但這應該會在其文檔上有所提及才對。

Symbol 使用注意事項

Symbol是基本數據類型！！！！不要加new哦
后面括號可以傳入一個字符串，只是一個標記，方便我們閱讀，沒有任何意義
類型轉化的時候不可轉化為數值

//只能轉化為字符串和布爾值
console.log(String(name));
console.log(Boolean(name));
console.log(Number(name))

不能做任何運算

let name=Symbol('Echa');
console.log(name+111)
console.log(name+'ccc')
//全部報錯

symbol生成的值作為屬性或者方法的時候，一定要保存下來，否則后續無法使用

let name=Symbol('name');
let obj={
  // name:'lnj',
    [Symbol('name')]:'lbj'
}
console.log(obj.name);  
//訪問不到，因為  [Symbol('name')]又是一個新的值，和上面的name不是同一個

for循環遍歷對象的時候是無法遍歷出symbol的屬性和方法的 Object.getOwnPropertySymbols()

et name=Symbol('name');
let obj={
  [name]:'lnj',
    age:12,
    teacher:'wyx'
}
for(let key in obj){
    console.log(key)   //只能打印出age和teacher
}
//這個方法可以單獨取出Symbol(name)
console.log(Object.getOwnPropertySymbols(obj))

Symbol 的應用場景

在企業開發中如果需要對一些第三方的插件、框架進行自定義的時候可能會因為添加了同名的屬性或者方法, 將框架中原有的屬性或者方法覆蓋掉為了避免這種情況的發生, 框架的作者或者我們就可以使用Symbol作為屬性或者方法的名稱。
消除魔術字符串

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

const gender = {
   //這樣就說明man就是一個獨一無二的值，不用再man:'man'   
    man: Symbol(),
    woman: Symbol(),
}
function isMan(gender) {
    switch (gender) {
        case gender.man:
            console.log('男性');
            break;
        case gender.woman:
            console.log('女性');
            break
    }
}
isMan(gender.man)  //男性

為對象定義一些非私有的、但又希望只用于內部的方法。

由于以 Symbol 值作為鍵名，不會被常規方法遍歷得到。我們可以利用這個特性，為對象定義一些非私有的、但又希望只用于內部的方法。

注意：symbol并不能實現真正的私有變量的效果，只是不能通過常規的遍歷方法拿到symbol類型的屬性而已

再來復習一下對象的遍歷方法

for (let xx in obj) :i代表key
for (let xx of obj)：不是自帶的哈
Object.keys(obj) :返回包含key的數組
Object.values(obj) :返回包含value的數組
Object.getOwnPropertyNames() ：返回包含key的數組

上述的所有方法都是遍歷不到symbol類型的（注意，是遍歷時取不到symbol，并不是說我們訪問不到對象的symbol類型）

可以遍歷到symbol的方法：

Object.getOwnPropertySymbols() ：返回對象中只包含symbol類型key的數組

Reflect.ownKeys() ：返回對象中所有類型key的數組（包含symbol）

let _password = Symbol('password')
const obj = {
    name: 'Echa',
    gender: 'male',
    [_password]: '123456'
}
for (let item in obj) {
    console.log(item);
}
console.log(Object.keys(obj));
console.log(Object.values(obj));
console.log(Object.getOwnPropertyNames(obj));
console.log(Object.getOwnPropertySymbols(obj));
console.log(Reflect.ownKeys(obj))
// 輸出123456，所以還是可以直接訪問到symbol類型的屬性，
//所以symbol并不能真正實現私有變量的設定，
//所以一般只用于定義一些非私有的、但又希望只用于內部的方法
console.log(obj[_password]);

Symbol 名下哪些屬性？

在 JavaScript 中，Symbol 是一種非常特殊的數據類型，可以用來表示獨一無二的值。每個 Symbol 值都是唯一的，一般可以作為對象屬性的標識符使用，這些屬性稱為 Symbol 屬性，它們不會與其他屬性產生命名沖突，所以可以用于實現一些高級特性和語言擴展。

Symbol 還有一些內置屬性，比如 Symbol.iterator、Symbol.toPrimitive 和 Symbol.toStringTag 等，它們在實現一些特殊的需求（比如自定義對象的迭代、類型轉換和字符串描述時）非常有用，今天我們就來一起看一下 Symbol 內置屬性的一些妙用，看看你知道幾個？

Symbol.iterator

Symbol.iterator 可以讓我們定義一個對象默認的迭代器。

有什么用途呢？正常的對象一般都是不可迭代的，如果我們直接用 for of 遍歷一個對象，會拋出異常：TypeError: obj is not iterable ，因為對象默認是不可迭代的。

我們可以用 for in 來做遍歷：

const obj = { name: 'ConardLi', age: 17 };

for (const key in obj) {
  if (Object.hasOwnProperty.call(obj, key)) {
    const element = obj[key];
    console.log(key, element);
  }
}

但是如果我們開發的是一個自定義的數據結構，for in 可能就不那么好使了，比如現在有一個音樂播放器對象，我們需要實現一個自定義的播放列表，用于存儲用戶添加的歌曲。這個列表可以看作一個集合，其中每個元素代表一個歌曲，包含歌曲的名稱、作者、時長等屬性。

這時我們就可以通過定義 Symbol.iterator 方法，讓這個列表可以通過 for...of循環進行遍歷：

class Song {
  constructor(name, artist, duration) {
    this.name = name;
    this.artist = artist;
    this.duration = duration;
  }
}

class Playlist {
  constructor() {
    this.songs = [];
  }

  addSong(song) {
    this.songs.push(song);
  }

  [Symbol.iterator]() {
    let index = 0;
    const songs = this.songs;
    return {
      next: () => ({
        value: songs[index++],
        done: index > songs.length
      })
    }
  }
}

const playlist = new Playlist();

playlist.addSong(new Song('Song 1', 'Artist 1', '3:45'));
playlist.addSong(new Song('Song 2', 'Artist 2', '4:20'));
playlist.addSong(new Song('Song 3', 'Artist 3', '5:10'));

for (const song of playlist) {
  console.log(song.name);
}

// 輸出：
// "Song 1"
// "Song 2"
// "Song 3"

Symbol.toStringTag

默認情況下，我們在任何一個自定義的對象上調用 toString 方法，返回值都是下面這樣：

[object Object]

Symbol.toStringTag 可以被用來自定義對象的 toString 方法的返回值（注意不是重寫 toString 方法），這個特性在調試的時候非常有用，幫助開發者更方便地了解對象的類型信息：

class People {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  get [Symbol.toStringTag]() {
    return 'People';
  }
}

const people = new People('ConardLi', 17);

console.log(people.toString()); // [object People]

Symbol.toPrimitive

Symbol.toPrimitive 可以被用來自定義對象類型轉換時的行為。它可以接受一個 hint 參數，用于指示對象應該被轉換成什么類型的值，比如 Number、String 或者其他默認的值。

舉一個實際的應用場景：假設我們正在開發一個日期處理工具，其中需要實現一個自定義的日期時間對象。這個對象包含日期時間的年月日時分秒等信息，這時候就可以用到 Symbol.toPrimitive 方法，來幫助我們自定義對象的類型轉換行為：

class MyDateTime {
  constructor(year, month, day, hour = 0, minute = 0, second = 0) {
    this._datetime = new Date(year, month - 1, day, hour, minute, second);
  }

  [Symbol.toPrimitive](hint) {
    switch (hint) {
      case 'number':
        return this._datetime.getTime();
      case 'string':
        return this._datetime.toLocaleString();
      default:
        return this._datetime.toString();
    }
  }
}

const myDate = new MyDateTime(2023, 4, 8, 15, 30, 0);

console.log(myDate); // 輸出：Sat Apr 08 2023 15:30:00 GMT+0800 (中國標準時間)
console.log(myDate + 10000); // 輸出：1699950200000
console.log(`${myDate}`); // 輸出："2023/4/8 下午3:30:00"

Symbol.asyncIterator

Symbol.asyncIterator 可以用來實現一個對象的異步迭代器，它可以用于遍歷異步數據流，比如異步生成器函數、異步可迭代對象等。這個特性在我們需要處理異步數據流時非常有用。

舉一個實際的應用場景：假設我們正在開發一個異步數據源處理器，其中包含了大量的異步數據，比如網絡請求、數據庫查詢等。這些數據需要被逐個獲取并處理，同時由于數據量非常大，一次性獲取全部數據會導致內存占用過大，因此需要使用異步迭代器來逐個獲取數據并進行處理：

class AsyncDataSource {
  constructor(data) {
    this._data = data;
  }

  async *[Symbol.asyncIterator]() {
    for (const item of this._data) {
      const result = awAIt this._processAsyncData(item);
      yield result;
    }
  }

  async _processAsyncData(item) {
    // 模擬異步處理數據的過程
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve(item.toUpperCase());
      }, Math.random() * 1000);
    });
  }
}

async function processData() {
  const dataSource = new AsyncDataSource(['a', 'b', 'c', 'd', 'e']);
  for await (const data of dataSource) {
    console.log(data);
  }
}

processData();

Symbol.hasInstance

Symbol.hasInstance可以用于確定一個對象是否是某個構造函數的實例，它可以用來改變 instanceof 的行為：

class MyArray {
  static [Symbol.hasInstance](instance) {
    return Array.isArray(instance);
  }
}

const arr = [1, 2, 3];
console.log(arr instanceof MyArray); // true

Symbol.species

Symbol.species 可以用于指定創建派生對象時要使用的構造函數。一個實際的需求場景可能是我們需要對一個類進行繼承，并且希望這個類的某些方法返回一個新的派生對象而不是基類的實例對象。下面是一個簡單的例子：

class MyArray extends Array {
  static get [Symbol.species]() {
    return Array;
  }

  test(){
    console.log('test');
  }
}

const myArray = new MyArray(1, 2, 3);
const mAppedArray = myArray.map(x => x * 2);
myArray.test();

console.log(mappedArray instanceof MyArray); // false
console.log(mappedArray instanceof Array); // true

Symbol.match

Symbol.match 可以用來確定使用 String.prototype.match 方法時要搜索的值，它可用于更改 match 類 RegExp 對象的方法行為，下面是一個實際實用案例：

class CustomRegExp extends RegExp {
  [Symbol.match](str) {
    const matches = super[Symbol.match](str);
    if (matches) {
      return matches.map(match => {
        return `匹配到了: ${match}`;
      });
    }
    return matches;
  }
}

const regex = new CustomRegExp('hello', 'g');
const result = 'hello world'.match(regex);
console.log(result); // ["匹配到了: hello"]

Symbol.replace

Symbol.replace 可以幫我們更靈活的處理 String.prototype.replace 方法，比如我們可以自定義字符串的替換行為。

比如有這樣一個需求場景：我們有一個字符串處理庫，我們想自定義它的 replace 方法，讓它可以替換一個字符串的所有元音字母。這時候就可以用到 Symbol.replace :

const vowels = ['a', 'e', 'i', 'o', 'u'];

const customReplace = str => {
  let result = '';
  for (let i = 0; i < str.length; i++) {
    if (vowels.includes(str[i])) {
      result += '*';
    } else {
      result += str[i];
    }
  }
  return result;
};

const customString = {
  [Symbol.replace]: customReplace
};

const originalString = "hello world";

const result = originalString.replace(customString, '');

console.log(result); // outputs "h*ll* w*rld"

Symbol.split

Symbol.split 可以用來確定使用 String.prototype.split 方法執行時具體要拆分的值。

一個實際需求場景：我們需要從文本中提取出所有的數字。但是文本中的數字可能包含在不同的字符和符號中，例如括號、分隔符和單位等。使用 Symbol.split 可以自定義分割符，這樣我們就可以根據自己的需求來對文本進行分割。

const customSplit = str => str.split(/[s$¥€]+/);

const customRegExp = {
  [Symbol.split]: customSplit
};

const string = "100$200¥300€400 500";

console.log(string.split(customRegExp)); // outputs [ '100', '200', '300', '400', '500' ]

Symbol.unscopables

Symbol.unscopables 通常可以用來避免在使用 with 語句時訪問對象中不希望被訪問的屬性。下面是一個示例，其中使用 with 語句訪問對象的某些屬性，但通過將這些屬性添加到 [Symbol.unscopables] 對象中，可以防止訪問：

const globalVars = {
  a: 10,
  b: 20,
  [Symbol.unscopables]: {
    b: true
  }
};

with (globalVars) {
  console.log(a); // 輸出 10
  console.log(b); // 拋出 ReferenceError
}