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 document.compatMode兼容性
Feb 23 Javascript
IE6中使用position导致页面变形的解决方案(js代码)
Jan 09 Javascript
js的隐含参数(arguments,callee,caller)使用方法
Jan 28 Javascript
AngularJS 入门教程之HTML DOM实例详解
Jul 28 Javascript
项目实践一图片上传之form表单还是base64前端图片压缩(前端图片压缩)
Jul 28 Javascript
谈谈JavaScript中的几种借用方法
Aug 09 Javascript
原生js开发的日历插件
Feb 04 Javascript
Bootstrap栅格系统简单实现代码
Mar 06 Javascript
JavaScript中使用参数个数实现重载功能
Sep 01 Javascript
微信小程序实战篇之购物车的实现代码示例
Nov 30 Javascript
jQuery中ajax获取数据赋值给页面的实例
Dec 31 jQuery
Vue 去除路径中的#号
Apr 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使用websocket示例详解
2014/03/12 PHP
yii2.0数据库迁移教程【多个数据库同时同步数据】
2016/10/08 PHP
PHP中字符串长度的截取用法示例
2017/01/12 PHP
PHP在弹框中获取foreach中遍历的id值并传递给地址栏
2017/06/13 PHP
PHP观察者模式示例【Laravel框架中有用到】
2018/06/15 PHP
ThinkPHP5.0框架结合Swoole开发实现WebSocket在线聊天案例详解
2019/04/02 PHP
Thinkphp 框架扩展之数据库驱动常用方法小结
2020/04/23 PHP
functional继承模式 摘自javascript:the good parts
2011/06/20 Javascript
ANT 压缩(去掉空格/注释)JS文件可提高js运行速度
2013/04/15 Javascript
JS与C#编码解码
2013/12/03 Javascript
jquery对ajax的支持介绍
2013/12/10 Javascript
JS Replace 全部替换字符的用法小结
2013/12/24 Javascript
js实现俄罗斯方块小游戏分享
2014/01/31 Javascript
使用javaScript动态加载Js文件和Css文件
2015/10/24 Javascript
JS+CSS实现闪烁字体效果代码
2016/04/05 Javascript
jQuery实现定位滚动条位置
2016/08/05 Javascript
AngularJS实现使用路由切换视图的方法
2017/01/24 Javascript
JS基于设计模式中的单例模式(Singleton)实现封装对数据增删改查功能
2018/02/06 Javascript
vue组件中使用props传递数据的实例详解
2018/04/08 Javascript
基于jQuery实现的设置文本区域的光标位置
2018/06/15 jQuery
10种JavaScript最常见的错误(小结)
2019/06/21 Javascript
Tornado 多进程实现分析详解
2018/01/12 Python
用python编写第一个IDA插件的实例
2018/05/29 Python
PyTorch读取Cifar数据集并显示图片的实例讲解
2018/07/27 Python
python3实现微型的web服务器
2019/09/03 Python
python3.7环境下安装Anaconda的教程图解
2019/09/10 Python
python 贪心算法的实现
2020/09/18 Python
The North Face北面德国官网:美国著名户外品牌
2018/12/12 全球购物
建筑个人求职信范文
2014/01/25 职场文书
监察建议书范文
2014/03/12 职场文书
一年级评语大全
2014/04/23 职场文书
教师求职自荐书
2014/06/14 职场文书
县长“四风”对照检查材料思想汇报
2014/10/05 职场文书
介绍信模板
2015/01/31 职场文书
单位考核鉴定意见
2015/06/05 职场文书
Python 视频画质增强
2022/04/28 Python