当前位置:首页 > 日记 > 正文

Javascript ES6中数据类型Symbol的使用详解

Javascript ES6中数据类型Symbol的使用详解

介绍

Symbol 是一种特殊的、不可变的数据类型,可以作为对象属性的标识符使用,表示独一无二的值。Symbol 对象是一个 symbol primitive data type 的隐式对象包装器。

它是JavaScript语言的第七种数据类型,前6种分别是:Undefined、Null、Boolean、String、Number、Object。

语法

Symbol([description])

Parameters

description : 可选的字符串。可用于调试但不访问符号本身的符号的说明。如果不加参数,在控制台打印的都是Symbol,不利于区分。

demo

var s1 = Symbol('symbol1');s1 //Symbol(symbol1);

因为Symbol函数返回的值都是独一无二的,所以Symbol函数返回的值都是不相等的。

//无参数var s1 = Symbol();var s2 = Symbol();s1 === s2 // false//有参数 var s1 = Symbol('symbol'); var s2 = Symbol('symbol'); s1 === s2 //false

作为属性名的Symbol

由于每一个Symbol值都是不相等的,那么作为属性标识符是一种非常好的选择。

定义方式:

let symbolProp = Symbol();var obj = {};obj[symbolProp] = 'hello Symbol';//或者var obj = { [symbolProp] : 'hello Symbol';}//或者var obj = {};Object.defineProperty(obj,symbolProp,{value : 'hello Symbol'});

注意:

定义属性的时候只能将Symbol值放在方括号里面,否则属性的键名会当做字符串而不是Symbol值。同理,在访问Symbol属性的时候也不能通过点运算符去访问,点运算符后面总是字符串,不会读取Symbol值作为标识符所指代的值.

Symbol类型定义常量

常量的使用Symbol值最大的好处就是其他任何值都不可能有相同的值,用来设计switch语句是一种很好的方式。例如:消除魔术字符串(这里留给读者思考,如果有什么疑问,可以给我留言)

Symbol.for(),Symbol.keyFor()

Symbol.for()

对于Symbol.for方法需要记住两点:

  • Symbol.for()所返回的Symbol值的作用域是整个代码库(包括不同的iframe或者service worker),是一个全局的变量,第一次产生的时候就会登记下来。
  • 调用Symbol.for()的时候,如果在全局环境中检索给定的key是否存在,如果不存在才会新建一个值,而Symbol()不会,Symbol()每次返回的都是不同的值。
Symbol.for('foo') === Symbol.for('foo'); //trueSymbol('foo') === Symbol('foo'); //false

Symbol.keyFor()

Symbol.keyFor方法返回一个已登记的Symbol类型的值的key。

var s1 = Symbol.for('foo');Symbol.keyFor(s1) //"foo"var s2 = Symbol('foo');Symbol.keyFor(s2);//undefiend

上面的代码中,变量s2属于未登记的Symbol值,所以返回undefined

属性名的遍历

Symbol作为属性名,虽然不是私有属性,但是在for…in,for…of循环中,Object.keys() ,Object.getOwnPropertyNames()都不会获取到。通常通过两种方法达到Symbol属性的遍历。

Object.getOwnPropertySymbols方法返回一个数组,成员是当前对象的所有Symbol值的属性。

Reflect.ownKeys()可以返回所有类型的键名,包括包括常规的键名和Symbol键名.

下面给出一个例子来解释上面所有的。

var obj = {};var a = Symbol('a');var b = Symbol('b');obj[a] = 'hello';obj[b] = 'world';//获取不到for(var i in obj){ console.log(i); //无输出}Object.getOwnPropertyNames(obj);//[]//可以获取var objectSymbols = Object.getOwnPropertySymbols(obj);objectSymbols// [Symbol(a), Symbol(b)]Reflect.ownKeys(obj);//[Symbol(a), Symbol(b)]

以Symbol值作为名称的属性不会被常规方法遍历所得到。我们可以利用这个特性,为对象定义一些非私有但又希望只用于内部的方法。

var size = Symbol('size');class Collection { constructor(){ this[size] = 0; } add(item){ this[this[size]] = item; this[size]++; } static sizeOf(instance){ return instance[size]; }}var x = new Collection();Collection.sizeOf(x); //0x.add('foo');Collection.sizeOf(x); //1Object.keys(x)//['0']Object.getOwnPropertyNames(x) //['0']Object.getOwnPropertySymbols(x) //[Symbol(size)]

上面的代码中,对象x的size属性是一个Symbol值,所以Object.keys(x) Object.getOwnPropertyNames(x)都无法获取它。这就造成了一种非私有的内部方法的效果。如果对ES6定义类方面还不清楚的,可以先不看这段,或者自己查查资料,后面的文章我也会分享出来,总的来说现在JavaScript的新标准越来越像Java了,比如新增的const、let块级作用域,class定义类等等。

内置的Symbol值

除了自己定义的Symbol值外,JavaScript有一些内置的Symbol表示的内部语言行为不在ECMAScript 5及以前暴露给开发者。这些Symbol可以被访问被下列属性:

1、Symbol.iterator

返回对象的默认迭代器的方法。被for…of使用

2、Symbol.math

与字符串匹配的方法,也用于判断对象是否可以用作正则表达式.被 String.prototype.match()使用。

3、Symbol.replace

一种方法取代匹配字符串的子串。被String.prototype.replace()使用。

4、Symbol.search

返回与正则表达式匹配的字符串内返回索引的方法。被String.prototype.search()使用。

5、Symbol.split

