記錄-Symbol學習筆記-有解無憂

這里給大家分享我在網上總結出來的一些知識，希望對大家有所幫助

Symbol是JavaScript中的原始資料型別之一，它表示一個唯一的、不可變的值，通常用作物件屬性的鍵值，由于Symbol值是唯一的，因此可以防止物件屬性被意外地覆寫或修改，以下是Symbol的方法和屬性整理：

屬性

Symbol.length

Symbol建構式的length屬性值為0，

示例代碼：

console.log(Symbol.length); // 0

方法

Symbol.for()

Symbol.for()方法會根據給定的字串key，回傳一個已經存在的symbol值，如果不存在，則會創建一個新的Symbol值并將其注冊到全域Symbol注冊表中，

示例代碼：

const symbol1 = Symbol.for('foo');
const symbol2 = Symbol.for('foo');

console.log(symbol1 === symbol2); // true

使用場景：當我們需要使用一個全域唯一的Symbol值時，可以使用Symbol.for()方法來獲取或創建該值，例如，在多個模塊之間共享某個Symbol值時，我們可以使用Symbol.for()來確保獲取到的Symbol值是唯一的，

Symbol.keyFor()

Symbol.keyFor()方法會回傳一個已經存在的Symbol值的key，如果給定的Symbol值不存在于全域Symbol注冊表中，則回傳undefined，

示例代碼：

const symbol1 = Symbol.for('foo');
const key1 = Symbol.keyFor(symbol1);

const symbol2 = Symbol('bar');
const key2 = Symbol.keyFor(symbol2);

console.log(key1); // 'foo'
console.log(key2); // undefined

使用場景：當我們需要獲取一個全域唯一的Symbol值的key時，可以使用Symbol.keyFor()方法，但需要注意的是，只有在該Symbol值被注冊到全域Symbol注冊表中時，才能使用Symbol.keyFor()方法獲取到其key，

Symbol()

Symbol()函式會回傳一個新的、唯一的Symbol值，可以使用可選引數description來為Symbol值添加一個描述資訊，

示例代碼：

const symbol1 = Symbol('foo');
const symbol2 = Symbol('foo');

console.log(symbol1 === symbol2); // false

使用場景：當我們需要使用一個唯一的Symbol值時，可以使用Symbol()函式來創建該值，通常情況下，我們會將Symbol值用作物件屬性的鍵值，以確保該屬性不會被意外地覆寫或修改，

Symbol.prototype.toString()

Symbol.prototype.toString()方法會回傳Symbol值的字串表示形式，該表示形式包含Symbol()函式創建時指定的描述資訊，

示例代碼：

const symbol = Symbol('foo');

console.log(symbol.toString()); // 'Symbol(foo)'

使用場景：當我們需要將一個Symbol值轉換成字串時，可以使用Symbol.prototype.toString()方法，

Symbol.prototype.valueOf()

Symbol.prototype.valueOf()方法會回傳Symbol值本身，

示例代碼：

const symbol = Symbol('foo');

console.log(symbol.valueOf()); // Symbol(foo)

使用場景：當我們需要獲取一個Symbol值本身時，可以使用Symbol.prototype.valueOf()方法，

Symbol.iterator

Symbol.iterator是一個預定義好的Symbol值，表示物件的默認迭代器方法，該方法回傳一個迭代器物件，可以用于遍歷該物件的所有可遍歷屬性，

示例代碼：

const obj = { a: 1, b: 2 };

for (const key of Object.keys(obj)) {
  console.log(key);
}
// Output:
// 'a'
// 'b'

for (const key of Object.getOwnPropertyNames(obj)) {
  console.log(key);
}
// Output:
// 'a'
// 'b'

for (const key of Object.getOwnPropertySymbols(obj)) {
  console.log(key);
}
// Output: 
// No output

obj[Symbol.iterator] = function* () {
  for (const key of Object.keys(this)) {
    yield key;
  }
}

