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 相关文章推荐
DIV外区域Click后关闭DIV的实现代码
Dec 21 Javascript
document节点对象的获取方式示例介绍
Dec 24 Javascript
JavaScript在IE和FF下的兼容性问题
May 19 Javascript
js获取内联样式的方法
Jan 27 Javascript
JavaScript实现级联菜单的方法
Jun 29 Javascript
用svg制作富有动态的tooltip
Jul 17 Javascript
jQuery easyui的validatebox校验规则扩展及easyui校验框validatebox用法
Jan 18 Javascript
jQuery中on方法使用注意事项详解
Feb 15 Javascript
JS实现求数组起始项到终止项之和的方法【基于数组扩展函数】
Jun 13 Javascript
详解React native全局变量的使用(跨组件的通信)
Sep 07 Javascript
微信小程序将字符串生成二维码图片的操作方法
Jul 17 Javascript
微信小程序onLaunch异步,首页onLoad先执行?
Sep 20 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
apache+mysql+php+ssl服务器之完全安装攻略
2006/09/05 PHP
10条PHP编程习惯助你找工作
2008/09/29 PHP
php提示Call-time pass-by-reference has been deprecated in的解决方法[已测]
2012/05/06 PHP
PHP获取Exif缩略图的方法
2015/07/13 PHP
php如何执行非缓冲查询API
2016/07/22 PHP
php读取本地json文件的实例
2018/03/07 PHP
js getBoundingClientRect() 来获取页面元素的位置
2010/11/25 Javascript
JavaScript中访问节点对象的方法有哪些如何使用
2013/09/24 Javascript
Javascript中浮点数相乘的一个解决方法
2014/06/03 Javascript
js使用for循环及if语句判断多个一样的name
2014/09/09 Javascript
jQuery在ie6下无法设置select选中的解决方法详解
2016/09/20 Javascript
NodeJS中的MongoDB快速入门详细教程
2016/11/11 NodeJs
文件上传,iframe跨域数据提交的实现
2016/11/18 Javascript
nodejs学习笔记之路由
2017/03/27 NodeJs
Layui table 组件的使用之初始化加载数据、数据刷新表格、传参数
2017/09/11 Javascript
JavaScript实现点击出现图片并统计点击次数功能示例
2018/07/23 Javascript
小程序实现单选多选功能
2018/11/04 Javascript
Windows上node.js的多版本管理工具用法实例分析
2019/11/06 Javascript
微信小程序:报错(in promise) MiniProgramError
2020/10/30 Javascript
Python实现公历(阳历)转农历(阴历)的方法示例
2017/08/22 Python
Python编程实现粒子群算法(PSO)详解
2017/11/13 Python
一个月入门Python爬虫学习,轻松爬取大规模数据
2018/01/03 Python
python MysqlDb模块安装及其使用详解
2018/02/23 Python
python获取当前目录路径和上级路径的实例
2018/04/26 Python
Python中的单行、多行、中文注释方法
2018/07/19 Python
GitHub 热门:Python 算法大全,Star 超过 2 万
2019/04/29 Python
使用matplotlib绘制图例标签中带有公式的图
2019/12/13 Python
opencv python在视屏上截图功能的实现
2020/03/05 Python
如何卸载python插件
2020/07/08 Python
测量实习生自我鉴定
2013/09/19 职场文书
酒店服务与管理毕业生求职信
2013/11/02 职场文书
学生实习介绍信
2014/01/15 职场文书
党员干部承诺书范文
2014/03/25 职场文书
人事任命通知
2015/04/20 职场文书
家装电话营销开场白
2015/05/29 职场文书
初中历史教学反思
2016/02/19 职场文书