ES6 Symbol详解

概述

        ES6 引入了一种新的原始数据类型 Symbol ，表示独一无二的值，最大的用法是用来定义对象的唯一属性名。

基本用法和使用场景

        因为Symbol是基本数据类型，不是对象，所以不能用new的方式创建

var a = Symbol()
var b = Symbol()
console.log(a)  // Symbol()
console.log(b)  // Symbol()
console.log(a === b)    // false

var username = Symbol('张三')
console.log(username)   // Symbol(张三)
console.log(typeof username)    // symbol

var username1 = Symbol('张三')
console.log(username1)  // Symbol(张三)
console.log(typeof username1)   // symbol
console.log(username === username1) // false

可以看到，即使我们定义相同的"张三"，最终结果依然是false。Symbol有点唯一标识符id的那个味道了。Symbol最大的作用就是定义对象的属性名，那么给对象Symbol类型的属性名是怎么定义的呢？看例子

var username = Symbol('username')
var age = Symbol('age')
var address = Symbol('address')

var obj = {}
// 第一种方式
obj[username] = '张三'
console.log(obj)    // {Symbol(username): "张三"}

// 第二种方式
obj = {
    ...obj,
    [age]: '18'
}
console.log(obj)    // {Symbol(username): "张三", Symbol(age): "18"}

// 第三种方式
Object.defineProperty(obj,address,{
    value: '上海市'
})
console.log(obj)    // {Symbol(username): "张三", Symbol(age): "18", Symbol(address): "上海市"}

// 这种方式并不能添加Symbol类型的属性名
var birthday = Symbol()
obj.birthday = '2021'
console.log(obj)    // {birthday: "2021", Symbol(username): "张三", Symbol(age): "18", Symbol(address): "上海市"}

可以看到，Symbol 作为对象属性名时不能用.运算符，因为.运算符后面跟着的是字符串，所以取的就是birthday，而不是Symbol类型的birthday属性名。

注意：Symbol类型的属性名是不可以通过for in、Object.keys()、JSON.stringify()、Object.getOwnPropertyNames()获取到的，只能通过Object.getOwnPropertySymbols()获取到

var active = Symbol('active')
var animal = {
    color: 'colourful',
    behavior: function() {
        console.log('欢快的跑着')
    },
    [active]: '活跃'
}

// for in
for (const key in animal) {
    console.log(key)    // color,behavior
}
// Object.keys()
Object.keys(animal).map(key=>{
    console.log(key)    // color,behavior
})
// JSON.stringify()
console.log(JSON.stringify(animal)) // "{"color":"colourful"}"
// Object.getOwnPropertyNames()
console.log(Object.getOwnPropertyNames(animal)) // ["color", "behavior"]

// 通过以上的方法，都是不能获取到Symbol类型的属性名的属性的
// Object.getOwnPropertySymbols()
console.log(Object.getOwnPropertySymbols(animal))   // [Symbol(active)]

Symbol的属性和方法

Symbol.for机制有点类似于单例模式，首先在全局中搜索有没有以该参数作为名称的Symbol值，如果有，就返回这个Symbol值，否则就新建并返回一个以该字符串为名称的Symbol值。和直接的Symbol就点不同了。

var a = Symbol.for('name')
var b = Symbol.for('name')
console.log(a === b)    // true

Symbol.keyFor方法返回一个已登记的Symbol类型值的key。实质就是检测该Symbol是否已创建

var a = Symbol.for('name')
console.log(Symbol.keyFor(a))   // name

var b = Symbol('name')
console.log(Symbol.keyFor(b))   // undefined

Symbol内置的值还有很多，这里有个文档记载的非常详细。

ES6 入门教程