for (const key of obj) {
  console.log(key);
}
// Output:
// 'a'
// 'b'

使用場景：當我們需要自定義一個物件的迭代行為時，可以通過定義Symbol.iterator屬性來實作，例如，對于自定義的資料結構，我們可以定義它的Symbol.iterator方法以便能夠使用for...of陳述句進行遍歷，

Symbol.hasInstance

Symbol.hasInstance是一個預定義好的Symbol值，用于定義物件的 instanceof 運算子行為，當一個物件的原型鏈中存在Symbol.hasInstance方法時，該物件可以被instanceof運算子使用，

示例代碼：

class Foo {
  static [Symbol.hasInstance](obj) {
    return obj instanceof Array;
  }
}

console.log([] instanceof Foo); // true
console.log({} instanceof Foo); // false

使用場景：當我們需要自定義一個物件的 instanceof 行為時，可以通過定義Symbol.hasInstance方法來實作，

Symbol.isConcatSpreadable

Symbol.isConcatSpreadable是一個預定義好的Symbol值，用于定義物件在使用concat()方法時的展開行為，如果一個物件的Symbol.isConcatSpreadable屬性為false，則在呼叫concat()方法時，該物件不會被展開，

示例代碼：

const arr1 = [1, 2];
const arr2 = [3, 4];
const obj = { length: 2, 0: 5, 1: 6, [Symbol.isConcatSpreadable]: false };

console.log(arr1.concat(arr2)); // [1, 2, 3, 4]
console.log(arr1.concat(obj)); // [1, 2, { length: 2, 0: 5, 1: 6, [Symbol(Symbol.isConcatSpreadable)]: false }]

使用場景：當我們需要自定義一個物件在使用concat()方法時的展開行為時，可以通過定義Symbol.isConcatSpreadable屬性來實作，

Symbol.toPrimitive

Symbol.toPrimitive是一個預定義好的Symbol值，用于定義物件在被強制型別轉換時的行為，如果一個物件定義了Symbol.toPrimitive方法，則在將該物件轉換為原始值時，會呼叫該方法，

示例代碼：

const obj = {
  valueOf() {
    return 1;
  },
  [Symbol.toPrimitive](hint) {
    if (hint === 'number') {
      return 2;
    } else if (hint === 'string') {
      return 'foo';
    } else {
      return 'default';
    }
  }
};

console.log(+obj); // 2
console.log(`${obj}`); // 'foo'
console.log(obj + ''); // 'default'

使用場景：當我們需要自定義一個物件在被強制型別轉換時的行為時，可以通過定義Symbol.toPrimitive方法來實作，

Symbol.toStringTag

Symbol.toStringTag是一個預定義好的Symbol值，用于定義物件在呼叫Object.prototype.toString()方法時回傳的字串，如果一個物件定義了Symbol.toStringTag屬性，則在呼叫該物件的toString()方法時，會回傳該屬性對應的字串，

示例代碼：

class Foo {
  get [Symbol.toStringTag]() {
    return 'Bar';
  }
}

console.log(Object.prototype.toString.call(new Foo())); // '[object Bar]'

使用場景：當我們需要自定義一個物件在呼叫Object.prototype.toString()方法時回傳的字串時，可以通過定義Symbol.toStringTag屬性來實作，

Symbol.species

Symbol.species是一個預定義好的Symbol值，用于定義派生物件的建構式，如果一個物件定義了Symbol.species屬性，則在呼叫該物件的派生方法（如Array.prototype.map()）時，回傳的新物件會使用該屬性指定的建構式，

示例代碼：

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

const myArr = new MyArray(1, 2, 3);
const arr = myArr.map(x => x * 2);

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

使用場景：當我們需要自定義一個派生物件的建構式時，可以通過定義Symbol.species屬性來實作，

Symbol.match

