前端开发:Vue中forEach() 的使用

更新日期: 2021-05-30阅读: 1.2k标签: 循环

前端开发中,经常会遇到一些通过遍历循环来获取想要的内容的情形,而且这种情形在开发中无所不在,那么本篇博文就来分享一个比较常用又经典的知识点:forEach() 的使用。

forEach() 是前端开发中操作数组的一种方法,主要功能是遍历数组,其实就是 for 循环的升级版,该语句需要有一个回调函数作为参数。回调函数的形参依次为:

1、value:遍历数组的内容;
2、index:对应数组的索引,
3、array:数组自身。

vue 项目中,标签里的循环使用 v-for,方法里面的循环使用 forEach。


一、forEach() 使用原理

forEach() 方法主要是用于调用数组的每个元素,并将元素传递给回调函数。需要注意的是: forEach() 方法对于空数组是不会执行回调函数的。

forEach:即 Array.prototype.forEach,只有数组才有的方法,相当于 for 循环遍历数组。用法:arr.forEach(function(item,index,array){...}),其中回调函数有 3 个参数,item 为当前遍历到的元素,index 为当前遍历到的元素下标,array 为数组本身。forEach 方法不会跳过 null 和 undefined 元素。比如数组[1,undefine,null,,2]中的四个元素都将被遍历到,注意与 map 的区别。


二、forEach() 语法

array.forEach(function(currentValue, index, array), thisValue)

例子:

array.forEach(function(item,index,array){ ... })


三、forEach() 其他相关内容

1、forEach()的 continue 和 break:

forEach() 自身不支持 continue 和 break 语句的,但是可以通过 some 和 every 来实现。

2、forEach()与 map 的区别:

forEach()没有返回值,性质上等同于 for 循环,对每一项都执行 function 函数。即 map 是返回一个新数组,原数组不变,而 forEach 是改变原数组。

3、forEach()与 for 循环的对比:

for 循环步骤多比较复杂,forEach 循环比较简单好用,不易出错。

4、forEach()例子:

实例一:

let array = [1, 2, 3, 4, 5, 6, 7];
array.forEach(function (item, index) {
    console.log(item); //输出数组的每一个元素
});

实例二:

var array=[1, 2, 3, 4, 5];
array.forEach(function(item, index, array){
    array[index]=4 * item;
});
console.log(array);    //输出结果:修改了原数组元素,为每个元素都乘以4

实例三:

<el-checkbox v-for="(item) in searchContent" :label="item.id" :key="item.id">
<span>{{item.value}}{{item.checked}}</span>
</el-checkbox>
  handle(index, row) {
        this.selectedCheck=[];
        let a = this;
        this.jurisdiction = true;
        this.roleId = row.id;
        this.$http.get(“/user/resources", {
            params: {userId: this.userId}
          }).then((response) => {
          a.searchContent = response.body;
          a.searchContent.forEach(function (b) {
            if(b[‘checked']){
              a.selectedCheck.push(b.id);
            }
          })
        })

 

实例四:

var userList = new Array();
var data = {};
if (response.data.userList != null && response.data.userList.length > 0) {
response.data.userList.forEach((item, index) => {
data.a = item.a;
data.b = item.b;
data.arr1 = new Array();
data.arr1[0] = item.c;
data.arr1[1] = item.d;
data.e = item.e;
data.f = item.f;
data.arr2 = new Array();
data.arr2[0] = item.j;
data.arr2[1] = item.h;
userList.push(data);
});
}


实例五:

searchDept(keyWord, callback) {
if (keyWord) {
this.$service.data.searchDepts({
data: {
full_name: keyWord
}
})
.then(r => {
if (r.Success) {
let arr = [];
r.Data.Result.forEach(element => {
arr.push({
id: element.work_id,
value: element.full_name,
dept: element
});
});
callback(arr);
}
});
}
},

以上就是本章全部内容,欢迎关注三掌柜的微信公众号“iOS开发by三掌柜”,三掌柜的新浪微博“三掌柜666”,欢迎关注!

链接: https://www.fly63.com/article/detial/10372

跳出 forEach

使用for...in遍历对象时,会遍历原型链上的可枚举属性,这可能会导致一些意想不到的问题。所以你一定收到过这样的建议,使用数组的forEach来代替for...in循环。本文给大家总结了5种在forEach中跳出循环的变通之法

JavaScript循环下的async/await

在进行业务开发的过程中,使用了数组的高级函数map,同时使用了ES6语法async/await,发现在map循环下任务是异步执行的,并不符合预期。Array的循环方法map、forEach、filter、reduce、some、every等是并行迭代,可以理解为async/await的效果是无效的

如何中断forEach循环

在使用for循环的时候可以使用break 或者return语句来结束for循环(return直接结束函数),但是如果使用forEach循环如何跳出循环呢?首先尝试一使用return语句----木有效果

用于JavaScript中的循环和同时循环

如果您需要重复大量的代码数百次,这会变得非常笨拙。而且,它也不是很有用。例如,如果希望它重复X次呢?这就是循环的用武之地。次数通常由变量决定,但也可以由实际数字决定。

Js中循环执行

循环:就是一遍又一遍执行相同或者相似的代码,循环的两个要素:循环体:重复执行的代码;循环条件:控制循环的次数

为啥要放弃for循环?

创建一个新的数组,新的数组中的元素是通过检查指定数组中符合条件的元素;注意:1. filter()不会对空数组进行检测;2. filter()不会改变源是数组;

解决使用Vue-Router出现无限循环问题

我在项目里面用到了的是全局守卫,beforeEach,方便管理 不过遇到了一个问题,就是在beforeEach()中设置好判断条件后出现了无限循环的问题 当时的代码如下:

Node.js事件循环

对于本文中一些知识点任然有些模糊,懵懵懂懂,一直都在学习中,通过学习事件循环也看了一些文献,在其中看到了这一句话:除了你的代码,一切都是同步的,我觉得很有道理,对于理解事件循环很有帮助。

关于for循环中使用setTimeout的四种解决方案

我们先来简单了解一下setTimeout延时器的运行机制。setTimeout会先将回调函数放到等待队列中,等待区域内其他主程序执行完毕后,按时间顺序先进先出执行回调函数。本质上是作用域的问题

Js循环的几种方法

for 常用于循环数组 ,for in 常用来循环对象,不建议循环数组,因为i是字符串 可能会有隐患问题,for in 循环会找到 prototype 上去,所以最好在循环体内加一个判断

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!