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 相关文章推荐
uploadify在Firefox下丢失session问题的解决方法
Aug 07 Javascript
JavaScript简单下拉菜单实例代码
Sep 07 Javascript
jquery实现Slide Out Navigation滑出式菜单效果代码
Sep 07 Javascript
基于JS模仿windows文件按名称排序效果
Jun 29 Javascript
浅谈JavaScript find 方法不支持IE的问题
Sep 28 Javascript
easyui下拉框动态级联加载的示例代码
Nov 29 Javascript
Vue 组件注册实例详解
Feb 23 Javascript
vue实现分环境打包步骤(给不同的环境配置相对应的打包命令)
Jun 04 Javascript
VUE兄弟组件传值操作实例分析
Oct 26 Javascript
Vue项目配置跨域访问和代理proxy设置方式
Sep 08 Javascript
图解JS原型和原型链实现原理
Sep 15 Javascript
element el-table表格的二次封装实现(附表格高度自适应)
Jan 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
php smarty模版引擎中变量操作符及使用方法
2009/12/11 PHP
php数组函数序列之array_search()- 按元素值返回键名
2011/11/04 PHP
基于PHP CURL用法的深入分析
2013/06/09 PHP
php+mysql查询实现无限下级分类树输出示例
2016/10/03 PHP
ImageFlow可鼠标控制图片滚动
2008/01/30 Javascript
javascript学习笔记(十九) 节点的操作实现代码
2012/06/20 Javascript
jQuery创建平滑的页面滚动(顶部或底部)
2013/02/26 Javascript
页面右下角弹出提示框示例代码js版
2013/08/02 Javascript
javascript自定义startWith()和endWith()的两种方法
2013/11/11 Javascript
JS及PHP代码编写八大排序算法
2016/07/12 Javascript
用jQuery.ajaxSetup实现对请求和响应数据的过滤
2016/12/20 Javascript
浅谈js中用$(#ID)来作为选择器的问题(id重复的时候)
2017/02/14 Javascript
使用html+js+css 实现页面轮播图效果(实例讲解)
2017/09/21 Javascript
[03:22]DAC最前线(第二期)—DOTA2亚洲邀请赛主赛场周边及线路探访
2015/01/24 DOTA
Python  __getattr__与__setattr__使用方法
2008/09/06 Python
python实现simhash算法实例
2014/04/25 Python
详解python发送各类邮件的主要方法
2016/12/22 Python
python脚本实现数据导出excel格式的简单方法(推荐)
2016/12/30 Python
基于Django ORM、一对一、一对多、多对多的全面讲解
2019/07/26 Python
django-rest-swagger对API接口注释的方法
2019/08/29 Python
对python中各个response的使用说明
2020/03/28 Python
Ubuntu18.04安装 PyCharm并使用 Anaconda 管理的Python环境
2020/04/08 Python
opencv 图像滤波(均值,方框,高斯,中值)
2020/07/08 Python
python 如何实现遗传算法
2020/09/22 Python
HTML5 Canvas 起步(1) - 基本概念
2009/05/12 HTML / CSS
英国旅游额外服务市场领导者:Holiday Extras(机场停车场、酒店、接送等)
2017/10/07 全球购物
纪伊国屋新加坡网上书店:Kinokuniya新加坡
2017/12/29 全球购物
碧欧泉法国官网:Biotherm法国
2019/10/23 全球购物
小学教师岗位职责
2013/11/25 职场文书
重大事项社会稳定风险评估方案
2014/06/15 职场文书
经典演讲稿开场白
2014/08/25 职场文书
2014年光棍节活动策划方案(创意集锦)
2014/09/29 职场文书
辩护词格式
2015/05/22 职场文书
离婚财产分割协议书
2015/08/11 职场文书
2016年党员公开承诺书格式范文
2016/03/24 职场文书
详解python的内存分配机制
2021/05/10 Python