ECMAScript-Symbol

一、ECMAScript-Symbol

1. 一种新的原始数据类型

Javascript语言有6中数据类型：Undefined、Null、布尔值（Boolean）、字符串（String）、数值（Number）、对象（Object），ES6引入了一种新的原始数据类型Symbol，表示独一无二的值，也就是第七种数据类型。

2. 声明方式

let s1 = Symbol()
let s2 = Symbol()
console.log(s1 === s2) // false

let s1 = Symbol('foo')
let s2 = Symbol('foo')
console.log(s1 === s2) // false

const obj = {
  name: 'zhangsan',
  toString() {
    return this.name
  }
}
let s = Symbol(obj)
console.log(s)

// Symbol不是一个对象
let s = Symbol()
s.name = 'zhangsan'
console.log(s) // Symbol()

// 使用描述字段
let s = Symbol('foo')
console.log(s.description)

// for声明的代表是同一个值，定义在全局环境中
let s1 = Symbol.for('foo')
let s2 = Symbol.for('foo')
console.log(s1 === s2) // true

const s1 = Symbol('foo')
console.log(Symbol.keyFor(s1)) // undefined
const s2 = Symbol.for('foo')
console.log(Symbol.keyFor(s2)) // foo

3. 遍历Symbol属性

// for in 无法遍历出Symbol属性
// Object.keys() 也不能
for(let key of Object.keys(user)) {
  console.log(key)
}
// Object.getOwnPropertySymbols() 只能取到Symbol属性
for(let key of Object.getOwnPropertySymbols(user)) {
  console.log(key) // Symbol(www.xxx.com)
}
// 两者都可以取到
for(let key of Reflect.ownKeys(user)) {
    console.log(key) // name Symbol(www.xxx.com)
}

4. 应用场景

// 1. 描述一个班机信息乘客信息
// 一般性定义
const cust1 = 'zhangsan'
const cust2 = 'lisi'
const grade = {
  [cust1]: {address: 'yyy', tel: '222'},
  [cust2]: {address: 'zzz', tel: '111'}
}
console.log(grade) // 存在问题 cust2覆盖了cust1

// 使用Symbol
const cust1 = Symbol('zhangsan')
const cust2 = Symbol('lisi')
const grade = {
  [cust1]: {address: 'yyy', tel: '222'},
  [cust2]: {address: 'zzz', tel: '111'}
}
console.log(grade) // Symbol(lisi): {address: "zzz", tel: "111"} Symbol(zhangsan): {address: "yyy", tel: "222"}
console.log(grade[cust1]) // {address: "yyy", tel: "222"}
console.log(grade[cust2]) // {address: "zzz", tel: "111"} 

// 2. 保护某些属性
const sym = Symbol('web')
class User {
  constructor(name) {
    this.name = name
    this[sym] = 'www.xxx.com' // 需要保护的属性
  }
  getName() {
    return this.name + this[sym]
  }
}
const user = new User('zhangsan')
console.log(user.getName()) // zhangsanwww.xxx.com

// 消除魔术字符串
// 原始
function getArea(shape) {
  let area = 0
  switch (shape) {
    case 'Triangle':
      area = 1
      break
    case 'Circle':
      area = 2
      break
  }
  return area
}
console.log(getArea('Triangle')) 
// 改造一
const shapeType = {
  triangle: 'Triangle',
  circle: 'Circle'
}
function getArea(shape) {
  let area = 0
  switch (shape) {
    case shapeType.triangle:
      area = 1
      break
    case shapeType.circle:
      area = 2
      break
  }
  return area
}
console.log(getArea(shapeType.triangle)) 
// 思考一个问题：shapeType中的属性具体值，我们真需要关心吗，我们只需要知道不一样就可以了
// 改造二：
const shapeType = {
  triangle: Symbol(),
  circle: Symbol()
}
function getArea(shape) {
  let area = 0
  switch (shape) {
    case shapeType.triangle:
      area = 1
      break
    case shapeType.circle:
      area = 2
      break
  }
  return area
}
console.log(getArea(shapeType.triangle))