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
Mar 07 Javascript
jQuery中fadeIn、fadeOut、fadeTo的使用方法(图片显示与隐藏)
May 08 Javascript
JS中window.open全屏命令解析及使用示例
Dec 11 Javascript
使用 JavaScript 进行函数式编程 (一) 翻译
Oct 02 Javascript
js文字横向滚动特效
Nov 11 Javascript
使用jQuery.form.js/springmvc框架实现文件上传功能
May 12 Javascript
微信小程序 常用工具类详解及实例
Feb 15 Javascript
webpack构建react多页面应用详解
Sep 15 Javascript
详解vantUI框架在vue项目中的应用踩坑
Dec 06 Javascript
如何手动实现es5中的bind方法详解
Dec 07 Javascript
使用p5.js临摹动态图形
Oct 23 Javascript
vue 获取元素额外生成的data-v-xxx操作
Sep 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
PHP新手上路(三)
2006/10/09 PHP
《PHP编程最快明白》第七讲:php图片验证码与缩略图
2010/11/01 PHP
Zend Framework动作助手Url用法详解
2016/03/05 PHP
setTimeout和setInterval的浏览器兼容性分析
2007/02/27 Javascript
JavaScript 嵌套函数指向this对象错误的解决方法
2010/03/15 Javascript
Javascript引用指针使用介绍
2012/11/07 Javascript
jQuery 追加元素的方法如append、prepend、before
2014/01/16 Javascript
IE6中链接A的href为javascript协议时不在当前页面跳转
2014/06/05 Javascript
JS实现3D图片旋转展示效果代码
2015/09/22 Javascript
nodejs实现发出蜂鸣声音(系统报警声)的方法
2017/01/18 NodeJs
基于JavaScript中标识符的命名规则介绍
2018/01/06 Javascript
vue组件tabbar使用方法详解
2018/11/06 Javascript
JS/HTML5游戏常用算法之碰撞检测 地图格子算法实例详解
2018/12/12 Javascript
vant-ui框架的一个bug(解决切换后onload不触发)
2020/11/11 Javascript
微信小程序onShareTimeline()实现分享朋友圈
2021/01/07 Javascript
[47:39]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 LGD vs OPTIC
2018/03/31 DOTA
python实现rest请求api示例
2014/04/22 Python
python运行时间的几种方法
2016/06/17 Python
python使用PyCharm进行远程开发和调试
2017/11/02 Python
python交互模式基础知识点学习
2020/06/18 Python
Python装饰器如何实现修复过程解析
2020/09/05 Python
找到您丢失的钥匙、钱包和手机:Tile
2017/05/19 全球购物
北京泡泡网网络有限公司.net面试题
2012/07/17 面试题
中学教师岗位职责
2013/11/26 职场文书
经典安踏广告词
2014/03/21 职场文书
自我推荐信范文
2014/05/09 职场文书
单位单身证明样本
2014/10/11 职场文书
2014年学校法制宣传日活动总结
2014/11/01 职场文书
2015年考研复习计划
2015/01/19 职场文书
2015年学生会干事工作总结
2015/04/09 职场文书
宣传稿格式范文
2015/07/23 职场文书
党风廉政建设心得体会
2019/05/21 职场文书
python实现ROA算子边缘检测算法
2021/04/05 Python
vue实现同时设置多个倒计时
2021/05/20 Vue.js
RPM包方式安装Oracle21c的方法详解
2021/08/23 Oracle
【海涛dota解说】DCG联赛第一周 LGD VS DH
2022/04/01 DOTA