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

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

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

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

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

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

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

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

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

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

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

赞 (0)

相关推荐

  • 解决vuejs 使用value in list 循环遍历数组出现警告的问题

    在使用vuejs遍历数组的时候,使用in语句形式,会有一个警告的提示: 警告很明显说是少了v-bind:key,所以添加一个就ok了,看如下文件: /* eslint-disable */ <template> <div class="hello" style="background: fuchsia"> <ul> <li v-for="(value,key,index) in object" v-bin

  • 浅析vue中常见循环遍历指令的使用 v-for

    vue中循环遍历使用的指令是v-for 1.v-for遍历数组 (1)value in arr 遍历数组中的元素 (2)(value,index) in arr 遍历数组中的元素和数组下标 运行代码: <body> <div class="box"> <ul> <li v-for="value in arr">{{value}}</li><br> <li v-for="(valu

  • 解决vue v-for 遍历循环时key值报错的问题

    一 .问题如下: [Vue warn] Avoid using non-primitive value as key, use string/number value instead. non-primitive表示的是对象 这里的[Vue warn]是指不要用对象或是数组作为key,用string或number作为key. :key相当于是索引的作用,提高循环性能,如果循环量较小,不写也可以的. 以上这篇解决vue v-for 遍历循环时key值报错的问题就是小编分享给大家的全部内容了,希望能

  • vue2.0 循环遍历加载不同图片的方法

    demo: <div v-for="item in temps" :key="item.id"> <div class="contract-item"> <img :src="item.imgUrl"> </div> </div> 引入图片,注意路径: import con1 from "@/assets/img/con01.png"; impor

  • vue改变循环遍历后的数据实例

    废话不多说了,直接上代码吧! <dd class="clearfix" v-for="(item,index) in tableDataList" :class="index%2 != 0 ? 'dd-bg' : ''"> <div class="indexItem indexItem3 tal" title=""><span>{{item.status}}{{count

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

    需求:根据主键id来找到对应的数组下标 原本的方法是使用for循环遍历该数组,变量 i 就是下标,问题在于,如果有多重for循环,就会导致性能大大下降,数据也容易出错 因此使用map,让数组(原本是list)变成一个map集合(key-value形式),把主键id当做key,下标当做value,一一对应,需要的时候直接使用map.get(key)就可以获取到对应的value 1.在data{}中先定义一个map全局变量 2.在数据回显或有全部数据的地方把数组list变成map 该例子数据结构是[

  • Javascript数组循环遍历之forEach详解

    1.js 数组循环遍历. 数组循环变量,最先想到的就是 for(var i=0;i<count;i++)这样的方式了. 除此之外,也可以使用较简便的forEach 方式 2.forEach函数. Firefox 和Chrome 的Array 类型都有forEach的函数.使用如下: <!--Add by oscar999--> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> &l

  • php对关联数组循环遍历的实现方法

    本文实例讲述了php对关联数组循环遍历的实现方法.分享给大家供大家参考.具体分析如下: php对于类似 $age = array("zhangshan"=>14,"lisi"=>15,"sharejs"=>16); 这样的数组可以通过foreach的方法进行遍历,下面是详细的代码: $age = array("zhangshan"=>14,"lisi"=>15,"sh

  • linux shell 中数组的定义和for循环遍历的方法

    linux shell中的语法和普通编程语言 c/c++ java 的不太一样,平时用的不多,所以总是记不住,写脚本才会去查怎么用. 今天突然被问到数组怎么去遍历.平时写shell脚本也经常遍历数组,但是一下没答上来,被鄙视了. 所以平时学习还是好好总结吧,不能每次都问度娘谷爷.IT 知识体系较为庞大,细节的东西也太多,平时遇到问题应该的多总结记笔记. linux 中定义一个数据的语法为: variable=(arg1 arg2 arg3 ....) 中间用空格分开.数组的下标从0开始. 1 获

  • jquery中object对象循环遍历的方法

    一个朋友问对象如何转为数组,当我问他为啥要转得时候,他告诉我,数组可以用js循环遍历,而对象则不可以.其实呢,对象同样可以循环遍历的啊.不用转换也可以循环!说明你对js或者jquery的某些操作不是很熟练!在这里我简单介绍一下! 案例 我们看如下对象: var data={ 张三:69, 李四:72, 王五:90, 二麻子:88, 前端博客:100, haorooms : 98, 王大壮:99 } 假如上面是后台返回的一个key,一个是value的对象(这种对象相信大家经常遇到吧!),现在要把这

  • js 实现获取name 相同的页面元素并循环遍历的方法

    实例如下: <input type="hidden" name="blues" value="蓝色浏阳河之最"> <input type="hidden" name="blues" value="蓝色浏阳河之亲"> <input type="hidden" name="blues" value="蓝色浏阳河之

  • js数组循环遍历数组内所有元素的方法

    例,for(){}遍历数组 复制代码 代码如下: <script type="text/javascript"> <!--var arr = new Array(13.5,3,4,5,6);for(var i=0;i<arr.length;i++){ arr[i] = arr[i]/2.0;}alert(arr); //--> </script> 例,for in循环遍历数组 复制代码 代码如下: <html><body>

  • vue简单的二维数组循环嵌套方式

    vue简单的二维数组循环嵌套方式

    目录 二维数组循环嵌套方式 vue循环数组.循环嵌套数组v-for 利用Vue循环输出标签 前端页面输出循环嵌套数组 二维数组循环嵌套方式 <div class="box">   <div class="color">      <div>蓝色/尺码</div>   </div>   //这是简单的布局 .box{     border: 1px solid red;     display: flex;

  • 关于Vue不能监听(watch)数组变化的解决方法

    目录 一.vue监听数组 二.vue无法监听数组变化的情况 一.vue监听数组 vue实际上可以监听数组变化,比如 data () { return { watchArr: [], }; }, watchArr (newVal) { console.log('监听:' + newVal); }, created () { setTimeout(() => { this.watchArr = [1, 2, 3]; }, 1000); }, 在比如使用splice(0,2,3)从数组下标0删除两个元

  • JS中数组常用的循环遍历你会几种

    JS中数组常用的循环遍历你会几种

    前言 数组和对象作为一个最基础数据结构,在各种编程语言中都充当着至关重要的角色,你很难想象没有数组和对象的编程语言会是什么模样,特别是 JS ,弱类型语言,非常灵活.本文带你了解常用数组遍历.对象遍历的使用对比以及注意事项. 数组遍历 随着 JS 的不断发展,截至 ES7 规范已经有十多种遍历方法.下面按照功能类似的方法为一组,来介绍数组的常用遍历方法. for.forEach.for ...of const list = [1, 2, 3, 4, 5, 6, 7, 8,, 10, 11]; f

随机推荐