ES6学习笔记之map、set与数组、对象的对比


Posted in Javascript onMarch 01, 2018

前言

ES5中的数据结构,主要是用Array和Object。在ES6中主要新增了Set和Map数据结构。到目前为止,常用的数据结构有四种Array、Object、Set、Map。下面话不多说了,来一起看看详细的介绍吧。

// 数据结构横向对比,增,查,改,删

1、map和数组对比

{ 
 let map=new Map();
 let array=[];

 /**增**/
 map.set('t',1);
 array.push({t:1});
 console.info('map-array',map,array); 

 /**查**/
 let map_exist=map.has('t');
 let array_exist=array.find(item=>item.t);
 console.info('map-array',map_exist,array_exist); 

 /**改**/
 map.set('t',2);
 array.forEach(item=>item.t?item.t=2:'');
 console.info('map-array-modify',map,array); 

 /**删**/
 map.delete('t');
 let index=array.findIndex(item=>item.t);
 array.splice(index,1);
 console.info('map-array-empty',map,array);
}

2、set和数组对比

{
 let set=new Set();
 let array=[]; 
 
 // 增
 set.add({t:1});
 array.push({t:1});
 console.info('set-array',set,array);

 // 查
 let set_exist=set.has({t:1});
 let array_exist=array.find(item=>item.t);
 console.info('set-array',set_exist,array_exist); 

 // 改
 set.forEach(item=>item.t?item.t=2:'');
 array.forEach(item=>item.t?item.t=2:'');
 console.info('set-array-modify',set,array); 
 
 // 删
 set.forEach(item=>item.t?set.delete(item):'');
 let index=array.findIndex(item=>item.t);
 array.splice(index,1);
 console.info('set-array-empty',set,array);
}

3、map、set和Object对比

{ 
 let item={t:1};
 let map=new Map();
 let set=new Set();
 let obj={}; 

 // 增
 map.set('t',1);
 set.add(item);
 obj['t']=1;
 console.info('map-set-obj',obj,map,set); 

 // 查 
 console.info({
 map_exist:map.has('t'),
 set_exist:set.has(item),
 obj_exist:'t' in obj
 }) 

 // 改
 map.set('t',2);
 item.t=2;
 obj['t']=2;
 console.info('map-set-obj-modify',obj,map,set); 

 // 删除
 map.delete('t');
 set.delete(item); 
 delete obj['t'];
 console.info('map-set-obj-empty',obj,map,set);
}

 通过对比可以发现,能使用map的优先使用,不使用数组,

 考虑数据的唯一性,考虑使用set,不使用Objet

 以后的开发中可以优先考虑使用map和set了,并且可以放弃数组和object了

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
javascript下给元素添加事件的方法与代码
Aug 13 Javascript
jquery text,radio,checkbox,select操作实现代码
Jul 09 Javascript
jQuery动态添加的元素绑定事件处理函数代码
Aug 02 Javascript
js获取height和width的方法说明
Jan 06 Javascript
10个基于浏览器的JavaScript调试工具分享
Feb 07 Javascript
Angularjs编写KindEditor,UEidtor,jQuery指令
Jan 28 Javascript
AngularJS动态生成div的ID源码解析
Aug 29 Javascript
解决ajax不能访问本地文件问题(利用js跨域原理)
Jan 24 Javascript
ES6数组的扩展详解
Apr 25 Javascript
js实现贪吃蛇小游戏
Oct 29 Javascript
vue基本使用--refs获取组件或元素的实例
Nov 07 Javascript
微信小程序实现watch监听
Jun 04 Javascript
Node.js静态服务器的实现方法
Feb 28 #Javascript
JS脚本加载后执行相应回调函数的操作方法
Feb 28 #Javascript
vue+webpack 打包文件 404 页面空白的解决方法
Feb 28 #Javascript
webpack项目调试以及独立打包配置文件的方法
Feb 28 #Javascript
vue-cli+webpack项目 修改项目名称的方法
Feb 28 #Javascript
vue 组件 全局注册和局部注册的实现
Feb 28 #Javascript
vue 自定义全局方法,在组件里面的使用介绍
Feb 28 #Javascript
You might like
PHP文本数据库的搜索方法
2006/10/09 PHP
stripos函数知识点实例分享
2019/02/11 PHP
php桥接模式应用案例分析
2019/10/23 PHP
YII2框架中actions的作用与使用方法示例
2020/03/13 PHP
goto语法在PHP中的使用教程
2020/09/17 PHP
javascript中运用闭包和自执行函数解决大量的全局变量问题
2010/12/30 Javascript
jQuery Validate 验证,校验规则写在控件中的具体实例
2014/02/27 Javascript
js中精确计算加法和减法示例
2014/03/28 Javascript
详谈javascript中的cookie
2015/06/03 Javascript
JS实现支持多选的遍历下拉列表代码
2015/08/20 Javascript
JavaScript实现标题栏文字轮播效果代码
2015/10/24 Javascript
javascript针对cookie的基本操作实例详解
2015/11/30 Javascript
JS实现关闭当前页而不弹出提示框的方法
2016/06/22 Javascript
总结JavaScript的正则与其他语言的不同之处
2016/08/25 Javascript
ElementUI多个子组件表单的校验管理实现
2019/11/07 Javascript
基于vue-draggable 实现三级拖动排序效果
2020/01/10 Javascript
JavaScript组合设计模式--改进引入案例分析
2020/05/23 Javascript
vue+iview实现文件上传
2020/11/17 Vue.js
[01:10]3.19DOTA2发布会 三代刀塔人第一代
2014/03/25 DOTA
[01:39:42]Fnatic vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
一个简单的python程序实例(通讯录)
2013/11/29 Python
Python+tkinter使用40行代码实现计算器功能
2018/01/30 Python
Pyinstaller将py打包成exe的实例
2018/03/31 Python
Python实现SQL注入检测插件实例代码
2019/02/02 Python
python 实现逻辑回归
2020/12/30 Python
CSS3提交意见输入框样式代码
2014/10/30 HTML / CSS
澳大利亚二手奢侈品网站:Modsie
2019/09/23 全球购物
Ajax和javascript的区别
2013/07/20 面试题
管理信息系学生的自我评价
2014/01/11 职场文书
学生个人自我鉴定范文
2014/03/28 职场文书
荷叶母亲教学反思
2014/04/30 职场文书
2014离婚协议书范文两篇
2014/09/15 职场文书
老人再婚离婚协议书范本
2014/10/27 职场文书
校运会班级霸气口号
2015/12/24 职场文书
Mysql8.0递归查询的简单用法示例
2021/08/04 MySQL
【海涛DOTA】D-cup邀请赛NV.cn vs DT.Love
2022/04/01 DOTA