ES6

ES5中的数据结构,主要是用Array和Object。在ES6中主要新增了Set和Map数据结构。到目前为止,常用的数据结构有四种Array、Object、Set、Map。下面话不多说了,来一起看看详细的介绍吧。

// 数据结构横向对比,增,查,改,删

1、map和数组对比

  1. {
  2. let map=new Map();
  3. let array=[];
  4.  
  5. /**增**/
  6. map.set('t',1);
  7. array.push({t:1});
  8. console.info('map-array',map,array);
  9.  
  10. /**查**/
  11. let map_exist=map.has('t');
  12. let array_exist=array.find(item=>item.t);
  13. console.info('map-array',map_exist,array_exist);
  14.  
  15. /**改**/
  16. map.set('t',2);
  17. array.forEach(item=>item.t?item.t=2:'');
  18. console.info('map-array-modify',map,array);
  19.  
  20. /**删**/
  21. map.delete('t');
  22. let index=array.findIndex(item=>item.t);
  23. array.splice(index,1);
  24. console.info('map-array-empty',map,array);
  25. }

2、set和数组对比

  1. {
  2. let set=new Set();
  3. let array=[];
  4.  
  5. // 增
  6. set.add({t:1});
  7. array.push({t:1});
  8. console.info('set-array',set,array);
  9.  
  10. // 查
  11. let set_exist=set.has({t:1});
  12. let array_exist=array.find(item=>item.t);
  13. console.info('set-array',set_exist,array_exist);
  14.  
  15. // 改
  16. set.forEach(item=>item.t?item.t=2:'');
  17. array.forEach(item=>item.t?item.t=2:'');
  18. console.info('set-array-modify',set,array);
  19.  
  20. // 删
  21. set.forEach(item=>item.t?set.delete(item):'');
  22. let index=array.findIndex(item=>item.t);
  23. array.splice(index,1);
  24. console.info('set-array-empty',set,array);
  25. }

3、map、set和Object对比

  1. {
  2. let item={t:1};
  3. let map=new Map();
  4. let set=new Set();
  5. let obj={};
  6.  
  7. // 增
  8. map.set('t',1);
  9. set.add(item);
  10. obj['t']=1;
  11. console.info('map-set-obj',obj,map,set);
  12.  
  13. // 查
  14. console.info({
  15. map_exist:map.has('t'),
  16. set_exist:set.has(item),
  17. obj_exist:'t' in obj
  18. })
  19.  
  20. // 改
  21. map.set('t',2);
  22. item.t=2;
  23. obj['t']=2;
  24. console.info('map-set-obj-modify',obj,map,set);
  25.  
  26. // 删除
  27. map.delete('t');
  28. set.delete(item);
  29. delete obj['t'];
  30. console.info('map-set-obj-empty',obj,map,set);
  31. }

总结

通过对比可以发现,能使用map的优先使用,不使用数组,

考虑数据的唯一性,考虑使用set,不使用Objet

以后的开发中可以优先考虑使用map和set了,并且可以放弃数组和object了

原链:https://www.jb51.net/article/135685.htm

