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 相关文章推荐
通用于ie和firefox的函数 GetCurrentStyle (obj, prop)
Dec 27 Javascript
javascript 二分法(数组array)
Apr 24 Javascript
JS+CSS设置img在DIV中只显示Img垂直居中的部分
Oct 24 Javascript
JS将表单导出成EXCEL的实例代码
Nov 11 Javascript
jQuery操作表单常用控件方法小结
Mar 23 Javascript
JS+CSS实现滑动切换tab菜单效果
Aug 25 Javascript
jquery实现简洁文件上传表单样式
Nov 02 Javascript
jQuery Easyui datagrid editor为combobox时指定数据源实例
Dec 19 Javascript
canvas快速绘制圆形、三角形、矩形、多边形方法介绍
Dec 29 Javascript
JavaScript实现获取用户单击body中所有A标签内容的方法
Jun 05 Javascript
vue.js click点击事件获取当前元素对象的操作
Aug 07 Javascript
Openlayers实现扩散的动态点(水纹效果)
Aug 17 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
检测png图片是否完整的php代码
2010/09/06 PHP
codeigniter中测试通过的分页类示例
2014/04/17 PHP
浅谈PHP的反射API
2017/02/26 PHP
PHP实现唤起微信支付功能
2019/02/18 PHP
一个简单的JS鼠标悬停特效具体方法
2013/06/17 Javascript
让angularjs支持浏览器自动填表
2014/11/10 Javascript
jquery的幻灯片图片切换效果代码分享
2015/09/07 Javascript
AngularJS $injector 依赖注入详解
2016/09/14 Javascript
javascript中href和replace的比较(详解)
2016/11/25 Javascript
javascript html5轻松实现拖动功能
2017/03/01 Javascript
解决BootStrap Fileinput手机图片上传显示旋转问题
2017/06/01 Javascript
JS手机端touch事件计算滑动距离的方法示例
2017/10/26 Javascript
switchery按钮的使用方法
2017/12/18 Javascript
基于vue展开收起动画的示例代码
2018/07/05 Javascript
jQuery实现简单全选框
2020/09/13 jQuery
vue项目实现多语言切换的思路
2020/09/17 Javascript
javascript实现倒计时提示框
2021/03/02 Javascript
python字符串排序方法
2014/08/29 Python
Python连接phoenix的方法示例
2017/09/29 Python
python线程池(threadpool)模块使用笔记详解
2017/11/17 Python
Python3 循环语句(for、while、break、range等)
2017/11/20 Python
python版本单链表实现代码
2018/09/28 Python
PyQt5高级界面控件之QTableWidget的具体使用方法
2020/02/23 Python
TensorFlow2.1.0最新版本安装详细教程
2020/04/08 Python
pyCharm 实现关闭代码检查
2020/06/09 Python
英国建筑用品在线:Building Supplies Online(BSO)
2018/04/30 全球购物
卡骆驰英国官网:Crocs英国
2019/08/22 全球购物
法国一家多品牌成衣精品中/高档商店:Graduate Store
2019/08/28 全球购物
SEPHORA丝芙兰德国官方购物网站:化妆品、护肤品和香水
2020/01/21 全球购物
乡镇庆八一活动方案
2014/02/02 职场文书
机关单位工作失职检讨书
2014/11/20 职场文书
先进基层党组织事迹材料
2014/12/25 职场文书
2015年新农村建设工作总结
2015/05/22 职场文书
大学副班长竞选稿
2015/11/21 职场文书
2016年教师节感言
2015/12/09 职场文书
如何书写公司员工保密协议?
2019/06/27 职场文书