ES6: Symbol概念与用法举例

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

1-使用Symbol作为对象属性名

let name = Symbol()
let age = Symbol()
var obj = {
    [name]:"kerwin",
    [age]:100
}

举例理解:

a.给对象添加独一无二的属性

let obj = {
  name: 'Jack'
}

let name = Symbol()
obj[name] = "Mike"

console.log(obj); // {name: 'Jack', Symbol(): 'Mike'}
console.log(obj[name]); // Mike

b. 便于定义公共库

这里封装属性和方法时, 全部采取Symbol类型, 这样别人就算往里面加name、age等同名的属性或方法, 也不会影响对象原本使用

let keys = {
  name: Symbol(),
  age: Symbol(),
  location: Symbol(),
  test: Symbol(),
}
let obj = {
  [keys.name]: "Mike",
  [keys.age]: 100,
  [keys.location]: "WUXI",
  [keys.test](){
    console.log("test");
  }
}
console.log(obj); // {Symbol(): 'Mike', Symbol(): 100, Symbol(): 'WUXI'}
obj[keys.test]() // test

注意:

let s1 = Symbol()

//1. 不能进行运算
console.log(s1>2); // Uncaught TypeError: Cannot convert a Symbol value to a number

//2. 显示调用toString()
console.log(s1.toString() + "aaa");

//3. 隐式转换boolean
if(s1){
  console.log("执行");
}

2-Symbol()函数可以接受一个字符串作为参数，表示对 Symbol 实例的描述。这主要是为了在控制台显示，比较容易区分。

let keys = {
  name: Symbol("name"),
  age: Symbol("age"),
  location: Symbol("localtion"),
  test: Symbol("test"),
}
let obj = {
  [keys.name]: "Mike",
  [keys.age]: 100,
  [keys.location]: "WUXI",
  [keys.test](){
    console.log("test");
  }
}
console.log(obj); 
// {Symbol(name): 'Mike', Symbol(age): 100, Symbol(localtion): 'WUXI', Symbol(test): ƒ}

3-遍历问题

Symbol的值无法被for in进行遍历

let keys = {
    name:Symbol("name"),
    age:Symbol("age")
}
var obj = {
  [keys.name]:"kerwin",
  [keys.age]:100,
  a:1,
  b:2,
  c:3
}

// 输出对象中的普通属性
for(let i in obj) {
  console.log(i); // a b c
}

// 输出对象中的Symbol属性
console.log(Object.getOwnPropertySymbols(obj)); // [Symbol(name), Symbol(age)]

// 遍历输出 Reflect.ownKeys(obj) 可以找到对象中所有的属性,并返回一个数组
Reflect.ownKeys(obj).forEach(item=>{
  console.log(item,obj[item])
})
/**
 * Symbol(name) 'kerwin'
 * test.html:32 Symbol(age) 100
*/

补充: 拿到Symbol的属性Object.getOwnPropertySymbols(obj)

4-Symbol.for()可以重新使用同一个 Symbol 值

var obj  ={
    [Symbol.for("name")]:"kerwin",
    [Symbol.for("age")]:100
}

console.log(obj[Symbol.for("name")]) // kerwin

5-Symbol表示独一无二的常量

case只能使用规定常量

const VIDEO = Symbol();
const AUDIO = Symbol();
const IMAGE = Symbol();

function play(type) {
  switch(type) {
    case VIDEO:
      console.log("VIDEO");
      break;
    case AUDIO:
      console.log("AUDIO");
      break;
    case IMAGE:
      console.log("IMAGE");
      break;
  }
}

play(VIDEO) // VIDEO

参考: 千锋 011-ES6-Symbol_哔哩哔哩_bilibili