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使用手册之一
Mar 24 Javascript
JS中typeof与instanceof之间的区别总结
Nov 14 Javascript
JavaScript 模块化编程(笔记)
Apr 08 Javascript
JavaScript中join()方法的使用简介
Jun 09 Javascript
JS+CSS实现自动切换的网页滑动门菜单效果代码
Sep 14 Javascript
将html页面保存成图片,图片写入pdf的实现方法(推荐)
Sep 17 Javascript
BootStrap Tooltip插件源码解析
Dec 27 Javascript
原生JS中slice()方法和splice()区别
Mar 06 Javascript
bootstrap选项卡扩展功能详解
Jun 14 Javascript
jQuery轮播图实例详解
Aug 15 jQuery
如何解决jQuery 和其他JS库的冲突
Jun 22 jQuery
如何理解Vue前后端数据交互与显示
May 10 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
文件上传的实现
2006/10/09 PHP
PHP5 安装方法
2007/01/15 PHP
php导出csv格式数据并将数字转换成文本的思路以及代码分享
2014/06/05 PHP
setInterval 和 setTimeout会产生内存溢出
2008/02/15 Javascript
JavaScript 计算当天是本年本月的第几周
2009/03/22 Javascript
js 小贴士一星期合集
2010/04/07 Javascript
node.js中的http.response.setHeader方法使用说明
2014/12/14 Javascript
使用jquery datatable和bootsrap创建表格实例代码
2017/03/17 Javascript
整理关于Bootstrap警示框的慕课笔记
2017/03/29 Javascript
Vue 实用分页paging实例代码
2017/04/12 Javascript
React Native 环境搭建的教程
2017/08/19 Javascript
JavaScript设计模式之观察者模式实例详解
2019/01/16 Javascript
Node 搭建一个静态资源服务器的实现
2019/05/20 Javascript
vue实现搜索功能
2019/05/28 Javascript
JS实现的碰撞检测与周期移动完整示例
2019/09/02 Javascript
Vue.js 实现地址管理页面思路详解(地址添加、编辑、删除和设置默认地址)
2019/12/11 Javascript
在vue中对数组值变化的监听与重新响应渲染操作
2020/07/17 Javascript
html中创建并调用vue组件的几种方法汇总
2020/11/17 Javascript
用Python编写简单的定时器的方法
2015/05/02 Python
git使用.gitignore设置不生效或不起作用问题的解决方法
2017/06/01 Python
python实现决策树
2017/12/21 Python
我用Python抓取了7000 多本电子书案例详解
2019/03/25 Python
Python Selenium 之数据驱动测试的实现
2019/08/01 Python
解决Django Haystack全文检索为空的问题
2020/05/19 Python
Html5 audio标签样式的修改
2016/01/28 HTML / CSS
Expedia爱尔兰:酒店、机票、租车及廉价假期
2017/01/02 全球购物
Cotton On香港网站:澳洲时装连锁品牌
2018/11/01 全球购物
升旗仪式演讲稿
2014/05/08 职场文书
慈善捐赠倡议书
2014/08/30 职场文书
2014最新离职证明范本
2014/09/12 职场文书
致800米运动员广播稿(10篇)
2014/10/17 职场文书
小学中队长竞选稿
2015/11/20 职场文书
搞笑婚礼主持词开场白
2015/11/24 职场文书
MySQL表的增删改查(基础)
2021/04/05 MySQL
Python简易开发之制作计算器
2022/04/28 Python
Win10系统搭建ftp文件服务器详细教程
2022/08/05 Servers