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 相关文章推荐
使用JSON.parse将json字符串转换成json对象的时候会出错
Sep 04 Javascript
JavaScript定时显示广告代码分享
Mar 02 Javascript
基于Vuejs和Element的注册插件的编写方法
Jul 03 Javascript
Thinkphp5微信小程序获取用户信息接口的实例详解
Sep 26 Javascript
p5.js实现斐波那契螺旋的示例代码
Mar 22 Javascript
vue2.0+ 从插件开发到npm发布的示例代码
Apr 28 Javascript
vue2.0 element-ui中el-select选择器无法显示选中的内容(解决方法)
Aug 24 Javascript
vscode 开发Vue项目的方法步骤
Nov 25 Javascript
详解使用webpack+electron+reactJs开发windows桌面应用
Feb 01 Javascript
ajaxfileupload.js实现上传文件功能
Apr 19 Javascript
Vee-validate 父组件获取子组件表单校验结果的实例代码
May 20 Javascript
vue 页面回退mounted函数不执行的解决方案
Jul 26 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抓取、分析国内视频网站的视频信息工具类
2014/04/02 PHP
php实现事件监听与触发的方法
2014/11/21 PHP
菜鸟javascript基础资料整理2
2010/12/06 Javascript
js下拉菜单语言选项简单实现
2013/09/23 Javascript
js实现的点击div区域外隐藏div区域
2014/06/30 Javascript
利用原生JavaScript获取元素样式只是获取而已
2014/10/08 Javascript
jQuery中:focus选择器用法实例
2014/12/30 Javascript
jquery实现可关闭的倒计时广告特效代码
2015/09/02 Javascript
高效利用Angular中内置服务$http、$location等
2016/03/22 Javascript
Jquery轮播效果实现过程解析
2016/03/30 Javascript
AngularJS过滤器filter用法分析
2016/12/11 Javascript
浅谈PDF.js使用心得
2018/06/07 Javascript
如何用Node写页面爬虫的工具集
2018/10/26 Javascript
NodeJS实现同步的方法
2019/03/02 NodeJs
JavaScript设计模式之观察者模式与发布订阅模式详解
2020/05/07 Javascript
利用python生成一个导出数据库的bat脚本文件的方法
2016/12/30 Python
Python数据分析之双色球中蓝红球分析统计示例
2018/02/03 Python
python re模块的高级用法详解
2018/06/06 Python
python 运用Django 开发后台接口的实例
2018/12/11 Python
Pycharm+django2.2+python3.6+MySQL实现简单的考试报名系统
2019/09/05 Python
python3 实现函数写文件路径的正确方法
2019/11/27 Python
基于python3生成标签云代码解析
2020/02/18 Python
pandas中的ExcelWriter和ExcelFile的实现方法
2020/04/24 Python
使用css3和jquery实现可伸缩搜索框
2014/02/12 HTML / CSS
html5中localStorage本地存储的简单使用
2017/06/16 HTML / CSS
联想西班牙官网:Lenovo西班牙
2018/08/28 全球购物
小区停车场管理制度
2014/01/27 职场文书
安全生产中长期规划实施方案
2014/02/21 职场文书
司机职责范本
2014/03/08 职场文书
家教广告词
2014/03/19 职场文书
加入学生会演讲稿
2014/04/24 职场文书
公务员群众路线专题民主生活会发言材料
2014/09/17 职场文书
小学教师自我评价
2015/03/04 职场文书
幼儿园端午节活动总结
2015/05/05 职场文书
周恩来的四个昼夜观后感
2015/06/03 职场文书
2016新春团拜会致辞
2015/08/01 职场文书