ES6中的新数据类型——Symbol
今天小编和大家来聊一聊es6中新增的一个原始数据类型Symbol。在es5中原始数据类型(基本数据类型)有以下六种:Undefind、Null、Bool、 String、Number、Object。今天结合实例和大家一起探讨一下这个神奇的Symbol。大家也可以关注我的微信公众号,蜗牛全栈。
一、基本声明方式
1、方式一
let s1 = Symbol()
let s2 = Symbol()
console.log(s1) // Symbol{}
console.log(s2) // Symbol{}
console.log(s1 === s2) // false 说明每一个Symbol用这种方式声明都是与众不同的。后续会有应用
2、方式二
let s1 = Symbol('foo')
let s2 = Symbol('bar') console.log(s1) // Symbol(foo)
console.log(s2) // Symbol(bar)
console.log(s1 === s2) // false
const obj = {
name:"lilei",
toString(){
return this.name
}
}
let s = Symbol(obj) // 如果参数是Object的时候,会自动调用该对象的toString方法
console.log(s) // Symbol(lilei)
3、关于description
let s = Symbol()
s.name = "lilei"
console.log(s) // Symbol{} // Symbol不是对象,不能用对待对象的方式对待Symbol
console.log(s.description) // undefind
console.log(s.name) // undefind
let s = Symbol('foo')
console.log(s.description) // foo
二、Symbol.for:通过Symbol.for相当于定义在全局的变量,如果之前声明过,后面再通过Symbol.for的时候,会在全局找,如果描述一样的话,会和上一个一样。可以简单理解为对象指向同一个堆内存地址。
let s1 = Symbol.for('foo')
let s2 = Symbol.for('foo')
console.log(s1) // Symbol(foo)
console.log(s1 === s2) // true
// 即使是在函数定义域内,通过Symbol.for也会将该Symbol注册在全局
function foo(){
return Symbol.for('foo')
} const x = foo()
const y = Symbol.for('foo')
console.log(x === y) // true
三、Symbol.keyFor:查看是否在全局登记Symbol里面的描述。与上面的Symbol.for对应。
const s1 = Symbol('foo')
console.log(Symbol.keyFor(s1)) // undefind
const s2 = Symbol.for('foo')
console.log(Symbol.keyFor(s1)) // foo
四、实际应用:
应用一:解决对象中key重复但是表示不同信息的情况
// 对象对于相同的key的信息会进行覆盖
const grade = {
zhangsan:{
address:"xxx",tel:"111"
},
lisi:{
address:"yyy",tel:"222"
},
lisi:{
address:"zzz",tel:"333"
},
} console.log(grade) // {zhangsan:{address:"xxx",tel:"111"},lisi:{address:"zzz",tel:"333"}}
// 通过变量构建对象
const stu1 = "lisi"
const stu2 = "lisi"
const grade = {
[stu1]:{
address:"yyy",tel:"222"
},
[stu2]:{
address:"zzz",tel:"333"
},
}
console.log(grade) // {lisi:{address:"zzz",tel:"333"}}
// es6通过Symbol解决key相同,信息不同情况
const stu1 = Symbol("lisi")
const stu2 = Symbol("lisi")
const grade = {
[stu1]:{
address:"yyy",tel:"222"
},
[stu2]:{
address:"zzz",tel:"333"
},
}
console.log(grade) // {Symbol(lisi):{address:"yyy",tel:"222"},Symbol(lisi):{address:"zzz",tel:"333"}}
console.log(grade[stu1]) // {address:"yyy",tel:"222"}
应用二:保护类中的部分属性
// 定义基本类和类中方法调用
class User{
constructor(name){
this.name = name
}
getName(){
return this.name
}
} const user = new User("lilei")
console.log(user.getName()) // lilei
// 不同循环遍历方式获取类内部属性,根据是否可以获取Symbol作为key的情况
const sym = Symbol("AILI")
class User{
constructor(name){
this.name = name
this[sym] = "AILI.com"
}
getName(){
return this.name + this[sym]
}
} const user = new User("lilei")
console.log(user.getName()) // lileiAILI.co// 通过for...in 无法遍历到Symbol属性
for(let key in user){
console.log(key) // name
} // 同样不能获取到Symbol属性
for(let key of Object.keys(user)){
console.log(key) // name
}
// 只能取到Symbol属性
for(let key of Object.getOwnPropertySymbols(user)){
console.log(key) // Symbol(AILI)
} // 即能获取到普通属性,又能获取到Symbol属性
for(let key of Reflect.ownKeys(user)){
console.log(key) // name Symbol(AILI)
}
应用三:消除魔法字符串(比较长或者难以辨认,容易出错的字符串)
// 函数实现基本功能,函数中【Triangle】和【Circle】比较容易出错
function getArea(shape){
let area = 0
switch(shape){
case "Triangle":
area = 1
break
case "Circle":
area = 2
break
}
return area
}
console.log(getArea("Triangle")) // 1
// 通过对象,将魔法字符串初步隐藏
const shapeType = {
triangle:"Triangle",
circle:"Circle"
}
function getArea(shape){
let area = 0
switch(shape){
case shapeType.triangle:
area = 1
break
case shapeType.circle:
area = 2
break
}
return area
}
console.log(getArea(shapeType.triangle)) // 1
// 在这个函数中,【Triangle】和【Circle】已经不重要,只要区分开即可,利用Symbol不一致性
const shapeType = {
triangle:Symbol(),
circle:Symbol()
}
function getArea(shape){
let area = 0
switch(shape){
case shapeType.triangle:
area = 1
break
case shapeType.circle:
area = 2
break
}
return area
}
console.log(getArea(shapeType.triangle)) // 1
ES6中的新数据类型——Symbol的更多相关文章
- es6学习笔记--新数据类型Symbol
学习了es6语法的symbol类型,整理笔记,闲时复习. Symbol 是es6新增的第七种原始数据类型(null,string,number,undefined,boolean,object),是为 ...
- [每日一题]ES6中为什么要使用Symbol?
关注「松宝写代码」,精选好文,每日面试题 加入我们一起学习,day day up 作者:saucxs | songEagle 来源:原创 一.前言 2020.12.23日刚立的flag,每日一题,题目 ...
- ES6中常用新特性讲解
1.不一样的变量声明:const和let ES6推荐使用let声明局部变量,相比之前的var(无论声明在何处,都会被视为声明在函数的最顶部) let和var声明的区别: var x = '全局变量'; ...
- ES6中的新特性:Iterables和iterators
目录 简介 什么是iteration Iterable对象 普通对象不是可遍历的 自定义iterables 关闭iterators 总结 简介 为了方便集合数据的遍历,在ES6中引入了一个iterat ...
- ES6新数据类型Symbol
Symbol 需计算字面量属性时使用 const benz = Symbol('benz'); const car = { [benz]: 'benz car' }; const info = Sym ...
- es6总结(六)--新数据类型-Symbol
- ES6中的新特性
本人最近学习es6一些方法,难免有些手痒,想着能不能将这些方法总结下,如下 1.数组的扩展 1)首先什么是伪数组 无法直接调用数组方法或期望length属性有什么特殊的行为,但仍可以对真正数组遍历方法 ...
- 理解ES6中的Symbol
一.为什么ES6引入Symbol 有时候我们在项目开发的过程中可能会遇到这样的问题,我写了一个对象,而另外的同时则在这个对象里面添加了一个属性或是方法,倘若添加的这个属性或是方法是原本的对象中本来就有 ...
- ES6中比较实用的几个特性
1.Default Parameters(默认参数) in ES6 es6之前,定义默认参数的方法是在一个方法内部定义 var link = function (height, color, url) ...
随机推荐
- linux命令解压压缩rar文件
一.widonds下打包rar文件并上传 yum install lrzsz rz test.rar 二.下载并安装rar软件 2.1 下载 mkdir -p /home/oldboy/tools c ...
- 【转】风控中的特征评价指标(二)——PSI
转自:https://zhuanlan.zhihu.com/p/79682292 风控业务背景 在风控中,稳定性压倒一切.原因在于,一套风控模型正式上线运行后往往需要很久(通常一年以上)才会被替换下线 ...
- XAML一些控件的使用
这节来讲一些XAML中常用控件的使用. Window Window控件是一个基础,它是其它控件的容器,我们可以通过修改其中的一些属性来设置窗体的显示效果,下面说一些最常用的属性: WindowStar ...
- 从系统的角度分析影响程序执行性能的因素——SA20225205 黄兴宇
实验总结分析报告:从系统的角度分析影响程序执行性能的因素 1.请您根据本课程所学内容总结梳理出一个精简的Linux系统概念模型,最大程度统摄整顿本课程及相关的知识信息,模型应该是逻辑上可以运转的.自洽 ...
- 异步阻塞,Manager模块,线程
一.异步阻塞 1.并没有按照执行顺序等待结果 2.而是所有的任务都在异步执行着 3.但是我要的结果又不知道谁的结果先来,谁先结束我就先取谁的结果 很明显的异步,大家都相互执行着(异步过程),谁先结束我 ...
- [拒绝Visual Studio] 团队博客目录
零.项目展示 Alpha版本项目展示 Beta版本项目展示 一.Scrum Meeting 会议记录 1. Alpha阶段 总体时间安排(粗略): 全部原始会议记录请移步 Google Docs ,这 ...
- 普里姆(Prim)算法
概览 普里姆算法(Prim算法),图论中的一种算法,可在加权连通图(即"带权图")里搜索最小生成树.即此算法搜索到的边(Edge)子集所构成的树中,不但包括了连通图里的所有顶点(V ...
- ltp循环跑
e]# cat r3.sh#!/bin/bashi=1for ((; i<=1000; i++))do/opt/ltp/runltp -s fmtmsg01 -p -l -t -l /home/ ...
- C++ Error 个人笔记(live)
1.error: invalid conversion from 'char' to 'char*' [-fpermissive] 原因: 把一个字符型的变量赋值给了一个字符型的指针 我的原因: 把 ...
- 完全理解Python 迭代对象、迭代器、生成器
在了解Python的数据结构时,容器(container).可迭代对象(iterable).迭代器(iterator).生成器(generator).列表/集合/字典推导式(list,set,dict ...