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中prototype属性(推荐)
Sep 03 Javascript
JS制作适用于手机和电脑的通知信息效果
Oct 28 Javascript
详解浏览器渲染页面过程
Feb 09 Javascript
requirejs + vue 项目搭建详解
Jun 16 Javascript
详解让sublime text3支持Vue语法高亮显示的示例
Sep 29 Javascript
Node.js学习教程之HTTP/2服务器推送【译】
Oct 31 Javascript
vue 实现剪裁图片并上传服务器功能
Mar 01 Javascript
vue基础之模板和过滤器用法实例分析
Mar 12 Javascript
使用weixin-java-miniapp配置进行单个小程序的配置详解
Mar 29 Javascript
vue动态配置模板 'component is'代码
Jul 04 Javascript
Vue中axios的封装(报错、鉴权、跳转、拦截、提示)
Aug 20 Javascript
js实现随机点名程序
Sep 17 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
这东西价格,可以买几台TECSUN S-2000
2021/03/02 无线电
了解Joomla 这款来自国外的php网站管理系统
2010/03/11 PHP
Mac OS下配置PHP+MySql环境
2015/02/25 PHP
PHP图片水印类的封装
2017/07/06 PHP
[原创]来自ImageSee官方 JavaScript图片浏览器
2008/01/16 Javascript
JavaScript 图片预览效果 推荐
2009/12/22 Javascript
jQuery 源码分析笔记(6) jQuery.data
2011/06/08 Javascript
jsTree 基于JQuery的排序节点 Bug
2011/07/26 Javascript
javascript学习笔记(十五) js间歇调用和超时调用
2012/06/20 Javascript
探讨在JQuery和Js中,如何让ajax执行完后再继续往下执行
2013/07/09 Javascript
jQuery处理xml格式的返回数据(实例解析)
2013/11/28 Javascript
验证控件与Button的OnClientClick事件详细解析
2013/12/04 Javascript
nodejs之请求路由概述
2014/07/05 NodeJs
jquery京东商城双11焦点图多图广告特效代码分享
2015/09/06 Javascript
jQuery动态添加
2016/04/07 Javascript
JavaScript中误用/g导致的正则test()无法正确重复执行的解决方案
2016/07/27 Javascript
javascript表单控件实例讲解
2016/09/13 Javascript
DatePickerDialog 自定义样式及使用全解
2019/07/09 Javascript
使用 js 简单的实现 bind、call 、aplly代码实例
2019/09/07 Javascript
JavaScript图片旋转效果实现方法详解
2020/06/28 Javascript
[00:52]玛尔斯技能全介绍
2019/03/06 DOTA
Python 序列的方法总结
2016/10/18 Python
Python实现可获取网易页面所有文本信息的网易网络爬虫功能示例
2018/01/15 Python
在PyCharm下使用 ipython 交互式编程的方法
2019/01/17 Python
Python+PyQT5的子线程更新UI界面的实例
2019/06/14 Python
Python栈的实现方法示例【列表、单链表】
2020/02/22 Python
Python使用Matlab命令过程解析
2020/06/04 Python
Python爬虫制作翻译程序的示例代码
2021/02/22 Python
HTML5 Canvas标签使用收录
2009/07/07 HTML / CSS
竞选村长演讲稿
2014/04/28 职场文书
小班评语大全
2014/05/04 职场文书
优秀班集体先进事迹材料
2014/05/28 职场文书
法人单位适用的授权委托书
2014/09/19 职场文书
拾金不昧表扬信
2015/01/16 职场文书
2015大学党建带团建工作总结
2015/07/23 职场文书
少先队大队委竞选口号
2015/12/25 职场文书