你知道JavaScript中的Symbol類型怎麼用嗎？

時間  2020-05-14
標籤 知道 javascript symbol 類型 怎麼 欄目 JavaScript 简体版
原文   原文鏈接

前言

ES5 的對象屬性名都是字符串，這容易形成屬性名衝突的問題。好比，你使用別人的模塊/對象, 又想爲之添加新的屬性,這就容易使得新屬性名與原有屬性名衝突。這就是 ES6 引入Symbol的緣由，symbol可以保證每一個屬性的名字獨一無二。javascript

1、Symbol介紹

Symbol是 ES6 引入了一種新的原始數據類型，它是一種特殊的、不可變的數據類型，能夠做爲對象屬性的標識符使用，表示獨一無二的值。凡是屬性名屬於 Symbol 類型，就都是獨一無二的，能夠保證不會與其餘屬性名產生衝突。前端

2、語法

Symbol 值經過Symbol() 函數生成，Symbol()函數前不能使用new命令，不然會報錯。這是由於生成的 Symbol 是一個原始類型的值，不是對象。也就是說，因爲 Symbol 值不是對象，因此不能添加屬性。基本上，它是一種相似於字符串的數據類型。
java

Symbol([description])數組

description ：可選的字符串。表示對symbol的描述，可用於調試但不訪問符號自己的符號的說明。若是不加參數，在控制檯打印的都是Symbol，不利於區分。
微信

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

// 上面代碼中，變量s就是一個獨一無二的值。
// typeof運算符的結果，代表變量s是Symbol數據類型，而不是字符串之類的其餘類型。複製代碼
let s1 = Symbol()
let s2 = Symbol()
s1 // Symbol()
s2 // Symbol()
// s1和s2是兩個 Symbol 值。若是不加參數，它們在控制檯的輸出都是Symbol()，不利於區分。

let s3 = Symbol('foo');
let s4 = Symbol('bar');
s3 // Symbol(foo)
s4 // Symbol(bar)
// 有了參數之後，就等於爲它們加上了描述，輸出的時候就可以分清，究竟是哪個值。

s3.toString() // "Symbol(foo)"
s4.toString() // "Symbol(bar)"複製代碼
// Symbol函數的參數只是表示對當前Symbol值的描述，所以相同參數的Symbol函數的返回值是不相等的。

// 沒有參數的狀況
let s1 = Symbol();
let s2 = Symbol();
s1 === s2 // false

// 有參數的狀況
let s1 = Symbol('foo');
let s2 = Symbol('foo');
s1 === s2 // false複製代碼

3、Symbol值的類型轉換與運算

【3.1】Symbol不能與其餘類型的值進行運算，會報錯函數

let sym = Symbol('My symbol');
console.log("your symbol is " + sym) // TypeError: can't convert symbol to string
console.log(`your symbol is ${sym}`) // TypeError: can't convert symbol to string
console.log(2 + sym) // TypeError: can't convert symbol to number複製代碼

【3.2】 Symbol 值能夠顯式轉爲字符串，也能夠轉爲布爾值，可是不能轉爲數值。ui

let sym = Symbol('My symbol');

// 轉字符串
String(sym)    // 'Symbol(My symbol)'
sym.toString() // 'Symbol(My symbol)'

// 轉布爾值
Boolean(sym) // true
!sym         // false

// 轉數字
Number(sym) // TypeError
sym + 2     // TypeError複製代碼

【3.3】Symbol.prototype.descriptionthis

上面代碼中，咱們能夠將Symbol值顯示轉換字符串，可是這種用法不是很方便，ES2019提供了一個實例屬性description，直接返回 Symbol 的描述。spa

const sym = Symbol('foo');
sym.description // "foo"
// sym的描述就是字符串foo複製代碼

4、Symbol應用場景

【4.1】做爲屬性名的使用prototype

因爲每個 Symbol 值都是不相等的，這意味着 Symbol 值能夠做爲標識符，用於對象的屬性名，就能保證不會出現同名的屬性。這對於一個對象由多個模塊構成的狀況很是有用，能防止某一個鍵被不當心改寫或覆蓋。注意，Symbol 值做爲對象屬性名時，不能用點運算符。

let mySymbol = Symbol();

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

// 第二種寫法
let a = {
    [mySymbol]: 'Hello!'
};

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

