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的点击链接插入链接内容的代码
Jul 31 Javascript
基于jquery实现的定时显示与隐藏div广告的实现代码
Aug 22 Javascript
javascript实现yield的方法
Nov 06 Javascript
jQuery扁平化风格下拉框美化插件FancySelect使用指南
Feb 10 Javascript
javascript验证邮件地址和MX记录的方法
Jun 16 Javascript
Bootstrap CSS组件之按钮组(btn-group)
Dec 17 Javascript
微信小程序如何获取openid及用户信息
Jan 26 Javascript
Swiper 4.x 使用方法(移动端网站的内容触摸滑动)
May 17 Javascript
javascript 内存模型实例详解
Apr 18 Javascript
实例分析javascript中的异步
Jun 02 Javascript
Vue通过provide inject实现组件通信
Sep 03 Javascript
微信小程序淘宝首页双排图片布局排版代码(推荐)
Oct 29 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制作静态网站的模板框架(四)
2006/10/09 PHP
php中全局变量global的使用演示代码
2011/05/18 PHP
PHP连接access数据库
2015/03/27 PHP
PHP+AJAX实现投票功能的方法
2015/09/28 PHP
浅谈laravel-admin的sortable和orderby使用问题
2019/10/03 PHP
JQuery实现倒计时按钮的实现代码
2012/03/23 Javascript
jQuery源码解读之addClass()方法分析
2015/02/20 Javascript
在JavaScript的正则表达式中使用exec()方法
2015/06/16 Javascript
JavaScript事件 "事件对象"的注意要点
2016/01/14 Javascript
React.js入门实例教程之创建hello world 的5种方式
2016/05/11 Javascript
如何用JavaScript实现动态修改CSS样式表
2016/05/20 Javascript
jQuery 3.0十大新特性最终版发布
2016/07/14 Javascript
微信公众号 客服接口的开发实例详解
2016/09/28 Javascript
前端面试知识点锦集(JavaScript篇)
2016/12/28 Javascript
遍历json获得数据的几种方法小结
2017/01/21 Javascript
angularjs实现猜大小功能
2017/10/23 Javascript
JS重学系列之聊聊new操作符
2019/03/04 Javascript
vue router返回到指定的路由的场景分析
2020/11/10 Javascript
pycharm 使用心得(四)显示行号
2014/06/05 Python
Python3实现将文件树中所有文件和子目录归档到tar压缩文件的方法
2015/05/22 Python
基于Python实现一个简单的银行转账操作
2016/03/06 Python
Python实现复杂对象转JSON的方法示例
2017/06/22 Python
Python操作MySQL数据库的三种方法总结
2018/01/30 Python
Python实现针对给定字符串寻找最长非重复子串的方法
2018/04/21 Python
Python 在字符串中加入变量的实例讲解
2018/05/02 Python
分析经典Python开发工程师面试题
2019/04/08 Python
Python编译为二进制so可执行文件实例
2019/12/23 Python
Python响应对象text属性乱码解决方案
2020/03/31 Python
python3中for循环踩过的坑记录
2020/12/14 Python
python UDF 实现对csv批量md5加密操作
2021/01/01 Python
主键(Primary Key)约束和唯一性(UNIQUE)约束的区别
2013/05/29 面试题
个人找工作求职简历的自我评价
2013/10/20 职场文书
财务会计专业个人求职信范本
2014/01/08 职场文书
初中生自我评价
2014/02/01 职场文书
初中优秀学生评语
2014/12/29 职场文书
redis缓存存储Session原理机制
2021/11/20 Redis