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 相关文章推荐
Jquery 学习笔记(一)
Oct 13 Javascript
js和html5实现手机端刮刮卡抽奖效果完美兼容android/IOS
Nov 18 Javascript
javascript获取四位数字或者字母的随机数
Jan 09 Javascript
详解javascript遍历方式
Nov 11 Javascript
基于jQuery实现仿搜狐辩论投票动画代码(附源码下载)
Feb 18 Javascript
基于BootStrap实现局部刷新分页实例代码
Aug 08 Javascript
基于Node.js模板引擎教程-jade速学与实战1
Sep 17 Javascript
微信小程序 setData 对 data数据影响问题
Apr 18 Javascript
怎么使用javascript深度拷贝一个数组
Jun 06 Javascript
vue简单封装axios插件和接口的统一管理操作示例
Feb 02 Javascript
vue点击Dashboard不同内容 跳转到同一表格的实例
Nov 13 Javascript
为什么推荐使用JSX开发Vue3
Dec 28 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
三国漫画《火凤燎原》宣布动画化PV放出 预计2020年播出
2020/03/08 国漫
php 获取全局变量的代码
2011/04/21 PHP
PHP编码规范的深入探讨
2013/06/06 PHP
跟我学Laravel之请求与输入
2014/10/15 PHP
PHP时间处理类操作示例
2018/09/05 PHP
PHP利用pdo_odbc实现连接数据库示例【基于ThinkPHP5.1搭建的项目】
2019/05/13 PHP
laravel5.1框架基础之Blade模板继承简单使用方法分析
2019/09/05 PHP
JavaScript中使用正则匹配多条,且获取每条中的分组数据
2010/11/30 Javascript
利用百度地图JSAPI生成h7n9禽流感分布图实现代码
2013/04/15 Javascript
JS动态改变表格边框宽度的方法
2015/03/31 Javascript
用javascript实现自动输出网页文本
2015/07/30 Javascript
jquery插件jquery.nicescroll实现图片无滚动条左右拖拽的方法
2015/08/10 Javascript
Bootstrap Modal遮罩弹出层(完整版)
2016/11/21 Javascript
AngularJs中Bootstrap3 datetimepicker使用实例
2016/12/13 Javascript
Vue + Webpack + Vue-loader学习教程之功能介绍篇
2017/03/14 Javascript
JS实现多级菜单中当前菜单不随页面跳转样式而发生变化
2017/05/30 Javascript
Angular 2 ngForm中的ngModel、[ngModel]和[(ngModel)]的写法
2017/06/29 Javascript
MVVM框架下实现分页功能示例
2018/06/14 Javascript
详解js 创建对象的几种方法
2019/03/08 Javascript
如何阻止小程序遮罩层下方图层滚动
2019/09/05 Javascript
详解Vue中的Props与Data细微差别
2020/03/02 Javascript
js实现小球在页面规定的区域运动
2020/06/16 Javascript
python装饰器decorator介绍
2014/11/21 Python
操作Windows注册表的简单的Python程序制作教程
2015/04/07 Python
Django配置celery(非djcelery)执行异步任务和定时任务
2018/07/16 Python
Python如何将函数值赋给变量
2020/04/28 Python
Python同时迭代多个序列的方法
2020/07/28 Python
Jupyter Notebook 安装配置与使用详解
2021/01/06 Python
纯CSS3绘制打火机动画火焰效果
2016/07/18 HTML / CSS
Engel & Bengel官网:婴儿推车、儿童房家具和婴儿设备
2019/12/28 全球购物
职称自我鉴定
2013/10/15 职场文书
三严三实学习心得体会
2014/10/13 职场文书
委托公证书格式
2015/01/26 职场文书
导游词之青城山景区
2019/09/27 职场文书
导游词之包公祠
2019/11/25 职场文书
python 多态 协议 鸭子类型详解
2021/11/27 Python