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 年月日联动实现核心代码
Dec 21 Javascript
腾讯UED 漂亮的提示信息效果代码
Sep 12 Javascript
JavaScript模版引擎的基本实现方法浅析
Feb 15 Javascript
想学习javascript JS和jQuery哪个重要 先学哪个
Dec 11 Javascript
Angular4 中内置指令的基本用法
Jul 31 Javascript
详解 vue.js用法和特性
Oct 15 Javascript
jQuery图片查看插件Magnify开发详解
Dec 25 jQuery
JS实现的文字间歇循环滚动效果完整示例
Feb 13 Javascript
vue 实现类似淘宝星级评分的示例
Mar 01 Javascript
vue实现学生录入系统之添加删除功能
Jul 11 Javascript
微信小程序http连接访问解决方案的示例
Nov 05 Javascript
JQuery中queue方法用法示例
Jan 31 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实现递归循环每一个目录
2010/08/08 PHP
javascript some()函数用法详解
2014/11/13 PHP
php使用MySQL保存session会话的方法
2015/06/18 PHP
详解PHP序列化反序列化的方法
2015/10/27 PHP
PHP之将POST数据转化为字符串的实现代码
2016/11/03 PHP
php提交表单时保留多个空格及换行的文本样式的方法
2017/06/20 PHP
Laravel 集成微信用户登录和绑定的实现
2019/12/27 PHP
Wordpress ThickBox 点击图片显示下一张图的修改方法
2010/12/11 Javascript
Nodejs学习笔记之入门篇
2015/04/16 NodeJs
浅谈JavaScript的Polymer框架中的事件绑定
2015/07/29 Javascript
实例详解jQuery表单验证插件validate
2016/01/18 Javascript
基于jQuery倒计时插件实现团购秒杀效果
2016/05/13 Javascript
基于Bootstrap的UI扩展 StyleBootstrap
2016/06/17 Javascript
JavaScript实现的微信二维码图片生成器的示例
2016/10/26 Javascript
JS绘制微信小程序画布时钟
2016/12/24 Javascript
Javascript Function.prototype.bind详细分析
2016/12/29 Javascript
vue父子组件的嵌套的示例代码
2017/09/08 Javascript
Vue 页面权限控制和登陆验证功能的实例代码
2019/06/20 Javascript
jQuery实现验证用户登录
2019/12/10 jQuery
JS猜数字游戏实例讲解
2020/06/30 Javascript
python paramiko实现ssh远程访问的方法
2013/12/03 Python
浅谈python内置变量-reversed(seq)
2017/06/21 Python
Python利用正则表达式实现计算器算法思路解析
2018/04/25 Python
Python利用ORM控制MongoDB(MongoEngine)的步骤全纪录
2018/09/13 Python
Python实现的栈、队列、文件目录遍历操作示例
2019/05/06 Python
基于Python打造账号共享浏览器功能
2019/05/30 Python
OpenCV 轮廓检测的实现方法
2019/07/03 Python
Python统计分析模块statistics用法示例
2019/09/06 Python
django框架auth模块用法实例详解
2019/12/10 Python
Python标准库json模块和pickle模块使用详解
2020/03/10 Python
美国女士泳装店:Swimsuits For All
2017/03/02 全球购物
大学生感恩父母演讲稿
2014/08/28 职场文书
国庆节促销广告语2014
2014/09/19 职场文书
主持稿开场白
2015/06/01 职场文书
MySQL深度分页(千万级数据量如何快速分页)
2021/07/25 MySQL
SQL Server中使用表变量和临时表
2022/05/20 SQL Server