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)的更多相关文章

  1. es6+最佳入门实践(14)

    14.模版字符串 模版字符串(template string)是增强版的字符串,定义一个模版字符串需要用到反引号 let s = `这是一个模版字符串` console.log(s) 14.1.模版字 ...

  2. es6+最佳入门实践(12)

    12.class基础用法和继承 12.1.class基础语法 在es5中,面向对象我们通常写成这样 function Person(name,age) { this.name = name; this ...

  3. es6+最佳入门实践(10)

    10.Generator 10.1.Generator是什么? Generator函数是ES6提供的一种异步编程解决方案.在它的内部封装了多个状态,因此,又可以理解为一种状态机,执行Generator ...

  4. es6+最佳入门实践(9)

    9.Iterator和for...of 9.1.Iterator是什么? Iterator又叫做迭代器,它是一种接口,为各种不同的数据结构提供统一的访问机制.这里说的接口可以形象的理解为USB接口,有 ...

  5. es6+最佳入门实践(8)

    8.Promise 8.1.什么是异步? 要理解异步,首先,从同步代码开始说 alert(1) alert(2) 像上面的代码,执行顺序是从上到下,先后弹出1和2,这种代码叫做同步代码 alert(0 ...

  6. es6+最佳入门实践(7)

    7.set和map数据结构 7.1.什么是set? Set就是集合,集合是由一组无序且唯一的项组成,在es6中新增了set这种数据结构,有点类似于数组,但是它的元素是唯一的,没有重复 let st = ...

  7. es6+最佳入门实践(5)

    5.对象扩展 5.1.对象简写 在es5中,有这样一种写法 var name = "xiaoqiang"; var age = 12; var obj = { name : nam ...

  8. es6+最佳入门实践(4)

    4.函数扩展 4.1.参数默认值 默认参数就是当用户没有传值的时候函数内部默认使用的值,在es5中我们通过逻辑运算符||来实现 function Fn(a, b) { b = b || "n ...

  9. es6+最佳入门实践(3)

    3.数组扩展 3.1.扩展运算符 扩展运算符用三个点(...)表示,从字面上理解,它的功能就是把数组扩展开来,具体形式如下: let arr = [1, 2, 3]; console.log(...a ...

随机推荐

  1. 安装和配置Sentry(收录)

    安装和配置Sentry 本文主要记录安装和配置Sentry的过程,关于Sentry的介绍,请参考 Apache Sentry架构介绍 . 1. 环境说明 系统环境: 操作系统:CentOs 6.6 H ...

  2. linux安装oracle远程客户端

    文章参考:http://blog.csdn.net/caomiao2006/article/details/11901123 感谢博友分享O(∩_∩)O~ 安装oracle 远程客户端(一般情况下本地 ...

  3. java使用java.util.Properties读取properties文件的九种方法

    直接上代码: package com.test.test; import java.io.BufferedInputStream; import java.io.FileInputStream; im ...

  4. Qt Charts_Audio实践

    这里完全是照搬帮助文档中的代码生成的程序 上预览图 工程文件代码 #------------------------------------------------- # # Project crea ...

  5. Windows系统的高效使用

    1-WIndows10系统的入门使用 2-如何把系统盘的用户文件转移到其他盘 3-Windows装机软件一般有哪些? 4-Windows系统有哪些比较好用的下载器? 5-Windows系统中的播放器 ...

  6. vs code 代码格式化整理

    vs code格式化代码的快捷键如下:(来源于这里) On Windows Shift + Alt + F On Mac Shift + Option + F On Ubuntu Ctrl + Shi ...

  7. Docker 安装Neo4j

    拉取最新的neo4j镜像 docker pull neo4j 运行Neo4j 容器 docker run -it -d -p 7474:7474 -p 7687:7687 neo4j:latest 打 ...

  8. 可以随着SeekBar滑块滑动显示的Demo

    //关于Seek的自定义样式,之前也有总结过,但是,一直做不出随着滑块移动的效果,查询了很多资料终于解决了这个问题,现在把代码写出来有bug的地方 希望大家批评指正. Step 1 :自定义一个Vie ...

  9. 在easyUI开发中,出现jquery.easyui.min.js函数库问题

    easyUI是jquery的一个插件,是民间的插件.easyUI使用起来很方便,里面有网页制作的最重要的三大方块:javascript代码.html代码和Css样式.我们在导入easyUI库后,可以直 ...

  10. 【Python】Python内置函数dir详解

    1.命令介绍 最近学习并使用了一个python的内置函数dir,首先help一下: 复制代码代码如下: >>> help(dir)Help on built-in function ...