编程 Javascript

vue使用map代替Aarry数组循环遍历的方法

Posted in Javascript onApril 30, 2020

需求：根据主键id来找到对应的数组下标

原本的方法是使用for循环遍历该数组，变量 i 就是下标，问题在于，如果有多重for循环，就会导致性能大大下降，数据也容易出错

因此使用map，让数组（原本是list）变成一个map集合（key-value形式），把主键id当做key，下标当做value，一一对应，需要的时候直接使用map.get(key)就可以获取到对应的value

1.在data{}中先定义一个map全局变量

vue使用map代替Aarry数组循环遍历的方法

2.在数据回显或有全部数据的地方把数组list变成map

vue使用map代替Aarry数组循环遍历的方法

该例子数据结构是[｛｝]，所以有2个for循环 item也是[｛｝]结构

这里的item[j].componentId就是一个数组，类似[1,2,3]，下标分别为0，1，2
i 是外部循环的变量，在这里相当于该数组的下标

3.在需要获取下标地方直接使用map.get(key)

vue使用map代替Aarry数组循环遍历的方法

所以key就是item[j].componentId，就可以获取到该id所对应的数组下标了

到此这篇关于vue使用map代替Aarry数组循环遍历的方法的文章就介绍到这了,更多相关vue map代替Aarry数组循环遍历内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木！

vue使用map代替Aarry数组循环遍历的方法

- Author -

ppandpp

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

jquery全选/全不选/反选另一种实现方法(配合原生js)

Apr 07 Javascript

jquery DIV撑大让滚动条滚到最底部代码

Jun 06 Javascript

js基础知识（公有方法、私有方法、特权方法）

Nov 06 Javascript

JavaScript创建对象的方式小结(4种方式)

Dec 17 Javascript

基于jQuery实现仿百度首页选项卡切换效果

May 29 Javascript

jQuery EasyUI基础教程之EasyUI常用组件(推荐)

Jul 15 Javascript

js事件委托和事件代理案例分享

Jul 25 Javascript

vue+canvas实现炫酷时钟效果的倒计时插件（已发布到npm的vue2插件，开箱即用）

Nov 05 Javascript

在Vue中用canvas实现二维码和图片合成海报的方法

Jun 10 Javascript

ES6 Iterator接口和for...of循环用法分析

Jul 31 Javascript

layer iframe 设置关闭按钮的方法

Sep 12 Javascript

vue在线动态切换主题色方案

Mar 26 Javascript

jQuery事件模型默认行为执行顺序及trigger()与 triggerHandler()比较实例分析

Apr 30 #jQuery

JS XMLHttpRequest原理与使用方法深入详解

Apr 30 #Javascript

Vue中通过属性绑定为元素绑定style行内样式的实例代码

Apr 30 #Javascript

详解Vue串联过滤器的使用场景

Apr 30 #Javascript

JS使用正则表达式实现常用的表单验证功能分析

Apr 30 #Javascript

jQuery实现高度灵活的表单验证功能示例【无UI】

Apr 30 #jQuery

Vue发布订阅模式实现过程图解

Apr 30 #Javascript

You might like

第4章数据处理-php数组的处理-郑阿奇

2011/07/04 PHP

PHP中source #N问题的解决方法

2014/01/27 PHP

ThinkPHP5分页paginate代码实例解析

2020/11/10 PHP

Extjs中ComboBoxTree实现的下拉框树效果(自写)

2013/05/28 Javascript

JS中捕获console.log()输出的方法

2015/04/16 Javascript

js数组常见操作及数组与字符串相互转化实例详解

2015/11/10 Javascript

JS原型链怎么理解

2016/06/27 Javascript

微信小程序开发之快递查询功能的实现

2017/01/09 Javascript

requirejs + vue 项目搭建详解

2017/06/16 Javascript

js canvas实现适用于移动端的百分比仪表盘dashboard

2017/07/18 Javascript

详解vue-cli与webpack结合如何处理静态资源

2017/09/19 Javascript

关于axios不能使用Vue.use()浅析

2018/01/12 Javascript

移动端如何用下拉刷新的方式实现上拉加载

2018/12/10 Javascript

React性能优化系列之减少props改变的实现方法

2019/01/17 Javascript

vue项目中使用AES实现密码加密解密（ECB和CBC两种模式）

2019/08/12 Javascript

ES10的13个新特性示例(小结)

2019/09/23 Javascript

element中Steps步骤条和Tabs标签页关联的解决

2020/12/08 Javascript

[01:18]DOTA2超级联赛专访hanci ForLove淘汰感言曝光

2013/06/04 DOTA

python实现图像识别功能

2018/01/29 Python

Python批量修改图片分辨率的实例代码

2019/07/04 Python

Python自动生成代码使用tkinter图形化操作并生成代码框架

2019/09/18 Python

Django REST framework 单元测试实例解析

2019/11/07 Python

Python解析多帧dicom数据详解

2020/01/13 Python

Python 2种方法求某个范围内的所有素数(质数)

2020/01/31 Python

DRF框架API版本管理实现方法解析

2020/08/21 Python

python tkinter的消息框模块(messagebox,simpledialog)

2020/11/07 Python

python中altair可视化库实例用法

2021/01/26 Python

html table呈现个人简历以及单元格宽度失效的问题解决

2021/01/22 HTML / CSS

教师党员思想汇报

2014/01/06 职场文书

商务经理岗位职责

2014/08/03 职场文书

列车乘务员工作不细心检讨书

2014/10/07 职场文书

护士医德考评自我评价

2015/03/03 职场文书

2015大学生入党个人自传

2015/06/26 职场文书

redis限流的实际应用

2021/04/24 Redis

JVM钩子函数的使用场景详解

2021/08/23 Java/Android

如何基于python实现单目三维重建详解

2022/06/25 Python