ES6 之 Symbol

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

1. 基本用法

Symbol 是ES6引入的一种新的原始数据类型，表示独一无二的值。

前六种基础数据类型是 undefined null Boolean String Number Object

Symbol 值通过Symbol函数生成可以接受一个字符串作为参数，主要为了区分不同Symbol值

参数若是一个对象，则会调用该对象的 toString 方法转成字符串传递给Symbol

*** 参数只做为一个描述存在，同样的参数生成的Symbol也不相等

***** 不能用 new 创建

围绕原始数据类型创建一个显式包装器对象从 ECMAScript 6 开始不再被支持。然而，现有的原始包装器对象，如 new Boolean、new String以及new Number，因为遗留原因仍可被创建。

 let s1 = Symbol('foo');

 let s2 = Symbol('bar');

 let s3 = Symbol('bar');

 console.log(s1);  // Symbol(foo)

 console.log(typeof s1); // symbol

 console.log(String(s2)); // "Symbol(bar)"  不能用new String

 console.log(Boolean(s2)); // true

 console.log(Number(s2)); // 报错 TypeError: Cannot convert a Symbol value to a number

 console.log(s2 === s3); //false

 console.log(s3.description); //"bar"  (ES2019)

 let obj1 = {

   a: 12

 };

 let obj2 = {

   a: 12,

   toString() {}

 };

 let obj3 = {

   a: 12,

   toString() {

     return this.a;

   }

 };

 let s4 = Symbol(obj1);

 let s5 = Symbol(obj2);

 let s6 = Symbol(obj3);

 console.log(s4);  //Symbol([object Object])

 console.log(s5);  //Symbol(undefined)

 console.log(s6);  //Symbol(12)

2. 使用场景

基本应用场景有两种，一是作为key ，一是作为value

***作为key时只能用 [] 定义 , 不能用 .

 let s7 = Symbol();

 let s8 = Symbol();

 let s9 = Symbol();

 let jo = {

   name: 'nan',

   age: 18,

   [s7]: 'Hi'

 };

 jo[s8] = 'hook';

 Object.defineProperty(jo, s9, {

   value: 'jay',

   enumerable: true

 })

 console.log(jo); //{ name: 'nan', age: 18, [Symbol()]: 'Hi', [Symbol()]: 'hook', [Symbol()]: 'jay' }

 console.log(jo[s8]);  //hook

 // 是无法通过正常的遍历方法取到Symbol 属性名的

 // for...in / for...of / Object.keys() / Object.getOwnPropertyNames() / JSON.stringify()

 // 可以通过 Object.getOwnPropertySymbols() / Reflect.ownKeys()

 // 可以利用这个特点来定义一些不暴露出去的属性或方法

 console.log(Object.keys(jo)); //[ 'name', 'age' ]

 console.log(Object.getOwnPropertyNames(jo)); //[ 'name', 'age' ]

 console.log(Object.getOwnPropertySymbols(jo));  //[ Symbol(), Symbol(), Symbol() ]

 console.log(Reflect.ownKeys(jo)); //[ 'name', 'age', Symbol(), Symbol(), Symbol() ]

***作为value ，可以定义一组常量，并且保证这些常量的值不想等

当只想定义一组常量，并不关心值的时候，就可以使用Symbol来定义

 const PENDING = Symbol();

 const SUCCESS = Symbol();

 const FAIL = Symbol();

 class Promise {

   constructor (executor) {

       this.state = PENDING;

       let resolve = value => {

           if (this.state === PENDING) {

               this.state = SUCCESS;

               // ...

           }

       }

       let reject = reason => {

           if (this.state === PENDING) {

               this.state = FAIL;

               // ...

           }

       }

       executor(resolve, reject);

   }

 }

3. Symbol.for() & Symbol.keyFor()

Symbol.for() 接收一个字符串，然后搜索有没有以该参数作为名称的 Symbol 值, 有则直接返回，没有创建一个新的Symbol 且注册到全局 (可以应用到iframe中)

Symbol.keyFor 返回一个Symbol.for登记过值的 key

 let s10 = Symbol.for('foo');

 let s11 = Symbol('foo');

 console.log(Symbol.for('foo') === s10); //true

 console.log(s11 === s10); //false

 console.log(Symbol.keyFor(s10));  //"foo"

 console.log(Symbol.keyFor(s11));  //undefined

4. 属性

1). Symbol.hasInstance 用于判断某对象是否为某构造器的实例。因此你可以用它自定义 instanceof 操作符在某个类上的行为。

 class Counts {

   static [Symbol.hasInstance](instance) {

     return !(instance % 2); //是否被 2 整除

   }

 }

 console.log(1 instanceof Counts); //false

 console.log(4 instanceof Counts); // true

2). Symbol.isConcatSpreadable 符号用于配置某对象作为Array.prototype.concat()方法的参数时是否展开其数组元素。

 let arr1 = [1, 2, 3];

 let arr2 = ['a', 'b'];

 console.log(arr1.concat(arr2)); //[ 1, 2, 3, 'a', 'b' ]

 arr2[Symbol.isConcatSpreadable] = false;

 console.log(arr1.concat(arr2)); //[ 1, 2, 3, ['a', 'b'] ]

3). Symbol.species 是个函数值属性，其被构造函数用以创建派生对象。

***你可能想在扩展数组类 MyArray 上返回 Array 对象。例如，当使用例如 map() 这样的方法返回默认的构造函数时，你希望这些方法能够返回父级的 Array 对象，以取代 MyArray 对象。Symbol.species 允许你这么做：

 class MyArray extends Array {

   // 覆盖 species 到父级的 Array 构造函数上

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

 }

 let a = new MyArray(1,2,3);

 let mapped = a.map(x => x * x);

 console.log(mapped instanceof MyArray); // false

 console.log(mapped instanceof Array);   // true

4). Symbol.iterator 为每一个对象定义了默认的迭代器。该迭代器可以被 for...of 循环使用。

 let myIterable = {}

 myIterable[Symbol.iterator] = function* () {

     let i = 0;

     while (i < 5) {

       yield i;

       i++;

     }

 };

 console.log([...myIterable]); //[ 0, 1, 2, 3, 4 ]

 function getOdd () {

   let arr = [];

   for (let i of myIterable) {

     !(i%2) && arr.push(i);

   }

   return arr;

 }

 console.log(getOdd()); //[ 0, 2, 4 ]

5). Symbol.asyncIterator 符号指定了一个对象的默认异步迭代器。如果一个对象设置了这个属性，它就是异步可迭代对象，可用于for await...of循环。

 let asyncIterable = {

   [Symbol.asyncIterator]() {

     return {

       i: 0,

       next() {

         if (this.i < 3) {

           return Promise.resolve({ value: this.i++, done: false });

         }

         return Promise.resolve({ done: true });

       }

     };

   }

 };

 (async function() {

    for await (num of asyncIterable) {

      console.log(num); // 0 1 2

    }

 })();

***** 其他属性和方法可以参考 MDN 文档