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 02 Vue.js
Vue 实现一个简单的鼠标拖拽滚动效果插件
Dec 10 Vue.js
vue 动态生成拓扑图的示例
Jan 03 Vue.js
Vuex实现简单购物车
Jan 10 Vue.js
Vue中ref和$refs的介绍以及使用方法示例
Jan 11 Vue.js
Vue ​v-model相关知识总结
Jan 28 Vue.js
如何使用RoughViz可视化Vue.js中的草绘图表
Jan 30 Vue.js
Vue包大小优化的实现(从1.72M到94K)
Feb 18 Vue.js
vue中h5端打开app(判断是安卓还是苹果)
Feb 26 Vue.js
vue路由实现登录拦截
Mar 24 Vue.js
Vue如何实现组件间通信
May 15 Vue.js
vue打包时去掉所有的console.log
Apr 10 Vue.js
vue响应式原理与双向数据的深入解析
vue实现水波涟漪效果的点击反馈指令
vue 实现上传组件
May 31 #Vue.js
vue基于Teleport实现Modal组件
Vue+Element UI实现概要小弹窗的全过程
vue-cli4.5.x快速搭建项目
Vue CLI中模式与环境变量的深入详解
You might like
zf框架的校验器InArray使用示例
2014/03/13 PHP
PHP实现图片裁剪、添加水印效果代码
2014/10/01 PHP
Yii中表单用法实例详解
2016/01/05 PHP
PHP实现带重试功能的curl连接示例
2016/07/28 PHP
PHP实现深度优先搜索算法(DFS,Depth First Search)详解
2017/09/16 PHP
初识javascript 文档碎片
2010/07/13 Javascript
11个用于提高排版水平的基于jquery的文字效果插件
2012/09/14 Javascript
Linux下使用jq友好的打印JSON技巧分享
2014/11/18 Javascript
node.js中的fs.unlink方法使用说明
2014/12/15 Javascript
JavaScript将当前时间转换成UTC标准时间的方法
2015/04/06 Javascript
VUE 更好的 ajax 上传处理 axios.js实现代码
2017/05/10 Javascript
jquery请求servlet实现ajax异步请求的示例
2017/06/03 jQuery
用React-Native+Mobx做一个迷你水果商城APP(附源码)
2017/12/25 Javascript
Angular 容器部署的方法
2018/04/17 Javascript
Nodejs调用Dll模块的方法
2018/09/17 NodeJs
vue实现密码显示与隐藏按钮的自定义组件功能
2019/04/23 Javascript
微信小程序将页面按钮悬浮固定在底部的实现代码
2020/10/29 Javascript
[00:23]DOTA2群星共贺开放测试 25日无码时代来袭
2013/09/23 DOTA
Python解析nginx日志文件
2015/05/11 Python
pycharm中连接mysql数据库的步骤详解
2017/05/02 Python
python编程羊车门问题代码示例
2017/10/25 Python
Python2.7.10以上pip更新及其他包的安装教程
2018/06/12 Python
python 实现得到当前时间偏移day天后的日期方法
2018/12/31 Python
Python3如何对urllib和urllib2进行重构
2019/11/25 Python
python对一个数向上取整的实例方法
2020/06/18 Python
英国在线自行车店:Merlin Cycles
2018/08/20 全球购物
汽车检测与维修专业求职信
2013/10/30 职场文书
派出所所长先进事迹
2014/05/19 职场文书
高中学校对照检查材料
2014/08/31 职场文书
2015教师年度考核评语
2015/03/25 职场文书
搞笑的婚礼主持词
2015/06/29 职场文书
环保建议书作文300字
2015/09/14 职场文书
2019年大学推荐信
2019/06/24 职场文书
Python基础之Socket通信原理
2021/04/22 Python
分享CSS盒子模型隐藏的几种方式
2022/02/28 HTML / CSS
Go中使用gjson来操作JSON数据的实现
2022/08/14 Golang