// 以上寫法都獲得一樣結果
a[mySymbol] // "Hello!"



// 不能用點運算符
const sym = Symbol();
const b = {};

b.sym = 'Hello!';
b[sym] // undefined 
b['sym'] // "Hello!" 字符串複製代碼

【4.1】定義常量

Symbol 類型還能夠用於定義一組常量，保證這組常量的值都是不相等的。

const RED = Symbol();
const BLACK = Symbol();

function getComplement(color) {
  switch (color) {
    case RED:
        return '紅色';
    case BLACK:
        return '黑色';
    default:
        throw new Error('不存在');
  }
}
getComplement(RED) // 紅色複製代碼

【4.3】Symbol類型的屬性具備必定的隱藏性

let name = Symbol('name');
let obj = {
    age: 22,
    [name]: 'Joh'
};
console.log(Object.keys(obj)); // ["age"], 打印不出類型爲Symbol的[name]屬性

// 使用for-in也打印不出 類型爲Symbol的[name]屬性
for (let k in obj) {
    console.log(k); // age
}

// 使用 Object.getOwnPropertyNames 一樣打印不出 類型爲Symbol的[name]屬性
console.log(Object.getOwnPropertyNames(obj)); ["age"]

// 使用 Object.getOwnPropertySymbols 能夠
let key = Object.getOwnPropertySymbols(obj)[0];
console.log(obj[key]); // Joh複製代碼

【4.4】Symbol.for 的應用

有時，咱們但願從新使用同一個 Symbol 值，Symbol.for方法能夠作到這一點。它接受一個字符串做爲參數，而後搜索有沒有以該參數做爲名稱的 Symbol 值。若是有，就返回這個 Symbol 值，不然就新建一個以該字符串爲名稱的 Symbol 值，並將其註冊到全局。

let s1 = Symbol.for('foo');
let s2 = Symbol.for('foo');
s1 === s2 // true
// 上面代碼中，s1和s2都是Symbol值，可是它們都是由一樣參數的Symbol.for方法生成的，因此其實是同一個值。

let s3 = Symbol('foo');
let s4 = Symbol('foo');
s3 === s4 // false
// 因爲Symbol()寫法沒有登記機制，因此每次調用都會返回一個不一樣的值。複製代碼

Symbol.for() 與 Symbol() 這兩種寫法，都會生成新的 Symbol。它們的區別是：

  1. Symbol.for() 會被登記在全局環境中供搜索，Symbol() 不會
  2. Symbol.for() 不會每次調用就返回一個新的 Symbol 類型的值，而是會先檢查給定的 key 是否已經存在，若是不存在纔會新建一個值。好比，若是你調用Symbol.for("cat") 30 次，每次都會返回同一個 Symbol 值，可是調用Symbol("cat") 30 次，會返回 30 個不一樣的 Symbol 值。

【4.5】Symbol.keyFor的應用

Symbol.keyFor()方法返回一個已登記的 Symbol 類型值的key。注意，Symbol.keyFor()在函數內部運行，可是生成的 Symbol 值也是登記在全局環境的。

let s1 = Symbol.for("foo");
Symbol.keyFor(s1) // "foo"

let s2 = Symbol("foo");
Symbol.keyFor(s2) // undefined
// 上面代碼中，變量s2屬於未登記的 Symbol 值，因此返回undefined


function bar() {
  return Symbol.for('bar');
}
const x = bar();
const y = Symbol.for('bar');
console.log(x === y); // true
// 上面代碼中，Symbol.for('bar')是函數內部運行的，可是生成的 Symbol 值是登記在全局環境的
// 因此，第二次運行Symbol.for('bar')能夠取到這個 Symbol 值。複製代碼

5、內置的Symbol值

除了定義本身使用的 Symbol 值之外，ES6 還提供了 11 個內置的 Symbol 值，指向語言內部使用的方法。

【5.1】Symbol.hasInstance

對象的Symbol.hasInstance ​​​​​​​屬性，指向一個內部方法。當其餘對象使用instanceof運算符，判斷是否爲該對象的實例時，會調用這個方法。好比，foo instanceof Foo

在語言內部，實際調用的是Foo[Symbol.hasInstance ​​​​​​​](foo) 

class MyClass {
  [Symbol.hasInstance](foo) {
    return foo instanceof Array;
  }
}

[1, 2, 3] instanceof new MyClass() // true

