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 相关文章推荐
js this函数调用无需再次抓获id,name或标签名
Mar 03 Javascript
深入理解Javascript里的依赖注入
Mar 19 Javascript
JavaScript匿名函数用法分析
Feb 13 Javascript
基于jquery实现日历签到功能
Sep 11 Javascript
ES6新特征数字、数组、字符串
Oct 01 Javascript
Vue数据驱动模拟实现4
Jan 12 Javascript
微信小程序实现图片上传功能实例(前端+PHP后端)
Jan 10 Javascript
详解ES6中的三种异步解决方案
Jun 28 Javascript
详解Vue调用手机相机和相册以及上传
May 05 Javascript
JavaScript使用localStorage存储数据
Sep 25 Javascript
原生js+canvas实现下雪效果
Aug 02 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.MVC的模板标签系统(一)
2006/09/05 PHP
php实现博客,论坛图片防盗链的方法
2016/10/15 PHP
thinkPHP5 ACL用户权限模块用法详解
2017/05/10 PHP
PHP实现对xml的增删改查操作案例分析
2017/05/19 PHP
用js统计用户下载网页所需时间的脚本
2008/10/15 Javascript
JavaScript函数、方法、对象代码
2008/10/29 Javascript
找出字符串中出现次数最多的字母和出现次数精简版
2012/11/07 Javascript
JavaScript的setAttribute兼容性问题解决方法
2013/11/11 Javascript
在AngularJS应用中实现一些动画效果的代码
2015/06/18 Javascript
JS动态日期时间的获取方法
2015/09/28 Javascript
详解Node.Js如何处理post数据
2016/09/19 Javascript
jquery插件bootstrapValidator表单验证详解
2016/12/15 Javascript
jquery横向纵向鼠标滚轮全屏切换
2017/02/27 Javascript
Nodejs中Express 常用中间件 body-parser 实现解析
2017/05/22 NodeJs
Vue中计算属性computed的示例解读
2017/07/26 Javascript
vue中的数据绑定原理的实现
2018/07/02 Javascript
JavaScript数组特性与实践应用深入详解
2018/12/30 Javascript
jquery实现二级导航下拉菜单效果实例
2019/05/14 jQuery
layui 实现表单和文件上传一起传到后台的例子
2019/09/16 Javascript
微信小程序自定义波浪组件使用方法详解
2019/09/21 Javascript
p5.js码绘“跳动的小正方形”的实现代码
2019/10/22 Javascript
Node中对非阻塞I/O、事件循环的知识点总结
2020/01/05 Javascript
JavaScript 装逼指南(js另类写法)
2020/05/10 Javascript
Python搭建代理IP池实现检测IP的方法
2019/10/27 Python
Python logging模块进行封装实现原理解析
2020/08/07 Python
采用冷却技术的超自然舒适度:GhostBed床垫
2018/09/18 全球购物
加大码胸罩、内裤和服装:Just My Size
2019/03/21 全球购物
夜大毕业自我鉴定
2013/10/11 职场文书
工程专业求职自荐书范文
2014/02/08 职场文书
思想品德课教学反思
2014/02/10 职场文书
积极贯彻学习两会精神总结
2014/03/17 职场文书
旅游文化节策划方案
2014/06/06 职场文书
运动会广播稿200字
2014/10/18 职场文书
2014年酒店工作总结范文
2014/11/17 职场文书
2015国庆节宣传语
2015/07/14 职场文书
Vue组件更新数据v-model不生效的解决
2022/04/02 Vue.js