关于前端:Symbol详解

Symbol是 es6 引入的一个新的原始数据类型，是一个 举世无双 的值。
目前为止，js的数据类型有以下几种：

数据类型	阐明
undefined	undefined
null	null
boolean	布尔值
string	字符串
number	数字
Bigint	大整数
Object	对象
Symbol	Symbol

Symbol通过 Symbol() 函数生成。对象的属性名当初除了能够应用字符串以外，还能够应用新增的 Symbol 类型。如果属性名应用Symbol，那么它就是举世无双的，不与其它属性名产生抵触。

let s = Symbol()
console.log(typeof s);  // symbol

留神：Symbol()函数前不能应用 new，否则报错。因为生成的Symbol 是一个原始类型的值，而不是对象，所以不能应用 new 来调用。而且，Symbol值不是对象，不能给 Symbol 增加属性。能够这么了解，Symbol是一种相似于字符串的数据类型。

Symbol接管字符串作为参数，示意对 Symbol 的形容，增加形容能够用来辨别多个Symbol。

let s2 = Symbol('desc')
let s3 = Symbol('desc2')
console.log(s2);  // Symbol(desc)
console.log(s3);  // Symbol(desc2)

如果 Symbol 的参数传入的是对象，须要把对象转为字符串再生成Symbol，否则会显示[object Object]。

let obj = {name : '东方不败'}
let s4 = Symbol(JSON.stringify(obj)) 
console.log(s4); // Symbol({"name":"东方不败"})

let s5 = Symbol(obj) 
console.log(s5);// Symbol([object Object])

Symbol传入的参数只是一个形容，实际上 Symbol 和Symbol并不相等。

let sy = Symbol()
let sy2 = Symbol()
console.log(sy === s2); // false

let sy3 = Symbol('a')
let sy4 = Symbol('a')
console.log(sy3 === sy4); // false

每调用一次 Symbol() 都会生成一个举世无双的值，每个 Symbol 都不相等。

Symbol值不能参加其余类型值的运算，否则报错。

let a = Symbol('hello')
console.log(a + 'world');  // 报错 Cannot convert a Symbol value to a string

Symbol 能够转换为字符串

let a2 = Symbol('hello')
console.log(String(a2)); // Symbol(hello)

如果须要返回 Symbol 的形容须要应用 es2019 提供的 Symbol 实例属性 description 返回形容。

let a2 = Symbol('hello')
console.log(a2.description); // hello

Symbol 能够转换为布尔值（boolean）

let a2 = Symbol('hello')
console.log(Boolean(a2));  // true
console.log(Boolean(!a2)); // false

Symbol作为属性名

let n = Symbol()
// 形式一
let obj2 = {[n] : '东方不败'
   }
console.log(obj2);  // {Symbol(): '东方不败'}
console.log(obj2[n]);  // 东方不败

// 形式二
obj2[n] = '西方求败'
console.log(obj2[n]);  // 西方求败

// 形式三
let obj3 = {}
let back = Object.defineProperty(obj3,n,{value : '艺术概论'})
console.log(obj3[n]); // 艺术概论

Object.defineProperty应用阐明
第一个参数: 要在其上定义属性的对象
第二个参数: 要定义或批改的属性的名称
第三个参数: 将被定义或批改的属性描述符

Symbol值作为对象属性名时，不能用点运算符 取得 Symbol 属性，应用点运算符相当于是给 对象增加了一个字符串属性名，而不是获取Symbol。

let n2 = Symbol()
let obj4 = {}
console.log(obj4.n2 = '中国工艺美术史');  // 中国工艺美术史
console.log(obj4[n2]);  // undefined
console.log(obj4);  // {n2: '中国工艺美术史'}

Symbol是不可枚举的，Symbol作为对象键名时，是不可被遍历的，for...in、Object.keys等办法都得不到 Symbol 键名，并且 JSON.stringify() 也不会返回Symbol。

let m = Symbol('a')
let f = {[m]:'东方不败',
    name:'东方求败',
    name2: '光合作用'
}

