【JS ES6】了解Symbol类型
2023-09-27 14:28:32 时间
✍️ 作者简介: 前端新手学习中。
💂 作者主页: 作者主页查看更多前端教学
🎓 专栏分享: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类型)
}
相关文章
- ES6:下一版本的JavaScript的新特性
- vue.js ES6对象字面量的增强写法
- ES6 新特性之Symbol
- 那些必会用到的 ES6 精粹(下)
- 使用nuxt.js官方脚手架构建项目时ES6编译问题SyntaxError: Unexpected token import
- ES6 箭头函数
- ES6之Array.from()方法
- Vite + Vue3 + Pinia + es6 + TypeScript 搭建项目
- ES6新特性①
- es6--解构赋值
- [OHIF-Viewers]医疗数字阅片-医学影像-ES6箭头函数(=>)
- js:es6 的 export 和 import
- Node.js 支持 ES6 模块的进展
- Node.js v6 LTS 中最激动人心的六个 ES6 特性
- 如何用 Babel 和 Rollup 来构建和发布 ES6 模块
- js es6遍历对象的6种方法
- 【JS ES6】use strict 严格模式
- 深入理解ES6箭头函数的this以及各类this面试题总结
- ES6——var、let、const三者的区别