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 Calender控件使用详解
Jan 05 Javascript
实例详解JSON数据格式及json格式数据域字符串相互转换
Jan 07 Javascript
jQuery实现简单滚动动画效果
Apr 07 Javascript
详解Angular中的自定义服务Service、Provider以及Factory
Apr 22 Javascript
Node.js  事件循环详解及实例
Aug 06 Javascript
分享5个好用的javascript文件上传插件
Sep 16 Javascript
详解nuxt路由鉴权(express模板)
Nov 21 Javascript
微信小程序实现搜索功能并跳转搜索结果页面
May 18 Javascript
js 使用ajax设置和获取自定义header信息的方法小结
Mar 12 Javascript
在Vue中使用Echarts实例图的方法实例
Oct 10 Javascript
Vue中使用Echarts仪表盘展示实时数据的实现
Nov 01 Javascript
详解Node.js如何处理ES6模块
May 15 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
Yii学习总结之数据访问对象 (DAO)
2015/02/22 PHP
YII框架http缓存操作示例
2019/04/29 PHP
Jquery 组合form元素为json格式,asp.net反序列化
2009/07/09 Javascript
初窥JQuery(二)事件机制(2)
2010/12/06 Javascript
JQuery 文本框回车跳到下一个文本框示例代码
2013/08/30 Javascript
IE 下Enter提交表单存在重复提交问题的解决方法
2014/05/04 Javascript
AngularJS入门教程之学习环境搭建
2014/12/06 Javascript
JQuery给网页更换皮肤的方法
2015/05/30 Javascript
JavaScript中的条件判断语句使用详解
2015/06/03 Javascript
jQuery拖动布局其结果保存到数据库
2015/10/09 Javascript
ionic js 模型 $ionicModal 可以遮住用户主界面的内容框
2016/06/06 Javascript
遍历js中对象的属性和值的实例
2016/11/21 Javascript
jQuery自定义多选下拉框效果
2017/06/19 jQuery
jq源码解析之绑在$,jQuery上面的方法(实例讲解)
2017/10/13 jQuery
初探js和简单隐藏效果的实例
2017/11/23 Javascript
JavaScript实现职责链模式概述
2018/01/25 Javascript
JS装饰器函数用法总结
2018/04/21 Javascript
python批量生成本地ip地址的方法
2015/03/23 Python
Pycharm编辑器技巧之自动导入模块详解
2017/07/18 Python
浅谈django rest jwt vue 跨域问题
2018/10/26 Python
Python numpy.array()生成相同元素数组的示例
2018/11/12 Python
python3.6中@property装饰器的使用方法示例
2019/08/17 Python
django删除表重建的实现方法
2019/08/28 Python
Django继承自带user表并重写的例子
2019/11/18 Python
tensorflow实现对张量数据的切片操作方式
2020/01/19 Python
Python 实现加密过的PDF文件转WORD格式
2020/02/04 Python
如何在Python 游戏中模拟引力
2020/03/27 Python
python实现逢七拍腿小游戏的思路详解
2020/05/26 Python
利用CSS3实现单选框动画特效示例代码
2016/09/26 HTML / CSS
2014年质检工作总结
2014/11/26 职场文书
爱晚亭导游词
2015/02/09 职场文书
2015年干部教育培训工作总结
2015/05/15 职场文书
装修公司管理制度
2015/08/05 职场文书
2017年大学生寒假社会实践活动总结
2016/04/06 职场文书
Python django中如何使用restful框架
2021/06/23 Python
uniapp开发打包多端应用完整方法指南
2022/12/24 Javascript