【JS ES6】了解Symbol类型

坚毅的小解同志的前端社区

发布于 2022-12-18 17:56:07

7730

发布于 2022-12-18 17:56:07

文章被收录于专栏：前端领域

✍️ 作者简介: 前端新手学习中。
💂 作者主页: 作者主页查看更多前端教学
🎓 专栏分享：css重难点教学 Node.js教学从头开始学习 ajax学习

声明定义Symbol的几种方式

Symbol类型具有唯一性。

let hd = Symbol();
let edu = Symbol();
console.log(hd == edu);//false

symbol类型是不能附加属性的，跟对象不一样。

hd.name = 'xiaoxie'
console.log(hd.name);//undefined

给创建的symbol变量添加描述

//添加描述
let hd = Symbol("坚毅的小解同志");
let edu = Symbol("csdn");
//获取描述
console.log(edu.description);//csdn

//添加描述第二种方法
//重复定义相同内容，指向的是同一个地址，不会产生新的占用  引用地址
let hd = Symbol.for("xiaoxie");
let edu = Symbol.for("xiaoxie");
console.log(hd == edu);//true
//获取描述
console.log(Symbol.keyFor(hd));//xiaoxie

使用Symbol解决字符串耦合问题

重复命名后面的会把前面的覆盖替换掉。

let grade = {
    李四: { js: 100, css: 89 },
    李四: { js: 20, css: 50 },
}
console.log(grade);//{ '李四': { js: 20, css: 50 } }

//对象使用变量需要加上【】
let user1 = '李四';
let user2 = '李四';
let grade = {
    [user1]: { js: 100, css: 89 },
    user2: { js: 20, css: 50 },
}
console.log(grade);//{ '李四': { js: 100, css: 89 }, user2: { js: 20, css: 50 } }

let user1 = {
    name: "李四",
    key: Symbol('李四')
};
let user2 = {
    name: "李四",
    key: Symbol()
};
let grade = {
    [user1.key]: { js: 100, css: 89 },
    [user2.key]: { js: 20, css: 50 },
}
console.log(grade[user1.key]);//{ js: 100, css: 89 }
console.log(grade);//{ [Symbol(李四)]: { js: 100, css: 89 }, [Symbol()]: { js: 20, css: 50 } }

扩展特性与对象属性保护

循环遍历Symbol

//forin for of 遍历不到Symbol
for (const key in hd) {
    console.log(key);//name
}
for (const iterator of Object.keys(hd)) {
    console.log(iterator);//name
}

//便利Symbol类型
for (const iterator of Object.getOwnPropertySymbols(hd)) {
    console.log(iterator);//Symbol(这是一个Symbol类型)
}
//遍历对象中的所有属性
for (const iterator of Reflect.ownKeys(hd)) {
    console.log(iterator);//name
    //Symbol(这是一个Symbol类型)
}

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022-12-16，如有侵权请联系 cloudcommunity@tencent.com 删除

编程算法