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 相关文章推荐
js获取TreeView控件选中节点的Text和Value值的方法
Nov 24 Javascript
商城常用滚动的焦点图效果代码简单实用
Mar 28 Javascript
IE8中使用javascript动态加载CSS的解决方法
Jun 17 Javascript
AngularJS内置指令
Feb 04 Javascript
基于javascript制作经典传统的拼图游戏
Mar 22 Javascript
JavaScript之WebSocket技术详解
Nov 18 Javascript
jQuery删除/清空指定元素的所有子节点实例代码
Jul 04 jQuery
vue项目中常见问题及解决方案(推荐)
Oct 21 Javascript
vue动态路由:路由参数改变,视图不更新问题的解决
Nov 05 Javascript
微信小程序网络请求实现过程解析
Nov 06 Javascript
vue element-ui中table合计指定列求和实例
Nov 02 Javascript
JavaScript实现瀑布流布局的3种方式
Dec 27 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
xajax写的留言本
2006/11/25 PHP
比较详细PHP生成静态页面教程
2012/01/10 PHP
phpmyadmin3 安装配置图解教程
2012/03/29 PHP
PHP传值到不同页面的三种常见方式及php和html之间传值问题
2015/11/19 PHP
Ajax和PHP正则表达式验证表单及验证码
2016/09/24 PHP
随机显示经典句子或诗歌的javascript脚本
2007/08/04 Javascript
让div层随鼠标移动的实现代码 ie ff
2009/12/18 Javascript
JS等比例缩小图片尺寸的实例
2013/02/27 Javascript
jquery实现的一个简单进度条效果实例
2014/05/12 Javascript
JS实现控制表格行文本对齐的方法
2015/03/30 Javascript
基于JavaScript Array数组方法(新手必看篇)
2016/08/20 Javascript
纯JS代码实现隔行变色鼠标移入高亮
2016/11/23 Javascript
js仿微信语音播放实现思路
2016/12/12 Javascript
Bootstrap CSS组件之按钮组(btn-group)
2016/12/17 Javascript
jQuery幻灯片插件owlcarousel参数说明中文文档
2018/02/27 jQuery
详解在React中跨组件分发状态的三种方法
2018/08/09 Javascript
Javascript 之封装(Package)
2018/09/14 Javascript
利用node 判断打开的是文件 还是 文件夹的实例
2019/06/10 Javascript
小程序角标的添加及绑定购物车数量进行实时更新的实现代码
2020/12/07 Javascript
[57:41]Secret vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
跟老齐学Python之玩转字符串(1)
2014/09/14 Python
python查询mysql中文乱码问题
2014/11/09 Python
python实现2048小游戏
2015/03/30 Python
python中WSGI是什么,Python应用WSGI详解
2017/11/24 Python
Python实现的井字棋(Tic Tac Toe)游戏示例
2018/01/31 Python
Python使用爬虫爬取静态网页图片的方法详解
2018/06/05 Python
Pandas 合并多个Dataframe(merge,concat)的方法
2018/06/08 Python
Python实现文件压缩和解压的示例代码
2020/08/12 Python
一款基于css3的动画按钮代码教程
2014/11/23 HTML / CSS
HTML5新增的标签和属性归纳总结
2018/05/02 HTML / CSS
如何用H5实现一个触屏版的轮播器的实例
2017/01/09 HTML / CSS
美国受欢迎的眼影品牌:BH Cosmetics
2016/10/25 全球购物
托管代码(Managed Code)和非托管代码(Unmanaged Code)有什么区别
2014/09/29 面试题
花店创业计划书范文
2014/02/07 职场文书
初中班主任评语大全
2014/04/24 职场文书
户籍证明模板
2014/09/28 职场文书