// 上面代碼中，MyClass是一個類，new MyClass()會返回一個實例。
// 該實例的Symbol.hasInstance方法，會在進行instanceof運算時自動調用，判斷左側的運算子是否爲Array的實例。複製代碼

【5.2】Symbol.isConcatSpreadable​​​​​​​

對象的Symbol.isConcatSpreadable​​​​​​​屬性等於一個布爾值，表示該對象用於Array.prototype.concat()時，是否能夠展開。

let arr1 = ['c', 'd'];
['a', 'b'].concat(arr1, 'e') // ['a', 'b', 'c', 'd', 'e']
arr1[Symbol.isConcatSpreadable] // undefined

let arr2 = ['c', 'd'];
arr2[Symbol.isConcatSpreadable] = false;
['a', 'b'].concat(arr2, 'e') // ['a', 'b', ['c','d'], 'e']

// 上面代碼說明，數組的默認行爲是能夠展開，Symbol.isConcatSpreadable默認等於undefined。
// 該屬性等於true時，也有展開的效果，和undefined同樣
// 該屬性等於false時，不展開 複製代碼

相似數組的對象正好相反，默認不展開。它的Symbol.isConcatSpreadable​​​​​​​屬性設爲true，才能夠展開。

let obj = {length: 2, 0: 'c', 1: 'd'};
['a', 'b'].concat(obj, 'e') // ['a', 'b', obj, 'e']

obj[Symbol.isConcatSpreadable] = true;
['a', 'b'].concat(obj, 'e') // ['a', 'b', 'c', 'd', 'e']

// 上面相似數組Symbol.isConcatSpreadable設爲true才能夠展開複製代碼

【5.3】Symbol.species

對象的Symbol.species屬性，指向一個構造函數。建立衍生對象時，會使用該屬性。

class MyArray extends Array {
}

const a = new MyArray(1, 2, 3);
const b = a.map(x => x);
const c = a.filter(x => x > 1);

b instanceof MyArray // true
c instanceof MyArray // true

// 上面代碼中，子類MyArray繼承了父類Array，a是MyArray的實例，b和c是a的衍生對象。
// 你可能會認爲，b和c都是調用數組方法生成的，因此應該是數組（Array的實例），但實際上它們也是MyArray的實例。複製代碼

Symbol.species屬性就是爲了解決這個問題而提供的。如今，咱們能夠爲myArray設置Symbol.species屬性。

class MyArray extends Array {
  static get [Symbol.species]() { return Array; }
}
// 上面代碼中，因爲定義了Symbol.species屬性，建立衍生對象時就會使用這個屬性返回的函數，做爲構造函數。
// 這個例子也說明，定義Symbol.species屬性要採用get取值器

const a = new MyArray();
const b = a.map(x => x);

b instanceof MyArray // false
b instanceof Array // true
// 上面代碼中，a.map(x => x)生成的衍生對象b，就不是MyArray的實例，而直接就是Array的實例。複製代碼

【5.4】Symbol.match

對象的 Symbol.match 屬性，指向一個函數。當執行 str.match(myObject) 時，若是該屬性存在，會調用它，返回該方法的返回值。

String.prototype.match(regexp)
// 等同於
regexp[Symbol.match](this)
class MyMatcher {
  [Symbol.match](string) {
    return 'hello world'.indexOf(string);
  }
}

'e'.match(new MyMatcher()) // 1複製代碼

【5.5】Symbol.replace

對象的Symbol.replace屬性，指向一個方法，當該對象被String.prototype.replace方法調用時，會返回該方法的返回值。Symbol.replace方法會收到兩個參數，第一個參數是replace方法正在做用的對象，第二個參數是替換後的值

String.prototype.replace(searchValue, replaceValue)
// 等同於
searchValue[Symbol.replace](this, replaceValue)


const x = {};
x[Symbol.replace] = (...s) => console.log(s);
'Hello'.replace(x, 'World') // ["Hello", "World"]
// 上面代碼中， Symbol.replace方法收到兩個參數
// 第一個參數是replace方法正在做用的對象，上面例子是Hello
// 第二個參數是替換後的值，上面例子是World。複製代碼

【5.6】Symbol.search

對象的Symbol.search屬性，指向一個方法，當該對象被String.prototype.search方法調用時，會返回該方法的返回值。

