es6+最佳入门实践(6)
6.Symbol用法
6.1.什么是Symbol?
Symbol是es6中一种新增加的数据类型,它表示独一无二的值。es5中我们把数据类型分为基本数据类型(字符串、数字、布尔、undefined、null)和引用数据类型(Object),在es6中新增的Symbol数据类型划分到基本数据类型
为什么会有这样一种数据类型呢?
//别人给了你一个定义好的对象
var obj = {
name: "xiaoqiang",
showName: function(){alert(1)}
}
//你拿到对象想给这对象添加新的属性和方法的时候,可能会创建出一个name属性和showName方法
obj.name = "nodeing"
obj.showName = function(){alert(2)}
//这个时候,新增加的方法和属性就会去把原有的方法覆盖,这样就产生了冲突
由于对象的属性和方法是字符串组成,这样新增方法和属性的时候有可能冲突,在es6中就新增了一种数据类型,表示独一无二的值
通过Symbol函数可以创建一个独一无二的值
let s1 = Symbol()
let s2 = Symbol()
console.log(s1 === s2) //false 说明创建出来的s1和s2 并不是相同的
console.log(s1, s2); //Symbol() Symbol()
上述代码中,打印出来的值都是Symbol() , 怎样才能区分谁是s1,谁是s2呢?我们可以通过传参的形式来解决
//传入的参数就是对当前Symbol的描述,用来区分Symbol
let s1 = Symbol("s1")
let s2 = Symbol("s2")
console.log(s1, s2); //Symbol(s1) Symbol(s2)
6.2.应用场景
Symbol通常用于设置对象的属性名或者方法,防止新加入的属性或者方法与原来属性或者方法冲突
let name = Symbol("name");
let name = Symbol("name");
let show = Symbol("show");
let obj = {
//设置属性
[name]: 'xiaoqiang',
[show](){alert(1)}
};
//取值
console.log(obj[name]);
//调用方法
obj[show]()
6.3.注意事项
注意1: Symbol里面的参数仅仅是对Symbol的描述,没有其他意义,因此,即使描述相同,Symbol也是不同的
console.log(Symbol("nodeing") === Symbol("nodeing")) //false
注意2:Symbol函数不能使用New关键字调用
let s1 = new Symbol(); //报错
注意3: Symbol类型在做类型转换的时候不能转成数字
let s1 = Symbol("s1");
console.log(String(s1)); //Symbol(s1)
console.log(Boolean(s1)); //true
console.log(Number(s1)) //报错
注意4: Symbol不能做任何运算
console.log(Symbol("s1") + "nodeing") //报错
console.log(Symbol("s1") - 100) //报错
注意5: Symbol在作为对象属性或者方法的时候,如果不赋值给一个变量的话,没有办法取值
let obj = {
//设置属性
[Symbol("name")]: 'xiaoqiang'
};
//取值
console.log(obj[Symbol("name")]);
注意6: Symbol没有办法被for in循环遍历
let name = Symbol('name')
let age = Symbol('age')
let obj = {
a: 1,
b: 2,
[name]: 'xiaoqiang',
[age]: 18
};
for(let attr in obj){
console.log(attr,obj[attr]) //a b
}
可以使用Object.getOwnPropertySymbols查看对象上所有的symbol属性
console.log(Object.getOwnPropertySymbols(obj))
视频教程地址:http://edu.nodeing.com/course/50
es6+最佳入门实践(6)的更多相关文章
- es6+最佳入门实践(14)
14.模版字符串 模版字符串(template string)是增强版的字符串,定义一个模版字符串需要用到反引号 let s = `这是一个模版字符串` console.log(s) 14.1.模版字 ...
- es6+最佳入门实践(12)
12.class基础用法和继承 12.1.class基础语法 在es5中,面向对象我们通常写成这样 function Person(name,age) { this.name = name; this ...
- es6+最佳入门实践(10)
10.Generator 10.1.Generator是什么? Generator函数是ES6提供的一种异步编程解决方案.在它的内部封装了多个状态,因此,又可以理解为一种状态机,执行Generator ...
- es6+最佳入门实践(9)
9.Iterator和for...of 9.1.Iterator是什么? Iterator又叫做迭代器,它是一种接口,为各种不同的数据结构提供统一的访问机制.这里说的接口可以形象的理解为USB接口,有 ...
- es6+最佳入门实践(8)
8.Promise 8.1.什么是异步? 要理解异步,首先,从同步代码开始说 alert(1) alert(2) 像上面的代码,执行顺序是从上到下,先后弹出1和2,这种代码叫做同步代码 alert(0 ...
- es6+最佳入门实践(7)
7.set和map数据结构 7.1.什么是set? Set就是集合,集合是由一组无序且唯一的项组成,在es6中新增了set这种数据结构,有点类似于数组,但是它的元素是唯一的,没有重复 let st = ...
- es6+最佳入门实践(5)
5.对象扩展 5.1.对象简写 在es5中,有这样一种写法 var name = "xiaoqiang"; var age = 12; var obj = { name : nam ...
- es6+最佳入门实践(4)
4.函数扩展 4.1.参数默认值 默认参数就是当用户没有传值的时候函数内部默认使用的值,在es5中我们通过逻辑运算符||来实现 function Fn(a, b) { b = b || "n ...
- es6+最佳入门实践(3)
3.数组扩展 3.1.扩展运算符 扩展运算符用三个点(...)表示,从字面上理解,它的功能就是把数组扩展开来,具体形式如下: let arr = [1, 2, 3]; console.log(...a ...
随机推荐
- 安装和配置Sentry(收录)
安装和配置Sentry 本文主要记录安装和配置Sentry的过程,关于Sentry的介绍,请参考 Apache Sentry架构介绍 . 1. 环境说明 系统环境: 操作系统:CentOs 6.6 H ...
- linux安装oracle远程客户端
文章参考:http://blog.csdn.net/caomiao2006/article/details/11901123 感谢博友分享O(∩_∩)O~ 安装oracle 远程客户端(一般情况下本地 ...
- java使用java.util.Properties读取properties文件的九种方法
直接上代码: package com.test.test; import java.io.BufferedInputStream; import java.io.FileInputStream; im ...
- Qt Charts_Audio实践
这里完全是照搬帮助文档中的代码生成的程序 上预览图 工程文件代码 #------------------------------------------------- # # Project crea ...
- Windows系统的高效使用
1-WIndows10系统的入门使用 2-如何把系统盘的用户文件转移到其他盘 3-Windows装机软件一般有哪些? 4-Windows系统有哪些比较好用的下载器? 5-Windows系统中的播放器 ...
- vs code 代码格式化整理
vs code格式化代码的快捷键如下:(来源于这里) On Windows Shift + Alt + F On Mac Shift + Option + F On Ubuntu Ctrl + Shi ...
- Docker 安装Neo4j
拉取最新的neo4j镜像 docker pull neo4j 运行Neo4j 容器 docker run -it -d -p 7474:7474 -p 7687:7687 neo4j:latest 打 ...
- 可以随着SeekBar滑块滑动显示的Demo
//关于Seek的自定义样式,之前也有总结过,但是,一直做不出随着滑块移动的效果,查询了很多资料终于解决了这个问题,现在把代码写出来有bug的地方 希望大家批评指正. Step 1 :自定义一个Vie ...
- 在easyUI开发中,出现jquery.easyui.min.js函数库问题
easyUI是jquery的一个插件,是民间的插件.easyUI使用起来很方便,里面有网页制作的最重要的三大方块:javascript代码.html代码和Css样式.我们在导入easyUI库后,可以直 ...
- 【Python】Python内置函数dir详解
1.命令介绍 最近学习并使用了一个python的内置函数dir,首先help一下: 复制代码代码如下: >>> help(dir)Help on built-in function ...