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 ...
随机推荐
- 20145202马超 2016-2017-2 《Java程序设计》第四周学习总结
20145202马超 2016-2017-2 <Java程序设计>第四周学习总结 教材学习内容总结 继承:打破了封装性 extends 1.提高了代码的复用性. 2.让类与类之间产生了关系 ...
- JAVA大作业汇总1
JAVA大作业 代码 ``` package thegreatwork; import javafx.application.; import javafx.scene.control.; impor ...
- php 使用GD库压缩图片,添加文字图片水印
先上一个工具类,提供了压缩,添加文字.图片水印等方法: image.class.php <?php class Image { private $info; private $image; pu ...
- Qt Creater 制作汽车仪表盘
最近项目用到了模拟仪表,网上下载大神编写的按个仪表Meter没有成功 转战 QWt 编译后,在creater中仍然无法使用,只可以在代码中使用 百度说是我编译的版本不对 扔到 开始做自己的 这个用到了 ...
- [OpenCV]DMatch类和KeyPoints类:特征点匹配
DMatch struct CV_EXPORTS_W_SIMPLE DMatch { CV_WRAP DMatch() : queryIdx(-), trainIdx(-), imgIdx(-), d ...
- kaldi基于GMM的单音素模型 训练部分
目录 1. gmm-init-mono 模型初始化 2. compile-train-graghs 训练图初始化 3. align-equal-compiled 特征文件均匀分割 4. gmm-acc ...
- BZOJ 4004 JLOI2015 装备购买 高斯消元+线性基
题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=4004 Description 脸哥最近在玩一款神奇的游戏,这个游戏里有 n 件装备,每件装 ...
- Android Studio环境解读
一.使用IDE开发APP的流程 要熟悉一个新的IDE,可依次完成以下流程: 二.相关术语解析 Dalvik: Android特有的虚拟机,和JVM不同,Dalvik虚拟机非常适合在移动终端上使用! A ...
- DFS——hdu5682zxa and leaf
一.题目回顾 题目链接:zxa and leaf Sample Input 2 3 2 1 2 1 3 2 4 3 9 6 2 1 2 1 3 1 4 2 5 2 6 3 6 5 9 Sample ...
- UGUI 代码 动态添加 Event Trigger 的事件
Additionally, if you need more than just the events provided by default, I'd suggest instead attachi ...