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将文本转化成JSON对象需要注意的问题
May 09 Javascript
javascript简单实现类似QQ头像弹出效果的方法
Aug 03 Javascript
JavaScript实现非常简单实用的下拉菜单效果
Aug 27 Javascript
JSP基于Bootstrap分页显示实例解析
Jun 12 Javascript
JS仿百度自动下拉框模糊匹配提示
Jul 25 Javascript
js实现动态显示时间效果
Mar 06 Javascript
vue实现留言板todolist功能
Aug 16 Javascript
原生JS+HTML5实现的可调节写字板功能示例
Aug 30 Javascript
js常用正则表达式集锦
May 17 Javascript
jQuery Datatables 动态列+跨列合并实现代码
Jan 30 jQuery
详解JavaScript中分解数字的三种方法
Jan 05 Javascript
vue css 相对路径导入问题级踩坑记录
Jun 05 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
PHP逐行输出(ob_flush与flush的组合)
2012/02/04 PHP
解决Codeigniter不能上传rar和zip压缩包问题
2014/03/07 PHP
php连接oracle数据库的核心步骤
2016/05/26 PHP
怎么用javascript进行拖拽
2006/07/20 Javascript
利用try-catch判断变量是已声明未声明还是未赋值
2014/03/12 Javascript
两种方法基于jQuery实现IE浏览器兼容placeholder效果
2014/10/14 Javascript
JavaScript bold方法入门实例(把指定文字显示为粗体)
2014/10/17 Javascript
Javascript实现获取及设置光标位置的方法
2015/07/21 Javascript
详解javascript事件冒泡
2016/01/09 Javascript
javaScript中的原型解析【推荐】
2016/05/05 Javascript
JavaScript lodash常见用法系列小结
2016/08/24 Javascript
详解Angular2中Input和Output用法及示例
2017/05/21 Javascript
详解JavaScript实现动态的轮播图效果
2019/04/29 Javascript
Android 自定义view仿微信相机单击拍照长按录视频按钮
2019/07/19 Javascript
原生js基于canvas实现一个简单的前端截图工具代码实例
2019/09/10 Javascript
使用node.JS中的url模块解析URL信息
2020/02/06 Javascript
vue Cli 环境删除与重装教程 - 版本文档
2020/09/11 Javascript
python虚拟环境的安装配置图文教程
2017/10/20 Python
matplotlib subplots 调整子图间矩的实例
2018/05/25 Python
Django开发中的日志输出的方法
2018/07/02 Python
更新修改后的Python模块方法
2019/03/03 Python
Python Django 页面上展示固定的页码数实现代码
2019/08/21 Python
Python流程控制 if else实现解析
2019/09/02 Python
python脚本实现音频m4a格式转成MP3格式的实例代码
2019/10/09 Python
菲律宾最大的网上花店和礼品店:PhilFlower.com
2018/02/09 全球购物
Myprotein法国官网:欧洲第一运动营养品牌
2019/03/26 全球购物
全球性的在线鞋类品牌:Public Desire
2019/04/03 全球购物
用你熟悉的语言写一个连接ORACLE数据库的程序,能够完成修改和查询工作
2012/06/11 面试题
美发店5.1活动方案
2014/01/24 职场文书
法律专业求职信
2014/05/24 职场文书
球队口号
2014/06/18 职场文书
周恩来的四个昼夜观后感
2015/06/03 职场文书
高三教师工作总结2015
2015/07/21 职场文书
九年级数学教学反思
2016/02/17 职场文书
深入解析Apache Hudi内核文件标记机制
2022/03/31 Servers
MySQL时区造成时差问题
2022/04/13 MySQL