这篇文章给大家分享的是Vue中遍历数组的方法怎样写，有何区别吗。小编觉得挺实用的，因此分享给大家做个参考，文中的介绍得很详细，而要易于理解和学习，有需要的朋友可以参考，接下来就跟随小编一起了解看看吧。

Vue foreach数组与js中遍历数组的写法

场景

Vue中使用Axios发送get或者post请求，发送请求时需要在js中

对请求参数进行遍历并处理。

接收响应时需要对响应结果进行遍历和处理。

注意区分在vue和js中foreach数组的区别。

实现

在js中遍历数组

//定义班次详细数组
  var bcglxiangxiList = new Array();
  //定义班次详细对象
  var bcxiangxi  = {};
  //循环传递的参数
  bcglXiangXiListParam.forEach(element => {
    bcxiangxi.xh = element.xh;
    bcxiangxi.bcbh = data.bcbh;
    bcxiangxi.dkkssj = element.sjfw[0];
    bcxiangxi.dkjssj = element.sjfw[1];
    bcxiangxi.ts = element.ts;
    bcxiangxi.dkdd = element.dkdd;
    bcxiangxi.zxjxljsj = element.jxsjfw[0];
    bcxiangxi.zdjxljsj = element.jxsjfw[1];
    //将班次详细对象存进班次详细数组
    bcglxiangxiList.push(bcxiangxi);
  });

在vue中遍历数组

 var bcglxiangxiList = new Array();
        var bcxiangxi = {};
        debugger;
        if (
          response.data.bcglXiangXiList != null &&
          response.data.bcglXiangXiList.length > 0
        ) {
          console.log(response.data.bcglXiangXiList);
          response.data.bcglXiangXiList.forEach((item, index) => {
            console.log(item);
            bcxiangxi.xh = item.xh;
            bcxiangxi.bcbh = item.bcbh;
            //debugger
            bcxiangxi.sjfw = new Array();
            bcxiangxi.sjfw[0] = item.dkkssj;
            bcxiangxi.sjfw[1] = item.dkjssj;
            bcxiangxi.ts = item.ts;
            bcxiangxi.dkdd = item.dkdd;
            bcxiangxi.jxsjfw = new Array();
            bcxiangxi.jxsjfw[0] = item.zxjxljsj;
            bcxiangxi.jxsjfw[1] = item.zdjxljsj;
            bcglxiangxiList.push(bcxiangxi);
          });
        }

可以看到遍历的方式是一样的，在js中一样可以用两个参数的遍历方式

  //定义班次详细数组
  var bcglxiangxiList = new Array();
  //定义班次详细对象
  var bcxiangxi  = {};
  //循环传递的参数
  bcglXiangXiListParam.forEach((element,index) => {
    bcxiangxi.xh = element.xh;
    bcxiangxi.bcbh = data.bcbh;
    bcxiangxi.dkkssj = element.sjfw[0];
    bcxiangxi.dkjssj = element.sjfw[1];
    bcxiangxi.ts = element.ts;
    bcxiangxi.dkdd = element.dkdd;
    bcxiangxi.zxjxljsj = element.jxsjfw[0];
    bcxiangxi.zdjxljsj = element.jxsjfw[1];
    //将班次详细对象存进班次详细数组
    bcglxiangxiList.push(bcxiangxi);
  });

vue forEach循环使用

//data为集合 
data.forEach(function(item, index) {
            //item 就是当日按循环到的对象
            //index是循环的索引，从0开始
})

关于“Vue中遍历数组的方法怎样写，有何区别吗”就介绍到这了，如果大家觉得不错可以参考了解看看，如果想要了解更多，欢迎关注群英网络，小编每天都会为大家更新不同的知识。

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• js碰撞效果怎样实现?js碰撞测试代码详解

  怎样使用js实现碰撞检测？碰撞效果在很多游戏中都会使用到，下面给大家分享一个js实现碰撞的简单测试。当小物体碰撞大物体，大物体颜色改变，效果如下。

• 通过typescript类型实现TwoSum的过程是什么

  使用typescript类型实现ThreeSum 目录 前言 思路整理 实现TwoSum 实现减法 元祖中是否包含差值 递归元组 测试 实现ThreeSum 实现排序 实现ThreeSum 测试 前言 本文执行环境typescript,版本4.7.4 不使用typescript的计算能力,通过类型来实现ThreeSum 思路整理 实现ThreeSum之前我们先降低下难度,实现TwoSum,因为TwoSum可以作为ThreeSum的基础泛型 TwoSum需要准备什么呢? 递归元组,模拟for循环 减法,递归过程中求出差值 对每一项差值判断是否存在

• JS中数组的遍历、判断、筛选处理怎么实现

  目录前言一、forEach()，用于遍历数组，无返回值二、map()，用于遍历数组，返回处理之后的新数组三、every()，用于判断数组中的每一项元素是否都满足条件，返回一个布尔值四、some()，用于判断数组中的是否存在满足条件的元素，返回一个布尔值五、filter()，用于筛选数组中满足条件的元素，返回一个筛选后的

• vue中v-for循环对象及其键和值是怎样的

  这篇文章主要介绍了 vue中v-for 循环对象中的属性，文章围绕v-for 循环对象的相关资料展开详细内容,需要的朋友可以参考一下，希望对大家有所帮助

• 如何用JS实现仿百度新闻的导航栏，代码是什么

  这篇文章主要为大家详细介绍了JS实现百度新闻导航栏效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下