es6入门到五连绝世之四杀(quadra kill )
欢迎来到e6语法笔记教学
- 这篇博客的记录手法,是通过 demo 记录 es6 要点,注释详细,运行结果也已备注,可能对于技术上的讨论很少,主要面向 es6 入门读者,篇幅可能很长,但是各个节点区分明确,可选择学习…
- 感觉从三连决胜开始,玩的开始高阶,一些更具实操意义的东西。这能在工作中确实能够帮助到你的东西
一、symbol 数据类型
1.1、介绍及使用
symbol 是一种新的基础数据类型(primitive type)
Symbol是由ES6规范引入的一项新特性,它的功能类似于一种标识唯一性的ID。
通常情况下,我们可以通过调用Symbol()函数来创建一个Symbol实例。
1)、问题引出,对于对象属性中命名冲突的问题:
// 对于同一个班级,可能有同名的学生
const classRoom = {
'Lily': {grade: 60, gender: 'female' },
'Nina': {grade: 80, gender: 'female' },
'Lily': {grade: 90, gender: 'female' }, //会覆盖掉第一个同名的 Lily
}
console.log(classRoom);
2)、Symbol 函数
// 1、Symbol() 函数用来创建唯一的标识符
const peter = Symbol();
console.log(peter); // Symbol()
console.log(typeof peter); // symbol
const student = Symbol();
console.log(peter == student); // fasle
console.log(peter == student); // fasle ,这就验证Symbol生成的是唯一标识符
// 2、更好的调试,可在symbol中加入对应的描述
const teacher = Symbol('teacher');
console.log(teacher); // Symbol(teacher)
3)、解决问题
// 3、symbol解决对象属性中命名冲突的问题
const classRoom = {
[Symbol('Lily')]: {grade: 60, gender: 'female' },
[Symbol('Nina')]: {grade: 80, gender: 'female' },
[Symbol('Lily')]: {grade: 90, gender: 'female' }, //不再覆盖掉第一个同名的 Lily
}
console.log(classRoom);
4)、新的问题,对象中的symbol属性无法通过 for in…循环遍历获取:
const classRoom = {
[Symbol('Lily')]: {grade: 60, gender: 'female' },
[Symbol('Nina')]: {grade: 80, gender: 'female' },
[Symbol('Lily')]: {grade: 90, gender: 'female' },
}
for(let key in classRoom) {
console.log(key); // 无打印,为空,未获取到
}
5)、获取symbol对象属性名,属性值!
// 1、通过getOwnPropertySymbols方法获取classRoom对象中symbol属性名
const symbol = Object.getOwnPropertySymbols(classRoom);
console.log(symbol); //[Symbol(Lily), Symbol(Nina), Symbol(Lily)]
// 2、同上,获取属性值
const symbol2 = Object.getOwnPropertySymbols(classRoom).map(sym => classRoom[sym]);
console.log(symbol2);