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 相关文章推荐
用JTrackBar实现的模拟苹果风格的滚动条
Aug 06 Javascript
JavaScript Event学习第二章 Event浏览器兼容性
Feb 07 Javascript
用Javascript评估用户输入密码的强度实现代码
Nov 30 Javascript
基于JavaScript自定义构造函数的详解说明
Apr 24 Javascript
jQuery动态地获取系统时间实现代码
May 24 Javascript
javascript删除option选项的多种方法总结
Nov 22 Javascript
javascript结合ajax读取txt文件内容
Dec 05 Javascript
JavaScript简单修改窗口大小的方法
Aug 03 Javascript
javascript伸缩型菜单实现代码
Nov 16 Javascript
Bootstrap导航菜单点击后无法自动添加active的处理方法
Aug 10 Javascript
JS实现横向轮播图(中级版)
Jan 18 Javascript
JavaScript中clientWidth,offsetWidth,scrollWidth的区别
Jan 25 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
批量获取memcache值并按key的顺序返回的实现代码
2011/06/14 PHP
php网上商城购物车设计代码分享
2012/02/15 PHP
PHP实现的简单在线计算器功能示例
2017/08/02 PHP
javascript自定义startWith()和endWith()的两种方法
2013/11/11 Javascript
jquery ajax跨域解决方法(json方式)
2014/02/04 Javascript
全面兼容的javascript时间格式化函数(比较实用)
2014/05/14 Javascript
JavaScript 七大技巧(一)
2015/12/13 Javascript
基于socket.io+express实现多房间聊天
2016/03/17 Javascript
JavaScript中0和""比较引发的问题
2016/05/26 Javascript
从重置input file标签中看jQuery的 .val() 和 .attr(“value”) 区别
2016/06/12 Javascript
JS中的数组方法笔记整理
2016/07/26 Javascript
微信小程序商城项目之购物数量加减(3)
2017/04/17 Javascript
JavaScript ES6中const、let与var的对比详解
2017/06/18 Javascript
JavaScript编程设计模式之构造器模式实例分析
2017/10/25 Javascript
在vue中获取微信支付code及code被占用问题的解决方法
2019/04/16 Javascript
Vue的click事件防抖和节流处理详解
2019/11/13 Javascript
JS实现小米轮播图
2020/09/21 Javascript
python算法学习之桶排序算法实例(分块排序)
2013/12/18 Python
python抓取网页中的图片示例
2014/02/28 Python
简述Python中的进程、线程、协程
2016/03/18 Python
Python基于回溯法子集树模板解决马踏棋盘问题示例
2017/09/11 Python
python 请求服务器的实现代码(http请求和https请求)
2018/05/25 Python
python2.7实现邮件发送功能
2018/12/12 Python
浅谈PyTorch的可重复性问题(如何使实验结果可复现)
2020/02/20 Python
python 基于opencv操作摄像头
2020/12/24 Python
Opencv+Python识别PCB板图片的步骤
2021/01/07 Python
深入解析HTML5的IndexedDB索引数据库
2015/09/14 HTML / CSS
购买200个世界上最好的内衣品牌:Bare Necessities
2017/02/11 全球购物
可爱的童装和鞋子:Fabkids
2019/08/16 全球购物
英国行业制服供应商:Alexandra
2019/09/14 全球购物
房地产财务管理制度
2014/02/02 职场文书
2014民事授权委托书范本
2014/09/29 职场文书
2014年房产经纪人工作总结
2014/12/08 职场文书
考察邀请函范文
2015/01/31 职场文书
MySql学习笔记之事务隔离级别详解
2021/05/12 MySQL
Python使用protobuf序列化和反序列化的实现
2021/05/19 Python