Symbol.match是一個預定義好的Symbol值，用于定義物件在呼叫String.prototype.match()方法時的行為，如果一個物件定義了Symbol.match方法，則在呼叫該物件的match()方法時，會呼叫該方法進行匹配，

示例代碼：

class Foo {
  [Symbol.match](str) {
    return str.indexOf('foo') !== -1;
  }
}

console.log('foobar'.match(new Foo())); // true
console.log('barbaz'.match(new Foo())); // false

使用場景：當我們需要自定義一個物件在呼叫String.prototype.match()方法時的行為時，可以通過定義Symbol.match方法來實作，

Symbol.replace

Symbol.replace是一個預定義好的Symbol值，用于定義物件在呼叫String.prototype.replace()方法時的行為，如果一個物件定義了Symbol.replace方法，則在呼叫該物件的replace()方法時，會呼叫該方法進行替換，

示例代碼：

class Foo {
  [Symbol.replace](str, replacement) {
    return str.replace('foo', replacement);
  }
}

console.log('foobar'.replace(new Foo(), 'baz')); // 'bazbar'
console.log('barbaz'.replace(new Foo(), 'baz')); // 'barbaz'

使用場景：當我們需要自定義一個物件在呼叫String.prototype.replace()方法時的行為時，可以通過定義Symbol.replace方法來實作，

Symbol.search

Symbol.search是一個預定義好的Symbol值，用于定義物件在呼叫String.prototype.search()方法時的行為，如果一個物件定義了Symbol.search

class Foo {
  [Symbol.search](str) {
    return str.indexOf('foo');
  }
}

console.log('foobar'.search(new Foo())); // 0
console.log('barbaz'.search(new Foo())); // -1

使用場景：當我們需要自定義一個物件在呼叫String.prototype.search()方法時的行為時，可以通過定義Symbol.search方法來實作，

Symbol.split

Symbol.split是一個預定義好的Symbol值，用于定義物件在呼叫String.prototype.split()方法時的行為，如果一個物件定義了Symbol.split方法，則在呼叫該物件的split()方法時，會呼叫該方法進行分割，

示例代碼：

class Foo {
  [Symbol.split](str) {
    return str.split(' ');
  }
}

console.log('foo bar baz'.split(new Foo())); // ['foo', 'bar', 'baz']
console.log('foobarbaz'.split(new Foo())); // ['foobarbaz']

使用場景：當我們需要自定義一個物件在呼叫String.prototype.split()方法時的行為時，可以通過定義Symbol.split方法來實作，

Symbol.iterator

Symbol.iterator是一個預定義好的Symbol值，用于定義物件在被遍歷時的行為，如果一個物件定義了Symbol.iterator方法，則可以使用for...of回圈、擴展運算子等方式來遍歷該物件，

示例代碼：

class Foo {
  constructor() {
    this.items = ['foo', 'bar', 'baz'];
  }

  *[Symbol.iterator]() {
    for (const item of this.items) {
      yield item;
    }
  }
}

const foo = new Foo();

for (const item of foo) {
  console.log(item);
}

// 'foo'
// 'bar'
// 'baz'

使用場景：當我們需要自定義一個物件在被遍歷時的行為時，可以通過定義Symbol.iterator方法來實作，比如，我們可以通過實作Symbol.iterator方法來支持自定義資料結構的遍歷，

Symbol.toPrimitive

Symbol.toPrimitive是一個預定義好的Symbol值，用于定義物件在被強制型別轉換時的行為，如果一個物件定義了Symbol.toPrimitive方法，則可以通過呼叫該方法來進行強制型別轉換，

示例代碼：

const obj = {
  valueOf() {
    return 1;
  },
  [Symbol.toPrimitive](hint) {
    if (hint === 'default') {
      return 'default';
    } else if (hint === 'number') {
      return 2;
    } else {
      return 'foo';
    }
  }
};

console.log(+obj); // 2
console.log(`${obj}`); // 'foo'
console.log(obj + ''); // 'default'

