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 相关文章推荐
让JavaScript的Alert弹出框失效的方法禁止弹出警告框
Sep 03 Javascript
浅谈JSON.stringify()和JOSN.parse()方法的不同
Aug 29 Javascript
jQuery Validate 数组 全部验证问题
Jan 12 Javascript
js利用for in循环获取 一个对象的所有属性以及值的实例
Mar 30 Javascript
bootstrap modal+gridview实现弹出框效果
Aug 15 Javascript
在vue中使用Autoprefixed的方法
Jul 27 Javascript
react-native使用leanclound消息推送的方法
Aug 06 Javascript
angular6.x中ngTemplateOutlet指令的使用示例
Aug 09 Javascript
bootstrap tooltips在 angularJS中的使用方法
Apr 10 Javascript
详解ES6中class的实现原理
Oct 03 Javascript
原生js实现滑块区间组件
Jan 20 Javascript
ant design vue的form表单取值方法
Jun 01 Vue.js
微信小程序多列表渲染数据开关互不影响的实现
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
为了这两部电子管收音机,买了6套全新电子管和10粒刻度盘灯泡
2021/03/02 无线电
php代码中使用换行及(\n或\r\n和br)的应用
2013/02/02 PHP
自制PHP框架之设计模式
2017/05/07 PHP
php写入mysql中文乱码的实例解决方法
2019/09/17 PHP
Firefox+FireBug使JQuery的学习更加轻松愉快
2010/01/01 Javascript
使用jQuery UI的tooltip函数修饰title属性的气泡悬浮框
2013/06/24 Javascript
jquery ui dialog实现弹窗特效的思路及代码
2013/08/03 Javascript
基于jQuery实现网页进度显示插件
2015/03/04 Javascript
JS+CSS实现自动切换的网页滑动门菜单效果代码
2015/09/14 Javascript
基于JS代码实现当鼠标悬停表格上显示这一格的全部内容
2016/06/12 Javascript
使用node.js搭建服务器
2017/05/20 Javascript
vue.js实现价格格式化的方法
2017/05/23 Javascript
npm配置国内镜像资源+淘宝镜像的方法
2018/09/07 Javascript
nodejs微信开发之自动回复的实现
2019/03/17 NodeJs
JS求1到任意数之间的所有质数的方法详解
2019/05/20 Javascript
解决layui数据表格Date日期格式的回显Object的问题
2019/09/19 Javascript
手把手带你入门微信小程序新框架Kbone的使用
2020/02/25 Javascript
vue使用canvas实现移动端手写签名
2020/09/22 Javascript
jquery实现异步文件上传ajaxfileupload.js
2020/10/23 jQuery
Python魔术方法详解
2015/02/14 Python
Python中 Lambda表达式全面解析
2016/11/28 Python
python正则表达式的使用
2017/06/12 Python
浅谈python3.x pool.map()方法的实质
2019/01/16 Python
在pycharm中配置Anaconda以及pip源配置详解
2019/09/09 Python
使用Matplotlib绘制不同颜色的带箭头的线实例
2020/04/17 Python
Python DES加密实现原理及实例解析
2020/07/17 Python
Python爬虫设置Cookie解决网站拦截并爬取蚂蚁短租的问题
2021/02/22 Python
HTML5中使用postMessage实现两个网页间传递数据
2016/06/22 HTML / CSS
3种方式实现瀑布流布局小结
2019/09/05 HTML / CSS
沙特阿拉伯电子产品和家用电器购物网站:Black Box
2019/07/24 全球购物
澳大利亚在线高跟鞋商店:Shoe Me
2019/11/19 全球购物
经济实惠的名牌太阳镜和眼镜:Privé Revaux
2021/02/07 全球购物
介绍一下结构化程序设计方法和面向对象程序设计方法的区别
2012/06/27 面试题
怎样写好自我评价呢?
2014/02/16 职场文书
交通运输局四风问题对照检查材料思想汇报
2014/10/09 职场文书
R9700摩机记
2022/04/05 无线电