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


Posted in Vue.js onJune 05, 2021

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.js 相关文章推荐
vue祖孙组件之间的数据传递案例
Dec 07 Vue.js
详解vue-cli项目在IE浏览器打开报错解决方法
Dec 10 Vue.js
vue 在单页面应用里使用二级套嵌路由
Dec 19 Vue.js
vue使用vue-quill-editor富文本编辑器且将图片上传到服务器的功能
Jan 13 Vue.js
如何在vue中使用HTML 5 拖放API
Jan 14 Vue.js
如何在 Vue 表单中处理图片
Jan 26 Vue.js
Vue包大小优化的实现(从1.72M到94K)
Feb 18 Vue.js
vue实现无缝轮播效果(跑马灯)
May 14 Vue.js
Vue过滤器(filter)实现及应用场景详解
Jun 15 Vue.js
vue整合百度地图显示指定地点信息
Apr 06 Vue.js
vue 自定义的组件绑定点击事件
Apr 21 Vue.js
vue-cli3.x配置全局的scss的时候报错问题及解决
Apr 30 Vue.js
vue响应式原理与双向数据的深入解析
vue实现水波涟漪效果的点击反馈指令
vue 实现上传组件
May 31 #Vue.js
vue基于Teleport实现Modal组件
Vue+Element UI实现概要小弹窗的全过程
vue-cli4.5.x快速搭建项目
Vue CLI中模式与环境变量的深入详解
You might like
如何使用PHP计算上一个月的今天
2013/05/23 PHP
php异常处理方法实例汇总
2015/06/24 PHP
PHP convert_cyr_string()函数讲解
2019/02/13 PHP
jQuery温习篇 强大的JQuery选择器
2010/04/24 Javascript
HTML页面滚动时获取离页面顶部的距离2种实现方法
2013/09/05 Javascript
自己封装的javascript事件队列函数版
2014/06/12 Javascript
js点击返回跳转到指定页面实现过程
2020/08/20 Javascript
Jquery和JS获取ul中li标签的实现方法
2016/06/02 Javascript
整理一下常见的IE错误
2016/11/18 Javascript
AngularJS中isolate scope的用法分析
2016/11/22 Javascript
js指定步长实现单方向匀速运动
2017/07/17 Javascript
基于jQuery选择器之表单对象属性筛选选择器的实例
2017/09/19 jQuery
微信开发之微信jssdk录音功能开发示例
2018/10/22 Javascript
通过JS运行机制的角度说说作用域
2019/03/12 Javascript
vue 详情跳转至列表页实现列表页缓存
2019/03/27 Javascript
js实现鼠标点击飘爱心效果
2020/08/19 Javascript
python调用短信猫控件实现发短信功能实例
2014/07/04 Python
Python与Redis的连接教程
2015/04/22 Python
Swift 3.0在集合类数据结构上的一些新变化总结
2016/07/11 Python
Python内置函数OCT详解
2016/11/09 Python
解决uWSGI的编码问题详解
2017/03/24 Python
mac下给python3安装requests库和scrapy库的实例
2018/06/13 Python
详解Python下Flask-ApScheduler快速指南
2018/11/04 Python
利用python实现简易版的贪吃蛇游戏(面向python小白)
2018/12/30 Python
python交换两个变量的值方法
2019/01/12 Python
彻底理解Python中的yield关键字
2019/04/01 Python
python同义词替换的实现(jieba分词)
2020/01/21 Python
Python如何对齐字符串
2020/07/30 Python
python爬虫中采集中遇到的问题整理
2020/11/27 Python
python实现图像随机裁剪的示例代码
2020/12/10 Python
详解Python之Scrapy爬虫教程NBA球员数据存放到Mysql数据库
2021/01/24 Python
使用HTML5 Canvas为图片填充颜色和纹理的教程
2016/03/21 HTML / CSS
印度首选时尚目的地:Reliance Trends
2018/01/17 全球购物
酒店爱岗敬业演讲稿
2014/09/02 职场文书
SQL SERVER存储过程用法详解
2022/02/24 SQL Server
浅谈Redis缓冲区机制
2022/06/05 Redis