ES6学习笔记之map、set与数组、对象的对比的更多相关文章

  1. ES6学习笔记之变量的解构赋值

    变量的解构赋值 ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构. 数组的解构赋值 以前,为变量赋值,只能直接指定值: 1 2 3 var a = 1; var b = 2; ...

  2. JS&ES6学习笔记(持续更新)

    ES6学习笔记(2019.7.29) 目录 ES6学习笔记(2019.7.29) let和const let let 基本用法 let 不存在变量提升 暂时性死区 不允许重复声明 块级作用域 级作用域 ...

  3. ES6学习笔记<四> default、rest、Multi-line Strings

    default 参数默认值 在实际开发 有时需要给一些参数默认值. 在ES6之前一般都这么处理参数默认值 function add(val_1,val_2){ val_1 = val_1 || 10; ...

  4. ES6学习笔记<二>arrow functions 箭头函数、template string、destructuring

    接着上一篇的说. arrow functions 箭头函数 => 更便捷的函数声明 document.getElementById("click_1").onclick = ...

  5. ES6学习笔记之块级作用域

    ES6学习笔记:块级作用域 作用域分类 全局作用域 局部作用域 块级作用域 全局作用域示例 var i=2; for (var i = 0; i < 10; i++) { } console.l ...

  6. es6学习笔记-class之一概念

    前段时间复习了面向对象这一部分,其中提到在es6之前,Javasript是没有类的概念的,只从es6之后出现了类的概念和继承.于是乎,花时间学习一下class. 简介 JavaScript 语言中,生 ...

  7. ES6学习笔记<五> Module的操作——import、export、as

    import export 这两个家伙对应的就是es6自己的 module功能. 我们之前写的Javascript一直都没有模块化的体系,无法将一个庞大的js工程拆分成一个个功能相对独立但相互依赖的小 ...

  8. ES6学习笔记<三> 生成器函数与yield

    为什么要把这个内容拿出来单独做一篇学习笔记? 生成器函数比较重要,相对不是很容易理解,单独做一篇笔记详细聊一聊生成器函数. 标题为什么是生成器函数与yield? 生成器函数类似其他服务器端语音中的接口 ...

  9. ES6学习笔记<一> let const class extends super

    学习参考地址1  学习参考地址2 ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准.因为当前版本的ES6是在2015年发布的,所以又称ECMAScript 2015:也 ...

随机推荐

  1. cas 单点登录 --自定义审计日记@Audit()

    错误信息: org.springframework.webflow.execution.ActionExecutionException: Exception thrown executing [An ...

  2. Redis提供的持久化机制(RDB和AOF)【转载】

    Redis提供的持久化机制    Redis是一种面向“key-value”类型数据的分布式NoSQL数据库系统,具有高性能.持久存储.适应高并发应用场景等优势.它虽然起步较晚,但发展却十分迅速. 近 ...

  3. 对Aspose.Cells Excel文件操作的扩展

    工作中对Excel操作的需求很是常见,今天其他项目组的同事在进行Excel数据导入时,使用Aspose.Cells Excel 遇到了些问题. 刚好闲来不忙,回想自己用过的Excel文件操作,有NPO ...

  4. ELKStack

    ELKStack简介        对于日志来说,最常见的需求就是收集.存储.查询.展示,开源社区正好有相对应的开源项目:logstash(收集).elasticsearch(存储+搜索).kiban ...

  5. HDU-5965 扫雷 模拟+想法

    http://acm.hdu.edu.cn/showproblem.php?pid=5965 (合肥)区域赛签到题...orz 题意:3*n的地图上扫雷(规则就是正常扫雷),中间一排全部没有雷,且全部 ...

  6. MySQL在linux上的二进制安装方法

    建组.建用户: [root@dbking mysql]# groupadd mysql [root@dbking mysql]# useradd -g mysql mysql 解压安装程序: [roo ...

  7. linux UVC and hardware viewer

    至于从哪个版本开始内核支持UVC,官方的话是“Linux 2.6.26 and newer includes the Linux UVC driver natively.” 1.查看摄像头ID: [r ...

  8. Django - 学习目录

    Django 基础 web应用/http协议/web框架 Django简介 Django - 路由层(URLconf) Django - 视图层 Django - 模板层 Django - 模型层 - ...

  9. less语言特性(二) —— 混合

    在 LESS 中我们可以定义一些通用的属性集为一个 class,然后在另一个 class 中去调用这些属性,下面有这样一个 class: 1 2 3 4 .bordered { border-top: ...

  10. 修改dedecms面包屑导航的首页链接关键字

    dedecms面包屑导航默认是"主页>分类>二级分类>",我们知道链接的锚文字对排名有一定影响,这时可以考虑将“主页”改成具体的关键字,那么如何修改dedecms ...