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对象的函数
Dec 22 Javascript
jquery自动完成插件(autocomplete)应用之PHP版
Dec 15 Javascript
JavaScript学习笔记之JS函数
Jan 22 Javascript
JavaScript中的parse()方法使用简介
Jun 12 Javascript
深入解读JavaScript中的Iterator和for-of循环
Jul 28 Javascript
node.js实现博客小爬虫的实例代码
Oct 08 Javascript
详解vue.js的事件处理器v-on:click
Jun 27 Javascript
微信小程序中使用wxss加载图片并实现动画效果
Aug 13 Javascript
vue 实现滚动到底部翻页效果(pc端)
Jul 31 Javascript
vue 实现cli3.0中使用proxy进行代理转发
Oct 30 Javascript
RxJS在TypeScript中的简单使用详解
Apr 13 Javascript
Vue 如何使用props、emit实现自定义双向绑定的实现
Jun 05 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
怎么样可以把 phpinfo()屏蔽掉?
2006/11/24 PHP
session 加入redis的实现代码
2016/07/15 PHP
FCK调用方法..
2006/12/21 Javascript
用jquery来定位
2007/02/20 Javascript
js+CSS 图片等比缩小并垂直居中实现代码
2008/12/01 Javascript
jQuery EasyUI API 中文文档 - Panel面板
2011/09/30 Javascript
50款非常棒的 jQuery 插件分享
2012/03/29 Javascript
深入分析Javascript跨域问题
2015/04/17 Javascript
js中日期的加减法
2015/05/06 Javascript
jquery实现表单输入时提示文字滑动向上效果
2015/08/10 Javascript
JavaScript判断手机号运营商是移动、联通、电信还是其他(代码简单)
2015/09/25 Javascript
javascript实现无缝上下滚动特效
2015/12/16 Javascript
输入法的回车与消息发送快捷键回车的冲突解决方法
2016/08/09 Javascript
浅谈Vuex@2.3.0 中的 state 支持函数申明
2017/11/22 Javascript
bootstrap select下拉搜索插件使用方法详解
2017/11/23 Javascript
详解weex默认webpack.config.js改造
2018/01/08 Javascript
node内置调试方法总结
2018/02/22 Javascript
vue富文本框(插入文本、图片、视频)的使用及问题小结
2018/08/17 Javascript
详解vue项目中使用token的身份验证的简单实践
2019/03/08 Javascript
vue router动态路由设置参数可选问题
2019/08/21 Javascript
Python读取环境变量的方法和自定义类分享
2014/11/22 Python
Python线上环境使用日志的及配置文件
2019/07/28 Python
python使用sessions模拟登录淘宝的方式
2019/08/16 Python
python爬虫之爬取百度音乐的实现方法
2019/08/24 Python
米兰网婚纱礼服法国网上商店:Milanoo法国
2016/08/20 全球购物
爱尔兰电脑、家电和家具购物网站:Buy It Direct
2019/07/09 全球购物
标记环网Toke Ring IEEE802.5
2014/05/26 面试题
装潢设计实习自我鉴定
2013/09/19 职场文书
入党申请书自我鉴定
2013/10/12 职场文书
聊城大学毕业生自荐书
2014/02/01 职场文书
大学生毕业自我鉴定范文
2014/02/03 职场文书
电子信息工程专业自荐书
2014/06/24 职场文书
党员志愿者活动总结
2014/06/26 职场文书
小学教师师德师风自我剖析材料
2014/09/29 职场文书
经典祝酒词大全
2015/08/12 职场文书
Go Grpc Gateway兼容HTTP协议文档自动生成网关
2022/06/16 Golang