15.Symbol类型

Symbol类型

    • Symbol
      • [1. 自ECMAScript 2015起,symbol成为了一种新的原生类型,就像number和string一样。](#1. 自ECMAScript 2015起,symbol成为了一种新的原生类型,就像number和string一样。)
        • [1.1. symbol类型的值是通过Symbol构造函数创建的。](#1.1. symbol类型的值是通过Symbol构造函数创建的。)
        • [1.2. 可以传递参做为唯一标识 只支持 string 和 number类型的参数](#1.2. 可以传递参做为唯一标识 只支持 string 和 number类型的参数)
      • [2. Symbol的值是唯一的。](#2. Symbol的值是唯一的。)
        • [2.1. Symbol的值是唯一的](#2.1. Symbol的值是唯一的)
        • [2.2. Symbol.for可以获取到相同的值](#2.2. Symbol.for可以获取到相同的值)
        • [2.3 Symbol.for和Symbol的区别:for在全局Symbol里面找有没有注册过这个key, 如果有直接拿来用, 没有的话就创建一个](#2.3 Symbol.for和Symbol的区别:for在全局Symbol里面找有没有注册过这个key, 如果有直接拿来用, 没有的话就创建一个)
      • [3. Symbol的使用场景。](#3. Symbol的使用场景。)
        • [3.1. symbol的key值一样不覆盖对象的属性](#3.1. symbol的key值一样不覆盖对象的属性)
      • [4. symbol定义属性的获取](#4. symbol定义属性的获取)
        • [4.1. 使用symbol定义的属性,是不能通过如下方式拿到的](#4.1. 使用symbol定义的属性,是不能通过如下方式拿到的)
        • [4.2. 如何拿到symbol的字符串key](#4.2. 如何拿到symbol的字符串key)

Symbol

1. 自ECMAScript 2015起,symbol成为了一种新的原生类型,就像number和string一样。

1.1. symbol类型的值是通过Symbol构造函数创建的。
1.2. 可以传递参做为唯一标识 只支持 string 和 number类型的参数
javascript 复制代码
	// 1. 可以传递参做为唯一标识 只支持 string 和 number类型的参数
	 let sym1: symbol = Symbol()
	 let sym2: symbol = Symbol('key') // 可选的字符串key
	 console.log(sym1, sym2)

2. Symbol的值是唯一的。

2.1. Symbol的值是唯一的
2.2. Symbol.for可以获取到相同的值
2.3 Symbol.for和Symbol的区别:for在全局Symbol里面找有没有注册过这个key, 如果有直接拿来用, 没有的话就创建一个
javascript 复制代码
// 2. Symbol的值是唯一的
let sym1: symbol = Symbol(1) // 唯一
let sym2: symbol = Symbol(1) // 唯一

// sym1 === sym2 =>false
// console.log(sym1 === sym2)
// Symbol.for和Symbol的区别:for在全局Symbol里面找有没有注册过这个key, 如果有直接拿来用, 没有的话就创建一个
console.log('Symbol.for===', Symbol.for('小满') === Symbol.for('小满')) // true

3. Symbol的使用场景。

3.1. symbol的key值一样不覆盖对象的属性
javascript 复制代码
// 场景1: symbol的key值一样不覆盖对象的属性
let sym = Symbol()
let obj = {
  [sym]: 'value',
  [sym1]: 111,
  [sym2]: 222
}
console.log(obj) // "value"
console.log(obj[sym]) // "value"

const symbol1 = Symbol('666')
const symbol2 = Symbol('777')
const obj1 = {
  [symbol1]: '小满',
  [symbol2]: '二蛋',
  age: 19,
  sex: '女'
}

4. symbol定义属性的获取

4.1. 使用symbol定义的属性,是不能通过如下方式拿到的
javascript 复制代码
// 1 for in 遍历(不能读到symbol属性的)
for (const key in obj1) {
  // 注意在console看key,是不是没有遍历到symbol1和symbol2
  console.log(key)
}
// 2 Object.keys 遍历(不能读到symbol属性的)
Object.keys(obj1)
console.log(Object.keys(obj1))
// 3 getOwnPropertyNames 遍历
console.log('getOwnPropertyNames=', Object.getOwnPropertyNames(obj1))
// 4 JSON.stringify(不能读到symbol属性的)
console.log(JSON.stringify(obj1))
4.2. 如何拿到symbol的字符串key
  • Object.getOwnPropertySymbols
  • es6 的 Reflect - Reflect.ownKeys(obj1)
javascript 复制代码
// 5.如何拿到symbol1和symbol2的字符串key
// 5.1 只能读到symbol属性(拿到具体的symbol 属性,对象中有几个就会拿到几个)
Object.getOwnPropertySymbols(obj1)
console.log(Object.getOwnPropertySymbols(obj1))
// 2 es6 的 Reflect 拿到对象的所有属性
Reflect.ownKeys(obj1)
console.log(Reflect.ownKeys(obj1))
// console.log('symbol1=', symbol1.description)
// console.log('symbol2=', symbol2.description)
相关推荐
尾善爱看海10 小时前
Vue 面试收官篇:SSR、性能优化落地、30 道高频面试题精讲(附标准答案)
前端·javascript·vue.js·面试·vue
weixin_BYSJ198710 小时前
【计算机毕设】基于SpringBoot与Vue的文物保护档案管理系统08621
vue.js·spring boot·spring cloud·微服务·架构·django·课程设计
Bs_MoneyMagnet11 小时前
基于springboot+vue的个人健康管理系统的设计与实现 源码+文档
java·vue.js·spring boot·后端·vue3·springboot3·计算机毕业设计
驳是11 小时前
一个组件,提升 react-router 开发的幸福感
前端·preact
GreenTea11 小时前
OpenAI Agents API 上手实测:一次调用把整个 agent loop 甩给 OpenAI
前端·后端·算法
星云API技术支持11 小时前
企业微信二次开发:群权限设置、成员管理与群资料维护的接口组合实践
java·前端·企业微信
京东云开发者11 小时前
81.8 秒的视频,我们改了 15 个版本:一次纯 Codex 驱动的 AI-native 视频实践
前端·aigc
Csvn12 小时前
TypeScript 大型项目架构:从单体 tsconfig 到分层可扩展的工程
前端
Bs_MoneyMagnet13 小时前
基于springboot+vue的心理咨询预约与随访平台的设计与实现 源码+文档
vue.js·spring boot·后端·spring·毕业设计·旅游·计算机毕业设计
计算机魔术师13 小时前
Dario Amodei 发文呼吁为前沿 AI 降速并提出三点计划
前端