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 相关文章推荐
Prototype中dom对象方法汇总
Sep 17 Javascript
js parseInt("08")未指定进位制问题
Jun 19 Javascript
Jquery从头学起第四讲 jquery入门教程
Aug 01 Javascript
hover的用法及live的用法介绍(鼠标悬停效果)
Mar 29 Javascript
JS getAttribute和setAttribute(取得和设置属性)的使用介绍
Jul 10 Javascript
$(document).ready(function() {})不执行初始化脚本
Jun 19 Javascript
JavaScript中的Web worker多线程API研究
Dec 06 Javascript
JQuery中层次选择器用法实例详解
May 18 Javascript
对于jQuery性能的一些优化建议
Aug 13 Javascript
关于Javascript回调函数的一个妙用
Aug 29 Javascript
jQuery实现的点击显示隐藏下拉菜单功能完整示例
May 17 jQuery
layui table 获取分页 limit的方法
Sep 20 Javascript
微信小程序多列表渲染数据开关互不影响的实现
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连mysql和oracle数据库性能比较
2006/10/09 PHP
php使用imagick模块实现图片缩放、裁剪、压缩示例
2014/04/17 PHP
PHP类中的魔术方法(Magic Method)简明总结
2014/07/08 PHP
php从数据库查询结果生成树形列表的方法
2015/04/17 PHP
PHP文件操作实例总结
2016/09/27 PHP
php删除二维数组中的重复值方法
2018/03/12 PHP
javascript背投广告代码的完善
2008/04/08 Javascript
JQuery 选择器、过滤器介绍
2011/02/14 Javascript
jQuery函数的第二个参数获取指定上下文中的DOM元素
2014/05/19 Javascript
基于jquery实现ajax无刷新评论
2020/08/19 Javascript
jquery hover 不停闪动问题的解决方法(亦为stop()的使用)
2017/02/10 Javascript
JS中双击和单击事件冲突的解决方法
2018/04/09 Javascript
JS常用正则表达式超全集(密码强度校验,金额校验,IE版本,IPv4,IPv6校验)
2020/02/03 Javascript
vue实现用户长时间不操作自动退出登录功能的实现代码
2020/07/23 Javascript
vue 使用 v-model 双向绑定父子组件的值遇见的问题及解决方案
2021/03/01 Vue.js
[02:08]什么藏在DOTA2 TI9“小紫本”里?斧王历险记告诉你!
2019/05/17 DOTA
[04:15]DOTA2-DPC中国联赛 正赛 Ehome vs Aster 选手采访
2021/03/11 DOTA
Flask SQLAlchemy一对一,一对多的使用方法实践
2013/02/10 Python
跟老齐学Python之正规地说一句话
2014/09/28 Python
Python最火、R极具潜力 2017机器学习调查报告
2017/12/11 Python
Python函数返回不定数量的值方法
2019/01/22 Python
通过python实现弹窗广告拦截过程详解
2019/07/10 Python
详解将Python程序(.py)转换为Windows可执行文件(.exe)
2019/07/19 Python
高考考python编程是真的吗
2020/07/20 Python
UGG美国官网:购买UGG雪地靴、拖鞋和鞋子
2017/12/31 全球购物
开办加工厂创业计划书
2014/01/03 职场文书
应届生如何写自荐信
2014/01/05 职场文书
医生进修自我鉴定
2014/01/19 职场文书
天猫某品牌专卖店运营计划书
2014/03/21 职场文书
毕业寄语大全
2014/04/09 职场文书
2014年教师节演讲稿
2014/09/03 职场文书
自动化专业大学生职业生涯规划范文:爱拚才会赢
2014/09/12 职场文书
工伤死亡理赔协议书
2014/10/20 职场文书
2014年行政部工作总结
2014/11/19 职场文书
2015年高中生国庆节演讲稿
2015/07/30 职场文书
如何在Python中创建二叉树
2021/03/30 Python