ES6之Symbol

ES6中为我们新增了一个原始数据类型Symbol,让我为大家介绍一下吧!

Symbol它表示是独一无二的值

Symbol要如何创建
第一种创建方式:

javascript 复制代码
    let sy = Symbol()

第二种创建方式:

javascript 复制代码
    let sy = Symbol.for()

具体独一无二在哪呢?它们的地址不相同。

javascript 复制代码
    let sy = Symbol("name")
    let sy1 = Symbol("name")
    console.log(sy === sy1) //false

但如果我们使用Symbol.for创建

javascript 复制代码
    let sy = Symbol.for("name")
    let sy1 = Symbol.for("name")
    console.log(sy === sy1) // true

Symbol不能与其他数据进行运算

javascript 复制代码
    let sy = Symbol()
    console.log(sy + 1) //报错
    console.log(sy > 1) //报错
    console.log(sy + "1") //报错

Symbol可以作用在哪呢?

用来定义对象的私有变量

如何写入对象?
第一种:

javascript 复制代码
    let sy = Symbol("sy1")
    const obj = {}
    obj[sy] = "私有的"
    console.log(obj)

第二种:

javascript 复制代码
    let sy = Symbol("sy1")
    const obj = {
        [sy] : "私有的"
    } 
    console.log(obj)

第三种添加的键值:

javascript 复制代码
    const obj = {
        sy : Symbol("私有的")
    } 
    console.log(obj)

我们可以用keyFor来获取Symbol.for()创建的值

javascript 复制代码
    let sy = Symbol.for("hello")
    console.log(Symbol.keyFor(sy))//hello

我们怎么获取呢?可以使用 对象[ ]的方法取到

记住取Symbol的值时,不能用点(.)取

javascript 复制代码
//获取成功
console.log(obj[sy]) //私有的

我们用点(.)取值试一下,取到undefined

javascript 复制代码
console.log(obj.sy) //undefined

我们该如何循环取到Symbol

我们用对象的for in方法试一试
由此可见,取不到Symbol

javascript 复制代码
    let sy = Symbol("hello")
    const obj = {
        name:"张三",
        age:18,
        
    }
    obj[sy] = "私有的"
    for(let k in obj) {
        console.log(obj) //{name: '张三', age: 18, Symbol(hello): '私有的'}
        console.log(k) //name age
        console.log(obj[k]) //张三 18
    }

我们使用getOwnPropertySymbols()

javascript 复制代码
    let sy = Symbol("hello")
    const obj = {
        name:"张三",
        age:18    
    }
    obj[sy] = "私有的"
    let a = Object.getOwnPropertySymbols(obj)
    console.log(a)

感谢大家的阅读,如有不对的地方,可以向我指出,感谢大家!

相关推荐
昨天;明天。今天。2 分钟前
案例-任务清单
前端·javascript·css
Front思30 分钟前
vue使用高德地图
javascript·vue.js·ecmascript
zqx_71 小时前
随记 前端框架React的初步认识
前端·react.js·前端框架
惜.己1 小时前
javaScript基础(8个案例+代码+效果图)
开发语言·前端·javascript·vscode·css3·html5
什么鬼昵称2 小时前
Pikachu-csrf-CSRF(get)
前端·csrf
长天一色2 小时前
【ECMAScript 从入门到进阶教程】第三部分:高级主题(高级函数与范式,元编程,正则表达式,性能优化)
服务器·开发语言·前端·javascript·性能优化·ecmascript
NiNg_1_2342 小时前
npm、yarn、pnpm之间的区别
前端·npm·node.js
秋殇与星河3 小时前
CSS总结
前端·css
NiNg_1_2343 小时前
Vue3 Pinia持久化存储
开发语言·javascript·ecmascript
BigYe程普3 小时前
我开发了一个出海全栈SaaS工具,还写了一套全栈开发教程
开发语言·前端·chrome·chatgpt·reactjs·个人开发