ES6新特性之Symbol类型用法分析


Posted in Javascript onMarch 31, 2017

本文实例讲述了ES6新特性之Symbol类型用法。分享给大家供大家参考,具体如下:

Symbol类型

1. 为了避免属性名的冲突,ES6新增了Symbol类型。Symbol可以产生一个独一无二的值

let s1 = Symbol('a');
let s2 = Symbol('a');
console.log(s1); //Symbol(a)
console.log(typeof s1); //symbol
console.log(s1 == s2); //false

2.Symbol用于属性名

var s1 = Symbol();
var s2 = Symbol();
var s3 = Symbol();
var obj = {
  [s1]: 'hi'
};
obj[s2] = 'ES6';
Object.defineProperty(obj, s3, {
  value: 'ES2015'
});
console.log(obj); //Object {Symbol(): "hi", Symbol(): "ES6", Symbol(): "ES2015"}
console.log(obj.s1); //undefined -> 所以当用Symbol作为属性名时候,不能用.运算符访问属性
console.log(obj[s1]); //hi
console.log(obj['s1']); //undefined

注意:Symbol作为属性名,该属性不会出现在 for...in...和 for...of... 循环中,也不会被 Object.keys(), Object.getOwnPropertyNames() 返回。Object.getOwnProertySymbols()返回一个数组,成员是当前对象的所有用作属性名的symbol值。

2. Symbol.for() 接受一个字符串作为参数,然后搜索有没有以该参数作为名称的Symbol值,有就返回这个Symbol值,否则就新建并返回一个以该字符串为名称的Symbol值

3. Symbol.keyFor()方法返回一个已经登记的Symbol类型值的key

Symbol()方法生成一个Symbol类型时,没有登记,所以每次调用Symbol(哪怕传入相同的字符串)会返回不同的Symbol,但是Symbol.for()在生成Symbol时候进行了登记,每次再次调用时,都会先寻找是否有传入相同参数的Symbol,故只有Symbol.for()产生的Symbol才能被Symbol.keyFor()找到。

let s1 = Symbol('a');
let s2 = Symbol('a');
let s3 = Symbol.for('b');
let s4 = Symbol.for('b');
let name1 = Symbol.keyFor(s1);
let name3 = Symbol.keyFor(s3);
console.log(s1 == s2); //false
console.log(s1 == s3); //false
console.log(s2 == s3); //false
console.log(s3 == s4); //true
console.log(name1); //undefined
console.log(name3); //b

希望本文所述对大家ECMAScript程序设计有所帮助。

Javascript 相关文章推荐
几个javascript操作word的参考代码
Oct 26 Javascript
基于jQuery的js分页代码
Jun 10 Javascript
javascript 自定义回调函数示例代码
Sep 26 Javascript
jqueryMobile 动态添加元素,展示刷新视图的实现方法
May 28 Javascript
AngularJS中transclude用法详解
Nov 03 Javascript
基于Bootstrap模态对话框只加载一次 remote 数据的解决方法
Jul 09 Javascript
详解jQuery同步Ajax带来的UI线程阻塞问题及解决办法
Aug 09 jQuery
如何为vue的项目添加单元测试
Dec 19 Javascript
使用koa2创建web项目的方法步骤
Mar 12 Javascript
vue中动态select的使用方法示例
Oct 28 Javascript
javascript设计模式 ? 原型模式原理与应用实例分析
Apr 10 Javascript
JS实现拖动模糊框特效
Aug 25 Javascript
微信小程序 后台登录(非微信账号)实例详解
Mar 31 #Javascript
Vue服务端渲染和Vue浏览器端渲染的性能对比(实例PK )
Mar 31 #Javascript
ES6新特性之Object的变化分析
Mar 31 #Javascript
ES6新数据结构Set与WeakSet用法分析
Mar 31 #Javascript
ES6新数据结构Map功能与用法示例
Mar 31 #Javascript
基于AGS JS开发自定义贴图图层
Mar 31 #Javascript
Node.js使用Express创建Web项目详细教程
Mar 31 #Javascript
You might like
有关 PHP 和 MySQL 时区的一点总结
2008/03/26 PHP
Yii2隐藏frontend/web和backend/web的方法
2015/12/12 PHP
jquery ui对话框实例代码
2013/05/10 Javascript
js判断客户端是iOS还是Android等移动终端的方法
2013/12/11 Javascript
js实现倒计时时钟的示例代码
2013/12/17 Javascript
Chrome扩展页面动态绑定JS事件提示错误
2014/02/11 Javascript
js中实现多态采用和继承类似的方法
2014/08/22 Javascript
javascript使用shift+click实现选择和反选checkbox的方法
2015/05/04 Javascript
深入浅析同源策略和跨域访问
2015/11/26 Javascript
AngularJS基础 ng-hide 指令用法及示例代码
2016/08/01 Javascript
JavaScript获取短信验证码(周期性)
2016/12/29 Javascript
webpack+vuex+axios 跨域请求数据的示例代码
2018/03/06 Javascript
微信小程序签到功能
2018/10/31 Javascript
nodejs通过钉钉群机器人推送消息的实现代码
2019/05/05 NodeJs
使用preload预加载页面资源时注意事项
2020/02/03 Javascript
Javascript柯里化实现原理及作用解析
2020/10/22 Javascript
梳理一下vue中的生命周期
2020/12/30 Vue.js
pandas 取出表中一列数据所有的值并转换为array类型的方法
2018/04/11 Python
对python数据切割归并算法的实例讲解
2018/12/12 Python
python pickle存储、读取大数据量列表、字典数据的方法
2019/07/07 Python
简单了解Python字典copy与赋值的区别
2020/09/16 Python
python利用paramiko实现交换机巡检的示例
2020/09/22 Python
巴黎卡诗加拿大官网:Kérastase加拿大
2018/11/12 全球购物
REISS美国官网:伦敦最受欢迎的时尚品牌
2019/08/16 全球购物
贯彻学习两会心得体会范文
2014/03/17 职场文书
幼儿园家长寄语
2014/04/02 职场文书
公开承诺书格式
2014/05/21 职场文书
自动化专业毕业生求职信
2014/06/18 职场文书
学校运动会广播稿100条
2014/09/14 职场文书
幼师辞职信范文
2015/02/27 职场文书
销售辞职信范文
2015/03/02 职场文书
护林员个人总结
2015/03/04 职场文书
大学生团日活动总结
2015/05/06 职场文书
二年级数学教学反思
2016/02/16 职场文书
jQuery实现影院选座订座效果
2021/04/13 jQuery
浅谈PHP7中的一些小技巧
2021/05/29 PHP