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 相关文章推荐
jquery控制listbox中项的移动并排序
Nov 12 Javascript
JavaScript中this关键词的使用技巧、工作原理以及注意事项
May 20 Javascript
PHP PDO操作总结
Nov 17 Javascript
使用Sticker.js实现贴纸效果
Jan 28 Javascript
jquery使用each方法遍历json格式数据实例
May 18 Javascript
多个上传文件用js验证文件的格式和大小的方法(推荐)
Mar 09 Javascript
JS 组件系列之BootstrapTable的treegrid功能
Jun 16 Javascript
JS失效 提示HTML1114: (UNICODE 字节顺序标记)的代码页 utf-8 覆盖(META 标记)的冲突的代码页 utf-8
Jun 23 Javascript
IntersectionObserver实现图片懒加载的示例
Sep 29 Javascript
vue自定义移动端touch事件之点击、滑动、长按事件
Jul 10 Javascript
在移动端使用vue-router和keep-alive的方法示例
Dec 02 Javascript
非常实用的jQuery代码段集锦【检测浏览器、滚动、复制、淡入淡出等】
Aug 08 jQuery
微信小程序 后台登录(非微信账号)实例详解
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批量生成缩略图的代码
2008/07/19 PHP
IIS下PHP连接数据库提示mysql undefined function mysql_connect()
2010/06/04 PHP
php设计模式 Facade(外观模式)
2011/06/26 PHP
php入门学习知识点七 PHP函数的基本应用
2011/07/14 PHP
简单的php新闻发布系统教程
2014/05/09 PHP
PHP把数字转成人民币大写的函数分享
2014/06/30 PHP
PHP中创建和验证哈希的简单方法实探
2015/07/06 PHP
实例介绍PHP中zip_open()函数用法
2019/02/15 PHP
详解PHP中curl_multi并发的实现
2020/06/08 PHP
js实现下拉框选择要显示图片的方法
2015/02/16 Javascript
JavaScript中的工厂函数(推荐)
2017/03/08 Javascript
JavaScript实现音乐自动切换和轮播
2017/11/05 Javascript
AngularJS实现自定义指令及指令配置项的方法
2017/11/20 Javascript
关于node-bindings无法在Electron中使用的解决办法
2018/12/18 Javascript
vue实现自定义多选按钮
2020/07/16 Javascript
js 数组当前行添加数据方法详解
2020/07/28 Javascript
vue 自定指令生成uuid滚动监听达到tab表格吸顶效果的代码
2020/09/16 Javascript
解决nuxt页面中mounted、created、watch执行两遍的问题
2020/11/05 Javascript
[12:29]《一刀刀一天》之DOTA全时刻19:蝙蝠骑士田伯光再度不举
2014/06/10 DOTA
分享Python切分字符串的一个不错方法
2018/12/14 Python
Django框架教程之中间件MiddleWare浅析
2019/12/29 Python
Python实现遗传算法(二进制编码)求函数最优值方式
2020/02/11 Python
如何在 Matplotlib 中更改绘图背景的实现
2020/11/26 Python
css3实现3D色子翻转特效
2014/12/23 HTML / CSS
HTML5+Canvas+CSS3实现齐天大圣孙悟空腾云驾雾效果
2016/04/26 HTML / CSS
继承时候类的执行顺序问题,一般都是选择题,问你将会打印出什么?
2015/11/18 面试题
大专应届生个人简历的自我评价
2013/10/15 职场文书
实习老师离校感言
2014/02/03 职场文书
广告传媒专业应届生求职信
2014/03/01 职场文书
司法建议书范文
2014/05/13 职场文书
文明好少年事迹材料
2014/08/19 职场文书
机关干部作风建设剖析材料
2014/10/23 职场文书
小学生暑假生活总结
2015/07/13 职场文书
学习型家庭事迹材料(2016精选版)
2016/02/29 职场文书
redis数据一致性的实现示例
2022/03/18 Redis
利用Python多线程实现图片下载器
2022/03/25 Python