提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  Javascript

当前栏目

【JS ES6】了解Symbol类型

2023-02-18 16:33:37 时间

✍️ 作者简介: 前端新手学习中。

? 作者主页: 作者主页查看更多前端教学

? 专栏分享：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类型)
}

相关文章