String.prototype.search(regexp)
// 等同於
regexp[Symbol.search](this)

class MySearch {
  constructor(value) {
    this.value = value;
  }
  [Symbol.search](string) {
    return string.indexOf(this.value);
  }
}
'foobar'.search(new MySearch('foo')) // 0複製代碼

【5.7】Symbol.split

對象的Symbol.split屬性，指向一個方法，當該對象被String.prototype.split方法調用時，會返回該方法的返回值。

String.prototype.split(separator, limit)
// 等同於
separator[Symbol.split](this, limit)

// 下面方法使用Symbol.split方法，從新定義了字符串對象的split方法的行爲
class MySplitter {
  constructor(value) {
    this.value = value;
  }
  [Symbol.split](string) {
    let index = string.indexOf(this.value);
    if (index === -1) {
      return string;
    }
    return [
      string.substr(0, index),
      string.substr(index + this.value.length)
    ];
  }
}

'foobar'.split(new MySplitter('foo'))
// ['', 'bar']

'foobar'.split(new MySplitter('bar'))
// ['foo', '']

'foobar'.split(new MySplitter('baz'))
// 'foobar'複製代碼

【5.8】Symbol.iterator

對象的Symbol.iterator屬性，指向該對象的默認遍歷器方法

const myIterable = {};
myIterable[Symbol.iterator] = function* () {
  yield 1;
  yield 2;
  yield 3;
};

[...myIterable] // [1, 2, 3]複製代碼

【5.9】Symbol.toPrimitive

對象的Symbol.toPrimitive 屬性，指向一個方法。該對象被轉爲原始類型的值時，會調用這個方法，返回該對象對應的原始類型值。Symbol.toPrimitive 被調用時，會接受一個字符串參數，表示當前運算的模式，一共有三種模式。

  • Number：該場合須要轉成數值
  • String：該場合須要轉成字符串
  • Default：該場合能夠轉成數值，也能夠轉成字符串
let obj = {
  [Symbol.toPrimitive](hint) {
    switch (hint) {
      case 'number':
        return 123;
      case 'string':
        return 'str';
      case 'default':
        return 'default';
      default:
        throw new Error();
     }
   }
};

2 * obj // 246
3 + obj // '3default'
obj == 'default' // true
String(obj) // 'str'複製代碼

【5.10】Symbol.toStringTag

對象的Symbol.toStringTag屬性，指向一個方法。在該對象上面調用Object.prototype.toString方法時，若是這個屬性存在，它的返回值會出如今toString方法返回的字符串之中，表示對象的類型。也就是說，這個屬性能夠用來定製[object Object]或[object Array]中object後面的那個字符串。

// 例一
({[Symbol.toStringTag]: 'Foo'}.toString())
// "[object Foo]"

// 例二
class Collection {
  get [Symbol.toStringTag]() {
    return 'xxx';
  }
}
let x = new Collection();
Object.prototype.toString.call(x) // "[object xxx]"複製代碼

【5.11】Symbol.unscopables

對象的Symbol.unscopables屬性，指向一個對象。該對象指定了使用with關鍵字時，那些屬性會被with環境排除。

Array.prototype[Symbol.unscopables]
// {
// copyWithin: true,
// entries: true,
// fill: true,
// find: true,
// findIndex: true,
// includes: true,
// keys: true
// }

Object.keys(Array.prototype[Symbol.unscopables])
// ['copyWithin', 'entries', 'fill', 'find', 'findIndex', 'includes', 'keys']
// 上面代碼說明，數組有 7 個屬性，會被with命令排除。複製代碼
// 沒有 unscopables 時
class MyClass {
  foo() { return 1; }
}

let foo = function () { return 2; };

with (MyClass.prototype) {
  foo(); // 1
}

// 有 unscopables 時
class MyClass {
  foo() { return 1; }
  get [Symbol.unscopables]() {
    return { foo: true };
  }
}

let foo = function () { return 2; };

with (MyClass.prototype) {
  foo(); // 2
}
// 上面代碼經過指定Symbol.unscopables屬性，使得with語法塊不會在當前做用域尋找foo屬性，即foo將指向外層做用域的變量。複製代碼

文章每週持續更新，能夠微信搜索「 前端大集錦 」第一時間閱讀，回覆【視頻】【書籍】領取200G視頻資料和30本PDF書籍資料

​

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程