ES6新特性之Symbol类型用法分析

 更新时间:2017年03月31日 10:28:14   作者:柒青衿  
这篇文章主要介绍了ES6新特性之Symbol类型用法,结合形式分析了Symbol类型的功能、使用方法及相关注意事项,需要的朋友可以参考下

本文实例讲述了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程序设计有所帮助。

相关文章

  • js 省地市级联选择

    js 省地市级联选择

    3级省地市级联菜单,ie/ff 测试通过,支持多个并存,支持事件
    2010-02-02
  • 10个很少使用的JavaScript Console方法分享

    10个很少使用的JavaScript Console方法分享

    你一定听说过 console.log() ,而且可能一直在使用它,在本文中,我们将探讨一些最有用的控制台方法,以及它们在数据可视化、调试等方面的用途,感兴趣的小伙伴可以学习一下
    2023-09-09
  • 学习JavaScript设计模式(链式调用)

    学习JavaScript设计模式(链式调用)

    这篇文章主要带领大家学习JavaScript设计模式,其中重点介绍链式调用,感兴趣的小伙伴们可以参考一下
    2015-11-11
  • bootstrap IE8 兼容性处理

    bootstrap IE8 兼容性处理

    这篇文章主要为大家详细介绍了bootstrap IE8 兼容性处理,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-03-03
  • javascript 正则表达式(一)

    javascript 正则表达式(一)

    javascript 正则表达式使用实例,挺有意思的,既不是基础也不是技巧就是解决例子。
    2010-05-05
  • JS生成唯一id方式之UUID和NanoID

    JS生成唯一id方式之UUID和NanoID

    这篇文章主要介绍了JS生成唯一id方式之UUID和NanoID,唯一id有了更好的方式,那就是NanoID,今天这篇文章记录一下NanoID 正在取代 UUID?及js 生成uuid及NanoID的方法,下面来看文章的详细介绍
    2021-12-12
  • 需灵活掌握的Bootstrap预定义排版类 你精通吗?

    需灵活掌握的Bootstrap预定义排版类 你精通吗?

    Bootstrap预定义排版类,做web前端开发的你精通吗?bootstrap前端框架到底为我们预定义了那些排版的类呢?感兴趣的小伙伴们可以参考一下
    2016-06-06
  • 躲避这些会改变原数组JavaScript数组方法让开发流畅无阻

    躲避这些会改变原数组JavaScript数组方法让开发流畅无阻

    JavaScript中有些数组的操作方法并不符合我们预期,容易导致想象不到的结果,因此,为避免这种情况的发生,本文将介绍哪些原生数组方法能改变原数组以及我对于如何更好地使用数组方法的建议
    2023-05-05
  • 前端导出word文件的多种方式以及导出excel文件

    前端导出word文件的多种方式以及导出excel文件

    导出功能是项目开发中经常会遇到的需求,在此就前端方面需要做的部分做一个总结,这篇文章主要给大家介绍了关于前端导出word文件的多种方式以及导出excel文件的相关资料,需要的朋友可以参考下
    2024-08-08
  • js 弹出菜单/窗口效果

    js 弹出菜单/窗口效果

    想象一下,你把一个重要内容放在一个弹出窗口,又不聚集到这个窗口。让使用屏幕阅读器的同学情何以堪,只有当他们 tab 到这页面结束,还继续 tab,才可能找到这个弹窗
    2011-10-10

最新评论