es6入门到五连绝世之四杀(quadra kill )

es6入门到五连绝世之四杀(quadra kill )

  • 欢迎来到e6语法笔记教学
    • 一、symbol 数据类型
      • 1.1、介绍及使用

欢迎来到e6语法笔记教学

  1. 这篇博客的记录手法,是通过 demo 记录 es6 要点,注释详细,运行结果也已备注,可能对于技术上的讨论很少,主要面向 es6 入门读者,篇幅可能很长,但是各个节点区分明确,可选择学习…
  2. 感觉从三连决胜开始,玩的开始高阶,一些更具实操意义的东西。这能在工作中确实能够帮助到你的东西

一、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);  

es6入门到五连绝世之四杀(quadra kill )_第1张图片

你可能感兴趣的:(es6,前端)