ES6 Symbol在对象中的作用实例分析


Posted in Javascript onJune 06, 2020

本文实例讲述了ES6 Symbol在对象中的作用。分享给大家供大家参考,具体如下:

在ES5中 对象属性名都是字符串,这容易造成属性名的冲突,比如,你使用了一个他人提供的对象,但又想为这个对象添加新的方法(mixin 模式),新方法的名字就有可能与现有方法产生冲突,于是 ES6 引入了Symbol。Symbol是一种新的原始数据类型,表示独一无二的值。它是继undefined、null、布尔值(Boolean)、字符串(String)、数值(Number)、对象(Object)六种数据类型之后的第七种数据类型。凡是属性名属于 Symbol 类型,就都是独一无二的,可以保证不会与其他属性名产生冲突。

1.声明Symbol

Symbol函数可以接受一个字符串作为参数,表示对 Symbol 实例的描述,主要是为了在控制台显示,或者转为字符串时,比较容易区分。

var f= Symbol();//Symbol()
var f= Symbol('foo');//Symbol(foo)
// 没有参数的情况
let s1 = Symbol();
let s2 = Symbol();
s1 === s2 // false

// 有参数的情况
let s1 = Symbol('foo');
let s2 = Symbol('foo');

s1 === s2 // false

注意,Symbol函数的参数只是表示对当前 Symbol 值的描述,因此相同参数的Symbol函数的返回值是不相等的。

s1和s2都是Symbol函数的返回值,而且参数相同,但是它们是不相等的。

2.Symbol在对象中的应用

Symbol作为属性名:

let mySymbol = Symbol();

// 第一种写法
let a = {};
a[mySymbol] = 'Hello!';

// 第二种写法
let a = {
 [mySymbol]: 'Hello!'
};

// 第三种写法
let a = {};
Object.defineProperty(a, mySymbol, { value: 'Hello!' });

// 以上写法都得到同样结果
a[mySymbol] // "Hello!"

赋值-括号形式:

a[mySymbol]='web';

3.Symbol对象元素的保护作用

在对象中有很多值,但是循环输出时,并不希望全部输出,那我们就可以使用Symbol进行保护。

没有进行保护的写法:

var obj={name:'小明',skill:'web',age:18};
for (let item in obj){
  console.log(obj[item]);
}

现在我不想别人知道我的年龄,这时候我就可以使用Symbol来进行循环保护。

let obj={name:'小明',skill:'web'};
let age=Symbol();
obj[age]=18;
for (let item in obj){
  console.log(obj[item]);//小明、web
} 
console.log(obj[age]);

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
基于jquery的获取mouse坐标插件的实现代码
Apr 01 Javascript
IE之动态添加DOM节点触发window.resize事件
Jul 27 Javascript
jQuery的运行机制和设计理念分析
Apr 05 Javascript
Jquery中给animation加更多的运作效果实例
Sep 05 Javascript
js 获取、清空input type="file"的值(示例代码)
Dec 24 Javascript
js 动态修改css文件的方法
Aug 05 Javascript
js实现正则匹配中文标点符号的方法
Dec 23 Javascript
canvas时钟效果
Feb 16 Javascript
jquery实现回车键触发事件(实例讲解)
Nov 21 jQuery
在Vue中获取组件声明时的name属性方法
Sep 12 Javascript
nvm、nrm、npm 安装和使用详解(小结)
Jan 17 Javascript
JQuery中DOM节点的操作与访问方法实例分析
Dec 23 jQuery
微信小程序多列表渲染数据开关互不影响的实现
Jun 05 #Javascript
浅谈element中InfiniteScroll按需引入的一点注意事项
Jun 05 #Javascript
使用JavaScript实现网页秒表功能(含开始、暂停、继续、重置功能)
Jun 05 #Javascript
Node.js API详解之 dgram模块用法实例分析
Jun 05 #Javascript
taro 实现购物车逻辑的实例代码
Jun 05 #Javascript
Node.js API详解之 V8模块用法实例分析
Jun 05 #Javascript
Vue CLI4 Vue.config.js标准配置(最全注释)
Jun 05 #Javascript
You might like
PHP新手上路(四)
2006/10/09 PHP
探讨PHP使用eAccelerator的API开发详解
2013/06/09 PHP
PHP将英文数字转换为阿拉伯数字实例讲解
2019/01/28 PHP
jQeury淡入淡出需要注意的问题
2010/09/08 Javascript
jquery序列化表单去除指定元素示例代码
2014/04/10 Javascript
基于NodeJS的前后端分离的思考与实践(五)多终端适配
2014/09/26 NodeJs
jQuery控制文本框只能输入数字和字母及使用方法
2016/05/26 Javascript
Javascript将数值转换为金额格式(分隔千分位和自动增加小数点)
2016/06/22 Javascript
简单理解js的冒泡排序
2016/12/19 Javascript
使用JavaScriptCore实现OC和JS交互详解
2017/03/28 Javascript
JS+HTML5 FileReader实现文件上传前本地预览功能
2020/03/27 Javascript
解决Vue在Tomcat8下部署页面不加载的问题
2019/11/12 Javascript
彻底搞懂并解决vue-cli4中图片显示的问题实现
2020/08/31 Javascript
[02:49:21]2019完美盛典全程录像
2019/12/08 DOTA
Python自定义类的数组排序实现代码
2016/08/28 Python
python读取几个G的csv文件方法
2019/01/07 Python
Python实现的删除重复文件或图片功能示例【去重】
2019/04/23 Python
Python使用mongodb保存爬取豆瓣电影的数据过程解析
2019/08/14 Python
浅谈tensorflow 中tf.concat()的使用
2020/02/07 Python
Python unittest单元测试openpyxl实现过程解析
2020/05/27 Python
django的autoreload机制实现
2020/06/03 Python
python代码区分大小写吗
2020/06/17 Python
Pandas数据分析的一些常用小技巧
2021/02/07 Python
匡威意大利官方商店 :Converse意大利
2018/11/27 全球购物
环境科学毕业生自荐信
2013/11/21 职场文书
第一批党的群众路线教育实践活动工作总结
2014/03/03 职场文书
大学班级文化建设方案
2014/05/06 职场文书
公司年终奖分配方案
2014/06/16 职场文书
出差报告怎么写
2014/11/06 职场文书
法务专员岗位职责
2015/02/14 职场文书
幼儿园万圣节活动总结
2015/05/05 职场文书
2015中秋祝酒词
2015/08/12 职场文书
解决python绘图使用subplots出现标题重叠的问题
2021/04/30 Python
聊聊Python中关于a=[[]]*3的反思
2021/06/02 Python
Redis集群新增、删除节点以及动态增加内存的方法
2021/09/04 Redis
世界十大狙击步枪排行榜
2022/03/20 杂记