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


Posted in Javascript onMay 02, 2017

介绍

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'); //true
Symbol('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); //0
x.add('foo');
Collection.sizeOf(x); //1
Object.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个属性。读者自己主动去把这几个属性搞懂,对理解有些方法是非常有用的。

总结

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

Javascript 相关文章推荐
js word表格动态添加代码
Jun 07 Javascript
使用iframe window的scroll方法控制iframe页面滚动
Mar 05 Javascript
动态读取JSON解析键值对的方法
Jun 03 Javascript
最流行的Node.js精简型和全栈型开发框架介绍
Feb 26 Javascript
Javascript基础教程之比较null和undefined值
May 16 Javascript
jQuery实现日期联动效果实例
Jul 26 Javascript
Boostrap实现的登录界面实例代码
Oct 09 Javascript
利用vue写todolist单页应用
Dec 15 Javascript
js读取json文件片段中的数据实例
Mar 09 Javascript
vue-router二级导航切换路由及高亮显示的实现方法
Jul 10 Javascript
Vue实现渲染数据后控制滚动条位置(推荐)
Dec 09 Javascript
vue 中 elment-ui table合并上下两行相同数据单元格
Dec 26 Javascript
Bootstrap实现基于carousel.js框架的轮播图效果
May 02 #Javascript
Vue2.x中的父子组件相互通信的实现方法
May 02 #Javascript
详解webpack 配合babel 将es6转成es5 超简单实例
May 02 #Javascript
jQuery树插件zTree使用方法详解
May 02 #jQuery
JavaScript数据结构学习之数组、栈与队列
May 02 #Javascript
js-FCC算法-No repeats please字符串的全排列(详解)
May 02 #Javascript
详解webpack+es6+angular1.x项目构建
May 02 #Javascript
You might like
php 执行系统命令的方法
2009/07/07 PHP
php 编写安全的代码时容易犯的错误小结
2010/05/20 PHP
php学习笔记 数组的常用函数
2011/06/13 PHP
php curl获取网页内容(IPV6下超时)的解决办法
2013/07/16 PHP
PHP统计目录中文件以及目录中目录大小的方法
2016/01/09 PHP
Zend Framework实现具有基本功能的留言本(附demo源码下载)
2016/03/22 PHP
php打乱数组二维数组多维数组的简单实例
2016/06/17 PHP
php正则去除网页中所有的html,js,css,注释的实现方法
2016/11/03 PHP
PHP单例模式模拟Java Bean实现方法示例
2018/12/07 PHP
Jquery下attr和removeAttr的使用方法
2010/12/28 Javascript
再说AutoComplete自动补全之实现原理
2011/11/05 Javascript
推荐10个2014年最佳的jQuery视频插件
2014/11/12 Javascript
JQuery实现的购物车功能(可以减少或者添加商品并自动计算价格)
2015/01/13 Javascript
js禁止页面刷新与后退的方法
2015/06/08 Javascript
jQuery滚动加载图片实现原理
2015/12/14 Javascript
基于JavaScript实现定时跳转到指定页面
2016/01/01 Javascript
Vue.js系列之项目搭建(1)
2017/01/03 Javascript
原生js实现水平方向无缝滚动
2017/01/10 Javascript
老生常谈angularjs中的$state.go
2017/04/24 Javascript
AngularJS中的promise用法分析
2017/05/19 Javascript
vue如何集成raphael.js中国地图的方法示例
2017/08/15 Javascript
JS实现简单的选择题测评系统代码思路详解(demo)
2017/09/03 Javascript
vue数据传递--我有特殊的实现技巧
2018/03/20 Javascript
vue 实现全选全不选的示例代码
2018/03/29 Javascript
Angular 容器部署的方法
2018/04/17 Javascript
微信小程序间使用navigator跳转传值问题实例分析
2020/03/27 Javascript
使用js和canvas实现时钟效果
2020/09/08 Javascript
使用PyCharm创建Django项目及基本配置详解
2018/10/24 Python
连接pandas以及数组转pandas的方法
2019/06/28 Python
美国在线购买内衣网站:HerRoom
2020/02/22 全球购物
《鹬蚌相争》教学反思
2014/04/22 职场文书
大学生个人年度总结范文
2015/02/15 职场文书
2015个人年度工作总结范文
2015/05/28 职场文书
青少年法制教育心得体会
2016/01/14 职场文书
《地震中的父与子》教学反思
2016/02/16 职场文书
详解如何用Python实现感知器算法
2021/06/18 Python