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类中获取外部函数名的方法
Aug 19 Javascript
Javascript对象中关于setTimeout和setInterval的this介绍
Jul 21 Javascript
javascript实现多级联动下拉菜单的方法
Feb 06 Javascript
Bootstrap每天必学之按钮(Button)插件
Apr 25 Javascript
canvas实现十二星座星空图
Feb 14 Javascript
Vue.js中extend选项和delimiters选项的比较
Jul 17 Javascript
简单谈谈CommonsChunkPlugin抽取公共模块
Dec 31 Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(上)
Apr 18 Javascript
详解babel升级到7.X采坑总结
May 12 Javascript
使用 js 简单的实现 bind、call 、aplly代码实例
Sep 07 Javascript
使用layer弹窗提交表单时判断表单是否输入为空的例子
Sep 26 Javascript
uniapp开发小程序实现滑动页面控制元素的显示和隐藏效果
Dec 10 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 启动时报错的简单解决方法
2014/01/27 PHP
php递归json类实例
2014/12/02 PHP
PHP中strpos、strstr和stripos、stristr函数分析
2016/06/11 PHP
php微信公众号开发模式详解
2016/11/28 PHP
删除PHP数组中头部、尾部、任意元素的实现代码
2017/04/10 PHP
JavaScript 应用类库代码
2008/06/02 Javascript
利用Keydown事件阻止用户输入实现代码
2014/03/11 Javascript
Node.js中require的工作原理浅析
2014/06/24 Javascript
DOM事件阶段以及事件捕获与事件冒泡先后执行顺序(图文详解)
2015/08/18 Javascript
jQuery弹出层后禁用底部滚动条(移动端关闭回到原位置)
2016/08/29 Javascript
AngularJS前端页面操作之用户修改密码功能示例
2017/03/27 Javascript
vue.js中mint-ui框架的使用方法
2017/05/12 Javascript
小程序转发探索示例
2019/02/19 Javascript
axios+Vue实现上传文件显示进度功能
2019/04/14 Javascript
微信小程序云开发使用方法新手初体验
2019/05/16 Javascript
vue 使用高德地图vue-amap组件过程解析
2019/09/07 Javascript
[17:45]DOTA2 HEROES教学视频教你分分钟做大人-军团指挥官
2014/06/11 DOTA
Python实现matplotlib显示中文的方法详解
2018/02/06 Python
python Flask 装饰器顺序问题解决
2018/08/08 Python
基于python中theano库的线性回归
2018/08/31 Python
使用python批量读取word文档并整理关键信息到excel表格的实例
2018/11/07 Python
python训练数据时打乱训练数据与标签的两种方法小结
2018/11/08 Python
对python打乱数据集中X,y标签对的方法详解
2018/12/14 Python
python opencv对图像进行旋转且不裁剪图片的实现方法
2019/07/09 Python
Python中注释(多行注释和单行注释)的用法实例
2019/08/28 Python
全球知名的婚恋交友网站:Match.com
2017/01/05 全球购物
计算机专业自我鉴定
2013/10/15 职场文书
工程管理专业个人求职信范文
2013/12/07 职场文书
高三历史教学反思
2014/01/09 职场文书
旅游网创业计划书
2014/01/31 职场文书
销售员岗位职责
2014/06/09 职场文书
2014年招生工作总结
2014/11/26 职场文书
世界遗产的导游词
2015/02/13 职场文书
暖春观后感
2015/06/08 职场文书
八月迷情观后感
2015/06/11 职场文书
2019关于垃圾分类处理的调查报告
2019/12/26 职场文书