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 toFixed()方法的重写实现精度的统一
Mar 06 Javascript
AngularJS学习笔记之依赖注入详解
May 16 Javascript
AngularJS过滤器filter用法实例分析
Nov 04 Javascript
JavaScript实现简单的四则运算计算器完整实例
Apr 28 Javascript
React+react-dropzone+node.js实现图片上传的示例代码
Aug 23 Javascript
JavaScrip数组删除特定元素的几种方法总结
Sep 06 Javascript
js表单序列化判断空值的实例
Sep 22 Javascript
使用 Node.js 模拟滑动拼图验证码操作的示例代码
Nov 02 Javascript
vue+element-ui实现表格编辑的三种实现方式
Oct 31 Javascript
Vue核心概念Getter的使用方法
Jan 18 Javascript
小程序跨页面交互的作用与方法详解
Jan 07 Javascript
微信小程序学习总结(三)条件、模板、文件引用实例分析
Jun 04 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 会话(session 时间设定)使用入门代码
2008/06/05 PHP
解析smarty模板中类似for的功能实现
2013/06/18 PHP
学习php设计模式 php实现命令模式(command)
2015/12/08 PHP
XHProf报告字段含义的解析
2016/05/17 PHP
laravel学习笔记之模型事件的几种用法示例
2017/08/15 PHP
Yii框架使用PHPExcel导出Excel文件的方法分析【改进版】
2019/07/24 PHP
写了10年的Javascript也未必全了解的连续赋值运算
2011/03/25 Javascript
JavaScript参数个数可变的函数举例说明
2014/10/10 Javascript
简介AngularJS中使用factory和service的方法
2015/06/17 Javascript
JS根据key值获取URL中的参数值及把URL的参数转换成json对象
2015/08/26 Javascript
jquery.form.js框架实现文件上传功能案例解析(springmvc)
2016/05/26 Javascript
JS简单实现仿百度控制台输出信息效果
2016/09/04 Javascript
JQuery实现DIV其他动画效果的简单实例
2016/09/18 Javascript
详解基于javascript实现的苹果系统底部菜单
2016/12/02 Javascript
详解jQuery选择器
2016/12/21 Javascript
在小程序中使用Echart图表的示例代码
2018/08/02 Javascript
关于vue v-for循环解决img标签的src动态绑定问题
2018/09/18 Javascript
微信小程序引入VANT组件的方法步骤
2019/09/19 Javascript
微信小程序拖拽排序列表的示例代码
2020/07/08 Javascript
OpenLayers3实现对地图的基本操作
2020/09/28 Javascript
[50:34]VGJ.T vs Fnatic 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python实现数据库跨服务器迁移
2018/04/12 Python
50行Python代码获取高考志愿信息的实现方法
2019/07/23 Python
python Web flask 视图内容和模板实现代码
2019/08/23 Python
Python集合基本概念与相关操作实例分析
2019/10/30 Python
解决pycharm上的jupyter notebook端口被占用问题
2019/12/17 Python
树莓派升级python的具体步骤
2020/07/05 Python
python中的测试框架
2020/11/13 Python
CSS3中Animation动画属性用法详解
2016/07/04 HTML / CSS
canvas实现高阶贝塞尔曲线(N阶贝塞尔曲线生成器)
2018/01/10 HTML / CSS
安全生产知识竞赛活动总结
2014/07/07 职场文书
教师节倡议书
2014/08/30 职场文书
实习协议书
2015/01/27 职场文书
辞职信的写法
2015/02/27 职场文书
ES6 解构赋值的原理及运用
2021/05/25 Javascript
Go调用Rust方法及外部函数接口前置
2022/06/14 Golang