在与正则表达式匹配的索引处拆分字符串的方法。被String.prototype.split()使用.

6、Symbol.hasInstance

确定构造函数对象是否将对象作为实例识别的方法。被instanceof使用

7、Symbol.isConcatSpreadable

一个布尔值,指示对象是否应该被扁平化为数组元素。被Array.prototype.concat()使用.

8、Symbol.unscopables

从关联对象的环境绑定中排除其自身和继承的属性名称的对象值。被with使用

9、Symbol.species

用于创建派生对象的构造函数。

10、Symbol.toPrimitive

将对象转换为原始值的方法。

11、Symbol.toStringTag

用于对象的默认描述的字符串值。被Object.prototype.toString()使用.

我这里没给出具体的例子,针对这11个属性。读者自己主动去把这几个属性搞懂,对理解有些方法是非常有用的。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对的支持。

相关文章

微信小程序 实现动态显示和隐藏某

微信小程序 实现动态显示和隐藏某

控件,动态显示,程序,电脑软件,微信小,微信小程序 实现动态显示和隐藏某个控件在小程序的开发过程中,经常需要用到隐藏某个控件这种情况。因为项目原本是需要将两个canvas切换,但是小程序的canvas支持的功能实在是少,本来就jQuery mobile或者将…

浅谈node中的exports与module.expo

浅谈node中的exports与module.expo

浅谈,关系,电脑软件,exports,node,因为是做前端的,对node的生态一直也比较关注,对于node中对commonJS模块化的实现给了我们很大的方便,之前对于导出的module.exports和exports一直模模糊糊,今天做一个整理先来个js基础部分的复习let obj1 =…

JavaScript编写九九乘法表(两种任选

JavaScript编写九九乘法表(两种任选

九九乘法表,两种,电脑软件,JavaScript,话不多说,请看代码:<script language=javascript>for(i=1;i<=9;i++){for(j=1;j<=9;j++){document.write (i+"*"+j+"="+i*j+" ");if(i==j) {document.write ("<br/>"); break;} //用的if语句,如果…

详解node.js搭建代理服务器请求数

详解node.js搭建代理服务器请求数

请求数据,代理服务器,详解,电脑软件,js,1、引入node.js中的模块 var http = require("http"); var url = require("url"); var qs = require("querystring");2、创建服务器//用node中的http创建服务器 并传入两个形参http.createServ…

Word2013文档多页显示开启和取消的

Word2013文档多页显示开启和取消的

取消,文档,显示,方法,多页,  Word文档中,在编辑文档的时候,用户可以根据自己的实际需要进行文档的多页显示以及取消多页显示。以下是小编为您带来的关于Word2013文档多页显示开启和取消,希望对您有所帮助。Word2013文档多页显示开启和取消1…

PS斜线底纹如何制作 ps快速制作斜

PS斜线底纹如何制作 ps快速制作斜

教程,底纹,快速,电脑软件,PS,为了大家更直观的看到这个小技巧所以做好的图片用的是有背景的图片效果图:主要过程:教程结束,以上就是PS斜线底纹如何制作 ps快速制作斜线底纹教程的全部内容,你学会了吗?相关教程推荐:PS怎么制作斜线背景? ps制作斜…

jquery实现左右轮播图效果

jquery实现左右轮播图效果

轮播图,效果,电脑软件,jquery,我们经常看到购物网站上首页有轮播图,比如某东某京 如图我们打开网页就看到京东的轮播图接下来,这个小案例就是要介绍如何实现这种效果,即这张轮播图上所有的事件. 首先 我们看到轮播图上的有1.左右的小按钮(图片…

wps表格怎么设置整体缩小

wps表格怎么设置整体缩小

放大缩小,设置,方法,缩小,表格,  放大和缩小excel表主要是方便我们预览,其实放大和缩小excel表有好几种方法,那下面小编告诉wps表格怎么放大缩小工作表吧,希望看完本教程的朋友都能学会wps表格并运用起来。wps表格放大缩小工作表的方法首先…

ppt2010怎么打包

ppt2010怎么打包

电脑软件,  所谓打包,指的就是将独立的已综合起来共同使用的单个或多个文件,集成在一起,生成一种独立于运行环境的文件。将PPT打包能解决运行环境的限制和文件损坏或无法调用的不可预料的问题,那么下面小编就教你ppt2010怎么打包。ppt2010打…

excel表格添加分割线的方法excel表

excel表格添加分割线的方法excel表

分割线,方法,表格,电脑软件,excel,  在用EXCEL办公中,经常要在表格中添加分割线。Excel中的分割线具体该如何进行添加呢?接下来是小编为大家带来的excel表格添加分割线的方法,供大家参考。excel表格添加分割线的方法添加分割线步骤1:首先打…

Word中2010版设置带颜色底纹样式的

Word中2010版设置带颜色底纹样式的

设置,操作技巧,底纹,样式,颜色,  在Word中我们可对表格进行很多操作,有时我们需要对表格的标题栏、某一个单元格设置底纹、以及不同颜色的底纹。那么我们在哪里设置底纹呢,今天,小编就教大家在Word中2010版设置带颜色底纹样式的操作技巧。Wo…

bootstrap select下拉搜索插件使用

bootstrap select下拉搜索插件使用

搜索,插件,使用方法,详解,电脑软件,bootstrap-select是boot的下拉搜索插件,使用的时候有时我们需要动态从后台 或者 直接加载动态数据。下面是根据一级下拉菜单,动态加载二级联动方式。(不是ajax后台获取)首先引入js与css文件(一个css两个js)<lin…