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 css float属性的特殊写法
Nov 13 Javascript
谈谈JavaScript中的函数与闭包
Apr 14 Javascript
基于jquery实现放大镜效果
Aug 17 Javascript
js实现文字垂直滚动和鼠标悬停效果
Dec 31 Javascript
JS仿百度自动下拉框模糊匹配提示
Jul 25 Javascript
关于javascript中限定时间内防止按钮重复点击的思路详解
Aug 16 Javascript
jQuery插件FusionWidgets实现的Bulb图效果示例【附demo源码下载】
Mar 23 jQuery
Vue.js结合Ueditor富文本编辑器的实例代码
Jul 11 Javascript
Node.js的Koa实现JWT用户认证方法
May 05 Javascript
JavaScript简单实现动态改变HTML内容的方法示例
Dec 25 Javascript
详解Vuex下Store的模块化拆分实践
Jul 31 Javascript
Java 生成随机字符的示例代码
Jan 13 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
Get或Post提交值的非法数据处理
2006/10/09 PHP
第十五节--Zend引擎的发展
2006/11/16 PHP
php实现字符串翻转的方法
2015/03/27 PHP
ThinkPHP实现登录退出功能
2017/06/29 PHP
基于jQuery的图片左右无缝滚动插件
2012/05/23 Javascript
如何将php数组或者对象传递给javascript
2014/03/20 Javascript
ECMAScript6快速入手攻略
2016/07/18 Javascript
微信小程序手势操作之单触摸点与多触摸点
2017/03/10 Javascript
浅谈SpringMVC中post checkbox 多选框value的值(隐藏域方式)
2018/01/08 Javascript
JavaScript判断浏览器运行环境的详细方法
2019/06/30 Javascript
Python with的用法
2014/08/22 Python
解决PyCharm中光标变粗的问题
2017/08/05 Python
基于python中staticmethod和classmethod的区别(详解)
2017/10/24 Python
Python中 传递值 和 传递引用 的区别解析
2018/02/22 Python
python多线程之事件Event的使用详解
2018/04/27 Python
python二元表达式用法
2019/12/04 Python
python实现超级玛丽游戏
2020/03/18 Python
python函数调用,循环,列表复制实例
2020/05/03 Python
django在开发中取消外键约束的实现
2020/05/20 Python
Keras: model实现固定部分layer,训练部分layer操作
2020/06/28 Python
分享全球十款超强HTML5开发工具
2014/05/14 HTML / CSS
一个基于canvas的移动端图片编辑器的实现
2020/10/28 HTML / CSS
国际知名设计师时装商店:Coggles
2016/09/05 全球购物
Charlotte Tilbury澳大利亚官网:英国美妆品牌
2018/10/05 全球购物
人事专员工作职责
2014/02/22 职场文书
校庆口号
2014/06/20 职场文书
公司员工离职证明书
2014/10/04 职场文书
群众路线教育实践活动个人对照检查材料思想汇报(社区班子)
2014/10/06 职场文书
2014年人民调解工作总结
2014/12/08 职场文书
2014年政府采购工作总结
2014/12/09 职场文书
2014高三学生考试作弊检讨书
2014/12/14 职场文书
酒店客房服务员岗位职责
2015/04/09 职场文书
2016年“12.3”国际残疾人日活动总结
2016/04/01 职场文书
Python中的xlrd模块使用整理
2021/06/15 Python
使用Python拟合函数曲线
2022/04/14 Python
第四次工业革命,打工人与机器人的竞争
2022/04/21 数码科技