ES6学习-Symbol

Symbol

数据类型Symbol,表示独一无二的值。

对象的属性名可有两种类型,一种是原来的字符串,另一种是新增的 Symbol 类型

可以保证不与其他属性名产生冲突。

js 复制代码
let s1 = Symbol()
let s2 = Symbol()
console.log(s1, s2, s1 == s2)//Symbol() Symbol() false

可以接受一个字符串作为参数,表示对 Symbol 实例的描述

js 复制代码
let s1 = Symbol('foo');

如果 Symbol 的参数是一个对象,就会调用该对象的toString方法

js 复制代码
const obj = {
  toString() {
    return 'abc';
  }
};
const sym = Symbol(obj);
sym // Symbol(abc)

Symbol.prototype.description

读取Symbol的描述

js 复制代码
const sym = Symbol('foo')
sym.description //foo

作为属性名

js 复制代码
let mySymbol = Symbol();
let a = {};a[mySymbol] = 'Hello!';
let a = {let a = {};};
let a = {};Object.defineProperty(a, mySymbol, { value: 'Hello!' });

属性名的遍历

Symbol 作为属性名,遍历对象的时候,该属性不会出现在for...infor...of循环中,也不会被Object.keys()Object.getOwnPropertyNames()JSON.stringify()返回

Object.getOwnPropertySymbols()方法,可以获取指定对象的所有 Symbol 属性名。该方法返回一个数组,成员是当前对象的所有用作属性名的 Symbol 值。

js 复制代码
const objectSymbols = Object.getOwnPropertySymbols(obj);

Reflect.ownKeys()方法可以返回所有类型的键名,包括常规键名和 Symbol 键名

js 复制代码
let obj = {
  [Symbol('my_key')]: 1,
  enum: 2,
  nonEnum: 3
};
Reflect.ownKeys(obj)
//  ["enum", "nonEnum", Symbol(my_key)]

Symbol.for()

Symbol("cat")每次调用都会返回一个新的值。

Symbol.for()会先检查给定的key是否已经存在,存在:每次都会返回同一个 Symbol 值;如果不存在:才会新建一个值。

js 复制代码
Symbol.for("bar") === Symbol.for("bar")// true

Symbol("bar") === Symbol("bar")
// false

由于Symbol()写法没有登记机制,所以每次调用都会返回一个不同的值。

Symbol.keyFor()

Symbol.keyFor()方法返回一个已登记的 Symbol 类型值的key

js 复制代码
let s1 = Symbol.for("foo");
Symbol.keyFor(s1) // "foo"

let s2 = Symbol("foo");
Symbol.keyFor(s2) // undefined

注意,Symbol.for()为 Symbol 值登记的名字,是全局环境的,不管有没有在全局环境运行。

相关推荐
旖旎夜光2 小时前
Linux(4)(下)
linux·学习
敲敲了个代码5 小时前
从硬编码到 Schema 推断:前端表单开发的工程化转型
前端·javascript·vue.js·学习·面试·职场和发展·前端框架
dly_blog6 小时前
Vue 响应式陷阱与解决方案(第19节)
前端·javascript·vue.js
消失的旧时光-19437 小时前
401 自动刷新 Token 的完整架构设计(Dio 实战版)
开发语言·前端·javascript
console.log('npc')7 小时前
Table,vue3在父组件调用子组件columns列的方法展示弹窗文件预览效果
前端·javascript·vue.js
用户47949283569157 小时前
React Hooks 的“天条”:为啥绝对不能写在 if 语句里?
前端·react.js
我命由我123457 小时前
SVG - SVG 引入(SVG 概述、SVG 基本使用、SVG 使用 CSS、SVG 使用 JavaScript、SVG 实例实操)
开发语言·前端·javascript·css·学习·ecmascript·学习方法
用户47949283569158 小时前
给客户做私有化部署,我是如何优雅搞定 NPM 依赖管理的?
前端·后端·程序员
C_心欲无痕8 小时前
vue3 - markRaw标记为非响应式对象
前端·javascript·vue.js
qingyun9898 小时前
深度优先遍历:JavaScript递归查找树形数据结构中的节点标签
前端·javascript·数据结构