02月07, 2021

symbol

Symbol

symbol,基本数据类型。ES6新增的第7种基本数据类型。

Tags

  • the seventh type
  • resolve conflict
  • string-like, object-like, unique
  • not enumable
  • es6 narrow ueses

Why

主要是为了解决对象里面的属性名称冲突问题。

  • 和其他库冲突
  • 和标准冲突
  • for-in Object.keys() 暴露 考虑场景:
  • 为实现功能,在dom或者其他对象上添加新的属性 alt

现状:

  • 取个特别的名字(命名空间)
  • 通过计算,生成一个uniq name

How

// create a unique symbol
var isMoving = Symbol("isMoving"); // isMoving 是对这个symbol的描述

...

if (element[isMoving]) {
  smoothAnimations(element);
}
element[isMoving] = true; // 不能通过.访问元素

Notes

  1. hello是symbol的描述,description
  2. element[isMoving] symbol作为key的对象属性
  3. 不可以通过.访问,只能通过[]访问
  4. 可以通过delete element[isMoving]删除键值
  5. 枚举与遍历
    • 无法遍历
      • Object.getOwnPropertyNames(element)
      • Object.keys(element)
      • object for in 无法遍历
      • array for of 无法遍历
      • array forEach
    • 怎么遍历?
      • Object.getOwnPropertySymbols(obj)
      • Reflect.ownKeys(obj)
  6. 无法隐式转换为string类型
  7. JSON.stringify时会忽略symbol属性
var sym = Symbol('test')
console.log(`hello ${sym}`) // error

What

typeof Symbol // function
typeof Symbol('hello') // symbol
  • string-like
    • 不可变,可以作为属性名称
  • Object-lick
    • 独一无二,同样描述的symbol互不相等

Create Ways

// 1. 通过Symbol()生成,每次得到的结果均不同
Symbol()
var a = Symbol('a')
var b = Symbol('a')
console.log(a === b) // false
// 2. 通过Symbol.for()生成,同样的key得到的结果相同,用于需要共享Symbol的场景。可通过 ```Symbol.keyFor()```查找symbol的key
var c = Symbol.for('a')
var d  = Symbol.for('a')
c === d // true

// 3. Symbol.iterator? 
var arr = [1, 2, 3,]
const iterator = arr[Symbol.iterator]()
iterator.next()
iterator.next()
iterator.next()

ES6

uses are narrow

demo

  1. alt

alt

  1. alt

QA

  1. 前6种基本类型? 数据类型 = 原始类型(基本类型) + Object undefined, null, string, boolean, number, bigint, symbol + object

    Refs

  2. ES6新增类型symbol https://hacks.mozilla.org/2015/06/es6-in-depth-symbols/
  3. MDN关于symbol的说明 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol

本文链接:http://fengbaiyang.cn/post/symbol.html

-- EOF --

Comments

暂不支持评论,如有问题,请发邮件至baiyang.feng@outlook.com。 望不吝赐教~