JS Symbol

Symbol

Symbol英文翻译为符号，标记，象征。是JS在es6中继string、Boolean、number、null、undefined之后新增的基础数据类型，也叫原生数据类型。

作为一个基础数据类型，用法与其他数据类型相似，但是不能使用new操作符，也就是说它并不是一个构造函数（例如：new Symbol()）。

console.log(typeof Symbol())
// 'symbol'

如上，所有通过Symbol声明的变量类型都是symbol。

Symbol作用

const info1 = {name:'小红', age:25, des:'喜欢吃'}
const info2 = {name:'小红', age:25, des:'喜欢看电影'}
const info3 = {name:'小红', age:25, des:'喜欢玩游戏'}
const info = {...info1,...info2,...info3};
console.log(info);
//age: 25
//des: "喜欢玩游戏"
//name: "小红"

例如我们收集信息时，三个info的数据对象结构都一致，当我们在做数据整理时，只有最后一个des会被整理到，因为前两个des会被最后一个覆盖

const info1 = {name:'小红', age:25, [Symbol('des')]:'喜欢吃'}
const info2 = {name:'小红', age:25, [Symbol('des')]:'喜欢看电影'}
const info3 = {name:'小红', age:25, [Symbol('des')]:'喜欢玩游戏'}
const info = {...info1,...info2,...info3};
console.log(info);//age: 25
//age: 25
//name: "小红"
//Symbol(des): "喜欢吃"
//Symbol(des): "喜欢看电影"
//Symbol(des): "喜欢玩游戏"

如上我们将每个info的des设置为Symbol类型，在最后整理信息时便会出现三个des参数。虽然三个des键值看起来一样，实质上是三个独立的键值，互相不受影响，且能同时存在。

以上只是一个简单的例子，本身没没什么意义，只是方便我们理解Symbol的作用。

Symbol语法

Symbol([description])

其中description为可选参数，字符串，没什么特别的作用，就是debug调试的时候可以用来作为标记。

如何获取Symbol()对应属性值？

const symbolList = Object.getOwnPropertySymbols(info)
console.log(symbolList);
//0: Symbol(des)
//1: Symbol(des)
//2: Symbol(des)

当我们将Symbol和对象结合使用时免不了要结合[]的写法

const des = Symbol('des');
const info = {
    des:'des',
    [des]:'symbol_des'
}
console.log(info.des); //des
console.log(info['des']); //des
console.log(info[des]); //symbol_des

所以借助Symbol我们可以进行debug或者声明一个对象的特殊属性。

其他

值得注意的是Symbol类型的键值是不能通过for… in…、in、hasOwnProperty去枚举查看的。

const info1 = {name:'小红', age:25, [Symbol('des')]:'喜欢吃'}
const info2 = {name:'小红', age:25, [Symbol('des')]:'喜欢看电影'}
const info3 = {name:'小红', age:25, [Symbol('des')]:'喜欢玩游戏'}
const info = {...info1,...info2,...info3};
console.log(Object.keys(info));// name,age
console.log(info.hasOwnProperty(Symbol('des')));//false

只能通过Object.getOwnPropertySymbols()去获取