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 相关文章推荐
25个非常棒的jQuery滑块插件和教程小结
Sep 02 Javascript
用原生JS获取CLASS对象(很简单实用)
Oct 15 Javascript
jQuery实现复选框成对选择及对应取消的方法
Mar 03 Javascript
你所不了解的javascript操作DOM的细节知识点(一)
Jun 17 Javascript
基于Jquery制作图片文字排版预览效果附源码下载
Nov 18 Javascript
javascript检测flash插件是否被禁用的方法
Jan 14 Javascript
微信小程序 网络请求(post请求,get请求)
Jan 17 Javascript
vue中过滤器filter的讲解
Jan 21 Javascript
小程序如何在不同设备上自适应生成海报的实现方法
Aug 20 Javascript
微信小程序常用的3种提示弹窗实现详解
Sep 19 Javascript
JS Array.from()将伪数组转换成数组的方法示例
Mar 23 Javascript
基于JS实现操作成功之后自动跳转页面
Sep 25 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 SQL之where语句生成器
2009/03/24 PHP
PHP安全配置详细说明
2011/09/26 PHP
setcookie中Cannot modify header information-headers already sent by错误的解决方法详解
2013/05/08 PHP
php中spl_autoload详解
2014/10/17 PHP
php插入含有特殊符号数据的处理方法
2016/11/24 PHP
PHP Pipeline 实现中间件的示例代码
2020/04/26 PHP
js 链式延迟执行DOME
2012/01/04 Javascript
js左侧三级菜单导航实例代码
2013/09/13 Javascript
利用CSS、JavaScript及Ajax实现高效的图片预加载
2013/10/16 Javascript
node.js中的buffer.Buffer.isBuffer方法使用说明
2014/12/14 Javascript
Jquery为DIV添加click事件的简单实例
2016/06/02 Javascript
JS构造函数与原型prototype的区别介绍
2016/07/04 Javascript
canvas红包照片实例分享
2017/02/28 Javascript
微信小程序实战之轮播图(3)
2017/04/17 Javascript
ReactNative中使用Redux架构总结
2017/12/15 Javascript
基于js中的存储键值对以及注意事项介绍
2018/03/30 Javascript
vue  自定义组件实现通讯录功能
2018/09/30 Javascript
JS温故而知新之变量提升和时间死区
2019/01/27 Javascript
JavaScript遍历DOM元素的常见方式示例
2019/02/16 Javascript
vue路由跳转传参数的方法
2019/05/06 Javascript
Nodejs 识别图片类型的方法
2019/08/15 NodeJs
[46:57]EG vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
在Python中处理时间之clock()方法的使用
2015/05/22 Python
Python中字符串的格式化方法小结
2016/05/03 Python
浅谈python import引入不同路径下的模块
2017/07/11 Python
python多线程socket编程之多客户端接入
2017/09/12 Python
django认证系统实现自定义权限管理的方法
2018/07/16 Python
python pytest进阶之xunit fixture详解
2019/06/27 Python
python使用ctypes调用扩展模块的实例方法
2020/01/28 Python
AC Lens:购买隐形眼镜
2017/02/26 全球购物
前台接待的工作职责
2013/11/21 职场文书
机关财务管理制度
2014/01/17 职场文书
药学专业学生的自我评价分享
2014/02/06 职场文书
酒店管理毕业生自荐信
2014/05/25 职场文书
2015年建筑工程工作总结
2015/05/13 职场文书
解决golang结构体tag编译错误的问题
2021/05/02 Golang