// 东方求败、光合作用
for(k in f){console.log(f[k]);
}

console.log(Object.keys(f)); // ['name','name2']
console.log(JSON.stringify(f));  // {"name":"东方求败","name2":"光合作用"}

Reflect.ownKeys()能够返回惯例键名和 Symbol 键名

console.log(Reflect.ownKeys(f)); //  ['name', 'name2', Symbol(a)]

Object.getOwnPropertySymbols()只返回 Symbol 属性

console.log(Object.getOwnPropertySymbols(f)); // [Symbol(a)]

Symbol.for()
Symbol有一个个性就是 Symbol 不等于 Sombol，但有时候咱们须要同一个Symbol 值

let r = Symbol.for('a')
let r2 = Symbol.for('a')
console.log(r === r2);  // true

Symbol.for()和 Symbol() 都会生成新的 Symbol，前者会被注销在全局环境提供搜寻，后者不会。
Symbol.for() 每次调用都会先查看参数 key 是否存在，如果不存在才会新建一个值。
Symbol()每次调用都会新建一个值。

Symbol.keyFor()
Symbol.keyFor()返回曾经注销的 Symbol 值的key

let r3 = Symbol.for('b')
let r4 = Symbol('c')
console.log(Symbol.keyFor(r3));  // b
console.log(Symbol.keyFor(r4));  // undefined

Symbol.hasInstance用来判断某个对象是否为某个结构器实例

class myClass {static [Symbol.hasInstance](val){return typeof val === 'number'}
     // static [Symbol.hasInstance](val){
     //     return typeof val === 'boolean'
     // }
 }
console.log(100 instanceof myClass); // true
console.log('100' instanceof myClass); // false

多个 Symbol.hasInstance 会笼罩，只保留最上面的那一个。

Symbol.isConcatSpreadable用于示意 Array.prototype.concat() 是否能够开展，true、undefined能够开展，false不可开展。

let arr1 = [1,2]
let arr2 = [3,4]
console.log(arr1[Symbol.isConcatSpreadable]);  // undefined
console.log(arr1.concat(arr2));  // [1,2,3,4]

console.log(arr1[Symbol.isConcatSpreadable] = false)
console.log(arr1.concat(arr2)); // [[1,2],3,4]

对象的 Symbol.species 属性指向一个构造函数，创立衍生对象时会应用该属性

// 这里继承了 Array 的原型
class MyArray extends Array { }
let a = new MyArray(1,2,3)
let b = a.map(el => el + 1)
console.log(b);  // constructor : class MyArray

b和 c 调用的是数组办法，那么应该是 Array 的实例，但实际上它们也是 MyArray 的实例

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

let a = new MyArray(1,2,3)
let b = a.map(el => el + 1)
let c = a.filter(el => el == 2)

console.log(a,b,c);  // 1,2,3    2,3,4   2
console.log(b instanceof MyArray); // false
console.log(b);  // constructor : class MyArray

Symbol.species能够在创立衍生对象时应用这个属性返回的函数作为构造函数。
这里 return 了Array，所以创立的衍生对象应用的 Array 作为构造函数，而不是 MyArray。
如果这里 return 一个 String，那么下面的map、filter 会报错，因为衍生对象应用的是 String 作为构造函数，String是没有数组办法的。

Symbol.match指向一个函数，如果函数存在则会被调用，并返回该办法的返回值

class MyMatch {[Symbol.match](val){return 'hello world'.indexOf(val)
      }
}

// match 字符串办法，能够在字符串内检索指定的值并返回
console.log('e'.match(new MyMatch()));  // 1

案例源码：https://gitee.com/wang_fan_w/es6-science-institute

如果感觉这篇文章对你有帮忙，欢送点亮一下 star 哟

关于前端:Symbol详解

Symbol

Symbol 转换

Symbol 属性名

属性名遍历

Symbol.for()、Symbol.keyFor()

Symbol 内置值

Symbol.hasInstance

Symbol.isConcatSpreadable

Symbol.species

Symbol.match