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温习的一些笔记 基础常用知识小结
Jun 22 Javascript
jquery 之 $().hover(func1, funct2)使用方法
Jun 14 Javascript
jquery 删除cookie失效的解决方法
Nov 12 Javascript
JavaScript正则表达式之multiline属性的应用
Jun 16 Javascript
jQuery+jsp下拉框联动获取本地数据的方法(附源码)
Dec 03 Javascript
JS 循环li添加点击事件 (闭包的应用)
Dec 10 Javascript
jQuery插件HighCharts绘制2D带有Legend的饼图效果示例【附demo源码下载】
Mar 10 Javascript
vue自定义底部导航栏Tabbar的实现代码
Sep 03 Javascript
微信小程序使用component自定义toast弹窗效果
Nov 27 Javascript
微信小程序新手教程之页面打开数量限制
Mar 03 Javascript
仿照Element-ui实现一个简易的$message方法
Sep 14 Javascript
实用的 vue tags 创建缓存导航的过程实现
Dec 03 Vue.js
微信小程序 后台登录(非微信账号)实例详解
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简单实现查询数据库返回json数据
2015/04/16 PHP
PHP通过CURL实现定时任务的图片抓取功能示例
2016/10/03 PHP
PHP+Ajax无刷新带进度条图片上传示例
2017/02/08 PHP
php curl上传、下载、https登陆实现代码
2017/07/23 PHP
PHP实现链表的定义与反转功能示例
2018/06/09 PHP
基于PHP实现生成随机水印图片
2020/12/09 PHP
IE8 引入跨站数据获取功能说明
2008/07/22 Javascript
select标记美化--JS式插件、后期加载
2013/04/01 Javascript
jQuery中 prop() attr()使用详解
2015/05/19 Javascript
JS使用JSON作为参数实例分析
2016/06/23 Javascript
EasyUI创建对话框的两种方式
2016/08/23 Javascript
jquery仿苹果的时间/日期选择效果
2017/03/08 Javascript
使用Bootstrap打造特色进度条效果
2017/05/02 Javascript
Vue组件和Route的生命周期实例详解
2018/02/10 Javascript
JQuery+Bootstrap 自定义全屏Loading插件的示例demo
2019/07/03 jQuery
Webpack中loader打包各种文件的方法实例
2019/09/03 Javascript
js实现html滑动图片拼图验证
2020/06/24 Javascript
[01:35]2018年度CS GO最佳战队-完美盛典
2018/12/17 DOTA
python 图片验证码代码分享
2012/07/04 Python
Python lambda和Python def区别分析
2014/11/30 Python
使用python实现rsa算法代码
2016/02/17 Python
Python学习小技巧总结
2018/06/10 Python
python绘制多个子图的实例
2019/07/07 Python
Python中字典与恒等运算符的用法分析
2019/08/22 Python
MNIST数据集转化为二维图片的实现示例
2020/01/10 Python
python实现的Iou与Giou代码
2020/01/18 Python
django中related_name的用法说明
2020/05/20 Python
瑞典时尚耳机品牌:Urbanears
2017/07/26 全球购物
PREMIUM-MALL法国:行李、箱包及配件在线
2019/05/30 全球购物
传媒专业推荐信范文
2013/11/23 职场文书
大学自主招生自荐信
2013/12/16 职场文书
《挑山工》的教学反思
2014/02/16 职场文书
中国入世承诺
2014/04/01 职场文书
Vue图片裁剪组件实例代码
2021/07/02 Vue.js
muduo TcpServer模块源码分析
2022/04/26 Redis
SQL SERVER中的流程控制语句
2022/05/25 SQL Server