ES6中map、set与数组、对象的对比(详细教程)

这篇文章主要给大家介绍了关于es6学习笔记之map、set与数组、对象对比的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面一起学习学习吧。

前言

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了

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

vue的mixins属性详解

Vue使用mixins实现压缩图片代码

vue2.0模拟锚点的实例

以上就是ES6中map、set与数组、对象的对比(详细教程)的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2750529.html

(0)
上一篇 2025年3月8日 05:37:45
下一篇 2025年3月5日 12:24:18

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • 在Node.js中如何使用DNS模块(详细教程)

    本篇文章给大家详细介绍了node.js中dns模块的相关知识点,以及相关的实例代码做了分享,有兴趣的朋友参考下。 1. DNS 在Node.js中,提供DNS模块,以实现域名查找及域名解析的处理。 在DNS模块中,提供了三个主方法及一系列便…

    编程技术 2025年3月8日
    200
  • 怎样在vue中使用ts(详细教程)

    本篇文章主要介绍了如何在vue中使用ts的示例代码,现在分享给大家,也给大家做个参考。 本文介绍了如何在vue中使用ts的示例代码,分享给大家,具体如下: 注意:此文并不是把vue改为全部替换为ts,而是可以在原来的项目中植入ts文件,目前…

    2025年3月8日 编程技术
    200
  • 在vue中全面解读cli(详细教程)

    vue是一套构建用户界面的渐进式框架。这篇文章主要介绍了vue cli的相关知识,本文给大家及时的非常全面,需要的朋友可以参考下 写在前面: vue是什么,是一套构建用户界面的渐进式框架(官网解释),什么叫渐进式框架呢,简单回答就是主张最少…

    2025年3月8日 编程技术
    200
  • 在vue中bus全局事件中心(详细教程)

    ue-bus 提供了一个全局事件中心,并将其注入每一个组件,你可以像使用内置事件流一样方便的使用全局事件。这篇文章给大家介绍了vue bus全局事件中心简单demo,需要的朋友参考下吧 1.vue-cli搭建好项目之后,使用npm安装vue…

    编程技术 2025年3月8日
    200
  • 在vue-cli下使用vuex(详细教程)

    这篇文章主要介绍了vue-cli下的vuex的简单demo(实现加1减1操作),本文图文并茂给大家介绍的非常详细,具有参考借鉴价值,需要的朋友可以参考下 1.vue-cli搭建好项目之后,使用npm安装vuex  npm install v…

    2025年3月8日 编程技术
    200
  • 在vue中有关cli使用绝对路径引用问题

    这篇文章主要给大家介绍了关于vue cli使用绝对路径引用图片问题的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起看看吧。 前言 Vue是什么,是一套构建用户界面的渐进式…

    编程技术 2025年3月8日
    200
  • 在Thinkjs3中如何使用静态资源目录

    最近在学习thinkjs3,发现有些地方还是有必要整理下的,下面这篇文章主要给大家介绍了关于thinkjs3新手入门之如何使用静态资源目录的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下。 静态资源访问 项目开发时,一般都需…

    2025年3月8日
    200
  • ECharts柱状图(多维):如何展示数据分组和对比

    ECharts柱状图(多维):如何展示数据分组和对比,需要具体代码示例 ECharts是一个基于JavaScript的开源可视化库,用于展示各种类型的数据图表。其中柱状图是一种常见的数据可视化方式,可以用于展示不同组或者分类的数据分组和对比…

    2025年3月7日
    200
  • 学习如何使用jQuery向div元素中添加新元素

    jQuery是一种流行的JavaScript库,它可以帮助开发人员轻松地操作HTML元素、处理事件以及执行动画等操作。在网页开发中,经常会遇到需要在已有的div中添加新的元素的情况。本文将介绍如何使用jQuery来实现在div中添加元素的操…

    2025年3月7日
    200
  • jQuery教程:如何实现按钮点击事件绑定?

    jQuery是一个极其流行的JavaScript库,用于简化对HTML文档的操作和事件处理。其中,按钮点击事件绑定是Web开发中常见的需求之一。本文将详细介绍如何使用jQuery实现按钮点击事件绑定,以及提供具体的代码示例。 1. 引入jQ…

    2025年3月7日
    200

发表回复

登录后才能评论