使用場景：當我們需要自定義一個物件在被強制型別轉換時的行為時，可以通過定義Symbol.toPrimitive方法來實作，

Symbol.toStringTag

示例代碼：

class Foo {
  get [Symbol.toStringTag]() {
    return 'Bar';
  }
}

console.log(Object.prototype.toString.call(new Foo())); // '[object Bar]'

使用場景：當我們需要自定義一個物件在呼叫Object.prototype.toString()方法時回傳的字串時，可以通過定義Symbol.toStringTag屬性來實作，這樣做有助于我們更清晰地表示物件的型別，

Symbol.unscopables

Symbol.unscopables是一個預定義好的Symbol值，用于定義物件在使用with陳述句時的行為，如果一個物件定義了Symbol.unscopables屬性，則在使用with陳述句時，該物件的指定屬性將不會被系結到with陳述句的環境中，

示例代碼：

const obj = {
  a: 1,
  b: 2,
  c: 3,
  [Symbol.unscopables]: {
    c: true
  }
};

with (obj) {
  console.log(a); // 1
  console.log(b); // 2
  console.log(c); // ReferenceError: c is not defined
}

使用場景：由于with陳述句會帶來一些安全性問題和性能問題，因此在實際開發中不建議使用，但是，如果確實需要使用with陳述句，可以通過定義Symbol.unscopables屬性來避免某些屬性被誤系結到with陳述句的環境中，

Symbol.hasInstance

Symbol.hasInstance是一個預定義好的Symbol值，用于定義物件在呼叫instanceof運算子時的行為，如果一個物件定義了Symbol.hasInstance方法，則在呼叫該物件的instanceof運算子時，會呼叫該方法來判斷目標物件是否為該物件的實體，

示例代碼：

class Foo {
  static [Symbol.hasInstance](obj) {
    return Array.isArray(obj);
  }
}

console.log([] instanceof Foo); // true
console.log({} instanceof Foo); // false

使用場景：當我們需要自定義一個物件在呼叫instanceof運算子時的行為時，可以通過定義Symbol.hasInstance方法來實作，比如，我們可以通過實作Symbol.hasInstance方法來支持自定義資料型別的判斷，

總結

Symbol是ES6中新增的一種基本資料型別，用于表示獨一無二的值，Symbol值在語言層面上解決了屬性名沖突的問題，可以作為物件的屬性名使用，并且不會被意外覆寫，除此之外，Symbol還具有以下特點：

Symbol值是唯一的，每個Symbol值都是獨一無二的，即使是通過相同的描述字串創建的Symbol值，也不會相等；
Symbol值可以作為物件的屬性名使用，并且不會被意外覆寫；
Symbol值可以作為私有屬性來使用，因為無法通過物件外部訪問物件中的Symbol屬性；
Symbol值可以被用作常量，因為它們是唯一的；
Symbol值可以用于定義迭代器、型別轉換規則、私有屬性、元編程等高級功能，

在使用Symbol時需要注意以下幾點：

Symbol值不能使用new運算子創建；
Symbol值可以通過描述字串來創建，但是描述字串并不是Symbol值的唯一識別符號；
Symbol屬性在使用時需要用[]來訪問，不能使用.運算子；
同一物件中的多個Symbol屬性是獨立的，它們之間不會互相影響，

總之，Symbol是一個非常有用的資料型別，在JavaScript中具有非常廣泛的應用，使用Symbol可以有效地避免屬性名沖突問題，并且可以為物件提供一些高級功能，熟練掌握Symbol，有助于我們寫出更加健壯、高效和可維護的JavaScript代碼，

本文轉載于:

https://juejin.cn/post/7226193000496463928

如果對您有所幫助，歡迎您點個關注，我會定時更新技術檔案，大家一起討論學習，一起進步，

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/551768.html

標籤：JavaScript

上一篇：HTML5中的document.visibilityState

下一篇：返回列表