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 相关文章推荐
悄悄用脚本检查你访问过哪些网站的代码
Dec 04 Javascript
SwfUpload在IE10上不出现上传按钮的解决方法
Jun 25 Javascript
基于jquery的网站幻灯片切换效果焦点图代码
Sep 15 Javascript
Jquery+asp.net后台数据传到前台js进行解析的方法
May 11 Javascript
JS实现仿微博可关闭弹出层效果
Sep 21 Javascript
Mvc提交表单的四种方法全程详解
Aug 10 Javascript
Vue实现购物车功能
Apr 27 Javascript
详解微信小程序 相对定位和绝对定位
May 11 Javascript
Angular2学习教程之ng中变更检测问题详解
May 28 Javascript
微信小程序实现YDUI的ScrollTab组件
Feb 02 Javascript
使用Vue开发动态刷新Echarts组件的教程详解
Mar 22 Javascript
JavaScript学习笔记之基于定时器实现图片无缝滚动功能详解
Jan 09 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中利用wsdl创建标准webservice的实现代码
2011/12/07 PHP
Thinkphp中Create方法深入探究
2014/06/16 PHP
PHP数组和explode函数示例总结
2015/05/08 PHP
php表单提交实例讲解
2015/11/12 PHP
Zend Framework实现多文件上传功能实例
2016/03/21 PHP
浅谈PHP面向对象之访问者模式+组合模式
2017/05/22 PHP
PHP递归实现快速排序的方法示例
2017/12/18 PHP
模仿JQuery.extend函数扩展自己对象的js代码
2009/12/09 Javascript
js 实现css风格选择器(压缩后2KB)
2012/01/12 Javascript
关于jQuery新的事件绑定机制on()的使用技巧
2013/04/26 Javascript
开发中可能会用到的jQuery小技巧
2014/03/07 Javascript
Javascript基础知识(三)BOM,DOM总结
2014/09/29 Javascript
AngularJS iframe跨域打开内容时报错误的解决办法
2015/01/26 Javascript
jQuery实现的超链接提示效果示例【附demo源码下载】
2016/09/09 Javascript
基于HTML5+JS实现本地图片裁剪并上传功能
2017/03/24 Javascript
vue.js-div滚动条隐藏但有滚动效果的实现方法
2018/03/03 Javascript
Vue下路由History模式打包后页面空白的解决方法
2018/06/29 Javascript
webstrom Debug 调试vue项目的方法步骤
2018/07/17 Javascript
在微信小程序中保存网络图片
2019/02/12 Javascript
微信小程序使用车牌号输入法的示例代码
2019/08/20 Javascript
在elementui中Notification组件添加点击事件实例
2020/11/11 Javascript
[00:12]DAC2018 no[o]ne亮相SOLO赛 他是否如他的id一样无人可挡?
2018/04/06 DOTA
python计算书页码的统计数字问题实例
2014/09/26 Python
python的pandas工具包,保存.csv文件时不要表头的实例
2018/06/14 Python
浅谈numpy生成数组的零值问题
2018/11/12 Python
python爬取百度贴吧前1000页内容(requests库面向对象思想实现)
2019/08/10 Python
python paramiko远程服务器终端操作过程解析
2019/12/14 Python
python3实现往mysql中插入datetime类型的数据
2020/03/02 Python
记者岗位职责
2014/01/06 职场文书
车辆安全检查制度
2014/01/12 职场文书
陈欧的广告词
2014/03/18 职场文书
派出所所长先进事迹
2014/05/19 职场文书
2015年度考核个人工作总结
2015/10/24 职场文书
撤回我也能看到!教你用Python制作微信防撤回脚本
2021/06/11 Python
Python 正则模块详情
2021/11/02 Python
Python用any()函数检查字符串中的字母以及如何使用all()函数
2022/04/14 Python