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 相关文章推荐
jQuery中获取Radio元素值的方法
Jul 02 Javascript
JavaScript1.6数组新特性介绍以及JQuery的几个工具方法
Dec 06 Javascript
js几秒以后倒计时跳转示例
Dec 26 Javascript
jQuery实现表格行上移下移和置顶的方法
May 22 Javascript
介绍一个简单的JavaScript类框架
Jun 24 Javascript
基于JavaScript制作霓虹灯文字 代码 特效
Sep 01 Javascript
直接拿来用的15个jQuery代码片段
Sep 23 Javascript
使用vue.js编写蓝色拼图小游戏
Mar 17 Javascript
Vue 源码分析之 Observer实现过程
Mar 29 Javascript
在vue项目中引入高德地图及其UI组件的方法
Sep 04 Javascript
记一次vue-webpack项目优化实践详解
Feb 17 Javascript
vue大型项目之分模块运行/打包的实现
Sep 21 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
基于Linux调试工具strace与gdb的常用命令总结
2013/06/03 PHP
PHP CURL 内存泄露问题解决方法
2015/02/12 PHP
PHP实现判断数组是一维、二维或几维的方法
2017/02/06 PHP
php注册系统和使用Xajax即时验证用户名是否被占用
2017/08/31 PHP
javascript高级学习笔记整理
2011/08/14 Javascript
javascript 常用功能总结
2012/03/18 Javascript
jQuery中ajax的使用与缓存问题的解决方法
2013/12/19 Javascript
使用AngularJS来实现HTML页面嵌套的方法
2015/06/17 Javascript
jQuery添加和删除输入文本框标签代码
2016/05/20 Javascript
使用nodejs中httpProxy代理时候出现404异常的解决方法
2016/08/15 NodeJs
浅谈键盘上回车按钮的js触发事件
2017/02/13 Javascript
angular中的http拦截器Interceptors的实现
2017/02/21 Javascript
利用JQuery操作iframe父页面、子页面的元素和方法汇总
2017/09/10 jQuery
vue-router相关基础知识及工作原理
2018/03/16 Javascript
karma+webpack搭建vue单元测试环境的方法示例
2018/05/24 Javascript
vue实现全屏滚动效果(非fullpage.js)
2020/03/07 Javascript
在实例中重学JavaScript事件循环
2020/12/03 Javascript
vue项目如何监听localStorage或sessionStorage的变化
2021/01/04 Vue.js
python获取beautifulphoto随机某图片代码实例
2013/12/18 Python
深入学习Python中的装饰器使用
2016/06/20 Python
tensorflow识别自己手写数字
2018/03/14 Python
VSCode下配置python调试运行环境的方法
2018/04/06 Python
python直接获取API传递回来的参数方法
2018/12/17 Python
python datetime处理时间小结
2020/04/16 Python
python爬虫用mongodb的理由
2020/07/28 Python
python实现sm2和sm4国密(国家商用密码)算法的示例
2020/09/26 Python
django使用多个数据库的方法实例
2021/03/04 Python
video结合canvas实现视频在线截图功能
2018/06/25 HTML / CSS
HTML5 Blob对象的具体使用
2020/05/22 HTML / CSS
警示教育活动总结
2014/05/05 职场文书
民主评议党员工作总结
2014/10/20 职场文书
超强台风观后感
2015/06/09 职场文书
java调用Restful接口的三种方法
2021/08/23 Java/Android
springboot中rabbitmq实现消息可靠性机制详解
2021/09/25 Java/Android
一文弄懂MySQL中redo log与binlog的区别
2022/02/15 MySQL
利用Python多线程实现图片下载器
2022/03/25 Python