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 相关文章推荐
一实用的实现table排序的Javascript类库
Sep 12 Javascript
输入密码检测大写是否锁定js实现代码
Dec 03 Javascript
JS实现对中文字符串进行utf-8的Base64编码的方法(使其与Java编码相同)
Jun 21 Javascript
Bootstrap中的Dropdown下拉菜单更改为悬停(hover)触发
Aug 31 Javascript
JavaScript 继承详解(六)
Oct 11 Javascript
jQuery实现遍历复选框的方法示例
Mar 06 Javascript
angular+ionic返回上一页并刷新页面
Aug 08 Javascript
详解如何在vue项目中使用eslint+prettier格式化代码
Nov 10 Javascript
vue项目实现图片上传功能
Dec 23 Javascript
JavaScript接口实现方法实例分析
May 16 Javascript
Vue提供的三种调试方式你知道吗
Jan 18 Vue.js
JS前端使用Canvas快速实现手势解锁特效
Sep 23 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网页游戏学习之Xnova(ogame)源码解读(四)
2014/06/23 PHP
thinkphp中多表查询中防止数据重复的sql语句(必看)
2016/09/22 PHP
浅谈PHP中pack、unpack的详细用法
2018/03/12 PHP
CentOS7系统搭建LAMP及更新PHP版本操作详解
2020/03/26 PHP
javascript Prototype 对象扩展
2009/05/15 Javascript
JavaScript面向对象之Prototypes和继承
2012/07/12 Javascript
js自定义方法通过隐藏iframe实现文件下载
2013/02/21 Javascript
js window.onload 加载多个函数和追加函数详解
2014/01/08 Javascript
jQuery异步验证用户名是否存在示例代码
2014/05/21 Javascript
JS组件系列之Bootstrap Icon图标选择组件
2016/01/28 Javascript
Struts2+jquery.form.js实现图片与文件上传的方法
2016/05/05 Javascript
浅析Javascript中bind()方法的使用与实现
2016/05/30 Javascript
Bootstrap+jfinal退出系统弹出确认框的实现方法
2016/05/30 Javascript
Vue.js每天必学之指令系统与自定义指令
2016/09/07 Javascript
Bootstrap时间选择器datetimepicker和daterangepicker使用实例解析
2016/09/17 Javascript
JavaScript实现自动切换图片代码
2016/10/11 Javascript
原生js二级联动效果
2017/06/20 Javascript
基于vue2实现上拉加载功能
2017/11/28 Javascript
VuePress 快速踩坑小结
2019/02/14 Javascript
layui lay-verify form表单自定义验证规则详解
2019/09/18 Javascript
微信小程序实现聊天室
2020/08/21 Javascript
python返回昨天日期的方法
2015/05/13 Python
Python运行报错UnicodeDecodeError的解决方法
2016/06/07 Python
python检索特定内容的文本文件实例
2018/06/05 Python
python 堆和优先队列的使用详解
2019/03/05 Python
python脚本调用iftop 统计业务应用流量的思路详解
2019/10/11 Python
PyTorch笔记之scatter()函数的使用
2020/02/12 Python
python爬虫scrapy图书分类实例讲解
2020/11/23 Python
HTML5边玩边学(3)像素和颜色
2010/09/21 HTML / CSS
澳大利亚窗帘商店:Curtain Wonderland
2019/12/01 全球购物
幼儿园教研活动方案
2014/01/19 职场文书
交通事故赔偿协议书范本
2014/04/15 职场文书
优秀学生评语大全
2014/04/25 职场文书
服务口号大全
2014/06/11 职场文书
流动人口婚育证明
2014/10/19 职场文书
鸟的天堂导游词
2015/01/31 职场文书