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 三种编解码方式
Feb 01 Javascript
ExtJs 表单提交登陆实现代码
Aug 19 Javascript
jQuery中(function(){})()执行顺序的理解
Mar 05 Javascript
SeaJS入门教程系列之使用SeaJS(二)
Mar 03 Javascript
node.js中的path.join方法使用说明
Dec 08 Javascript
jQuery中ajax的load()方法用法实例
Dec 26 Javascript
仅一个form表单 js实现注册信息依次填写提交功能
Jun 12 Javascript
JS简单生成两个数字之间随机数的方法
Aug 03 Javascript
基于匀速运动的实例讲解(侧边栏,淡入淡出)
Oct 17 Javascript
JS去掉字符串中所有的逗号
Oct 18 Javascript
vue 解决addRoutes动态添加路由后刷新失效问题
Jul 02 Javascript
Vue实现导航栏点击当前标签变色功能
Aug 19 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
解析centos中Apache、php、mysql 默认安装路径
2013/06/25 PHP
CodeIgniter读写分离实现方法详解
2016/01/20 PHP
仅Firefox中链接A无法实现模拟点击以触发其默认行为
2011/07/31 Javascript
JavaScript高级程序设计(第3版)学习笔记 概述
2012/10/11 Javascript
JavaScript实现为指定对象添加多个事件处理程序的方法
2015/04/17 Javascript
javascript实现判断鼠标的状态
2015/07/10 Javascript
jquery弹出遮掩层效果【附实例代码】
2016/04/28 Javascript
jQuery soColorPacker 网页拾色器
2016/06/22 Javascript
jquery 判断div show的状态实例
2016/12/03 Javascript
JS内部事件机制之单线程原理
2018/07/02 Javascript
js canvas实现橡皮擦效果
2018/12/20 Javascript
Vue发布项目实例讲解
2019/07/17 Javascript
微信小程序如何播放腾讯视频的实现
2019/09/20 Javascript
VUE实现强制渲染,强制更新
2019/10/29 Javascript
JavaScript设计模式--桥梁模式引入操作实例分析
2020/05/23 Javascript
js实现点击按钮随机生成背景颜色
2020/09/05 Javascript
[02:30]DOTA2英雄基础教程 暗影恶魔
2013/12/17 DOTA
[08:07]DOTA2每周TOP10 精彩击杀集锦vol.8
2014/06/25 DOTA
深入理解Python中命名空间的查找规则LEGB
2015/08/06 Python
Python迭代和迭代器详解
2016/11/10 Python
一张图带我们入门Python基础教程
2017/02/05 Python
Python基于SMTP协议实现发送邮件功能详解
2018/08/14 Python
python dict 相同key 合并value的实例
2019/01/21 Python
Python multiprocess pool模块报错pickling error问题解决方法分析
2019/03/20 Python
Python这样操作能存储100多万行的xlsx文件
2019/04/16 Python
Python3 A*寻路算法实现方式
2019/12/24 Python
python简单利用字典破解zip文件口令
2020/09/07 Python
H5调用相机拍照并压缩图片的实例代码
2017/07/20 HTML / CSS
秘书英文求职信
2014/04/16 职场文书
2014年学生会个人工作总结
2014/11/07 职场文书
资料员岗位职责范本
2015/04/13 职场文书
公司劳动纪律管理制度
2015/08/04 职场文书
pandas 实现将NaN转换为None
2021/05/14 Python
Python中Selenium对Cookie的操作方法
2021/07/09 Python
python开发制作好看的时钟效果
2022/05/02 Python
GoFrame gredis缓存DoVar Conn连接对象 自动序列化GoFrame gredisDo/DoVar方法Conn连接对象自动序列化/反序列化总结
2022/06/14 Golang