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 相关文章推荐
WordPress 插件——CoolCode使用方法与下载
Jul 02 Javascript
JavaScript的类型转换(字符转数字 数字转字符)
Aug 30 Javascript
dojo随手记 gird组件引用
Feb 24 Javascript
jquery教程ajax请求json数据示例
Jan 13 Javascript
小巧强大的jquery layer弹窗弹层插件
Dec 06 Javascript
jQuery EasyUI 页面加载等待及页面等待层
Feb 06 Javascript
关于webpack代码拆分的解析
Jul 20 Javascript
axios拦截设置和错误处理方法
Mar 05 Javascript
vue实现键盘输入支付密码功能
Aug 18 Javascript
详解Vue2.0组件的继承与扩展
Nov 23 Javascript
微信小程序第三方框架对比 之 wepy / mpvue / taro
Apr 10 Javascript
JavaScript canvas实现跟随鼠标移动小球
Feb 09 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
PHP3 safe_mode 失效漏洞
2006/10/09 PHP
php数组函数序列之array_key_exists() - 查找数组键名是否存在
2011/10/29 PHP
thinkphp中ajax与php响应过程详解
2014/12/08 PHP
php模仿asp Application对象在线人数统计实现方法
2015/01/04 PHP
php中的观察者模式简单实例
2015/01/20 PHP
写出更好的JavaScript之undefined篇(上)
2009/11/22 Javascript
javascript中alert()与console.log()的区别
2015/08/26 Javascript
jQuery实现鼠标滑过点击事件音效试听
2015/08/31 Javascript
javascript实现的登陆遮罩效果汇总
2015/11/09 Javascript
js实现旋转木马效果
2017/03/17 Javascript
Angular实现的敏感文字自动过滤与提示功能示例
2017/12/29 Javascript
nodejs实现解析xml字符串为对象的方法示例
2018/03/14 NodeJs
p5.js绘制创意自画像
2019/11/04 Javascript
jQuery实现异步上传一个或多个文件
2020/08/17 jQuery
[51:05]DOTA2上海特级锦标赛主赛事日 - 5 败者组决赛Liquid VS EG第一局
2016/03/06 DOTA
[01:20]PWL开团时刻DAY9——听说潮汐没用?
2020/11/10 DOTA
Python语言生成水仙花数代码示例
2017/12/18 Python
Python中循环后使用list.append()数据被覆盖问题的解决
2018/07/01 Python
Sanic框架安装与简单入门示例
2018/07/16 Python
Django 创建/删除用户的示例代码
2019/07/24 Python
Numpy数组array和矩阵matrix转换方法
2019/08/05 Python
python用tkinter实现一个简易能进行随机点名的界面
2020/09/27 Python
Python join()函数原理及使用方法
2020/11/14 Python
用pushplus+python监控亚马逊到货动态推送微信
2021/01/29 Python
基于MUI框架使用HTML5实现的二维码扫描功能
2018/03/01 HTML / CSS
Perfumetrader荷兰:香水、化妆品和护肤品在线商店
2017/09/15 全球购物
中国旅游网站:途牛旅游网
2019/09/29 全球购物
Jowissa官方网站:瑞士制造的手表,优雅简约的设计
2020/07/29 全球购物
后勤主管岗位职责
2014/03/01 职场文书
保护母亲河倡议书
2014/04/14 职场文书
国际经济贸易专业自荐信
2014/06/13 职场文书
小学班主任自我评价
2015/03/11 职场文书
学校教师培训工作总结
2015/10/14 职场文书
2016年保险公众宣传日活动总结
2016/04/05 职场文书
想要创业,那么你做好准备了吗?
2019/07/01 职场文书
经典格言警句:没有热忱,世间便无进步
2019/11/13 职场文书