前端开发:Vue中forEach() 的使用
前言
在前端开发中,经常会遇到一些通过遍历循环来获取想要的内容的情形,而且这种情形在开发中无所不在,那么本篇博文就来分享一个比较常用又经典的知识点:forEach() 的使用。
forEach() 是前端开发中操作数组的一种方法,主要功能是遍历数组,其实就是for循环的升级版,该语句需要有一个回调函数作为参数。回调函数的形参依次为:1、value:遍历数组的内容;2、index:对应数组的索引,3、array:数组自身。
在Vue项目中,标签里的循环使用v-for,方法里面的循环使用forEach。
1、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的区别。
2、forEach() 语法
array.forEach(function(currentValue, index, array), thisValue)
例子:array.forEach(function(item,index,array) { ... } )
3、forEach() 其他相关内容
①forEach()的continue和break:forEach() 自身不支持continue和break语句的,但是可以通过some和every来实现。
②forEach()与map的区别: forEach()没有返回值,性质上等同于for循环,对每一项都执行function函数。即map是返回一个新数组,原数组不变,而forEach是改变原数组。
③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" class="checkbox"> <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); } }); } },复制代码
最后
通过上面介绍的关于前端开发中Vue中forEach() 的使用,往后再在前端开发中遇到类似操作就可以很好的解决了,这也是在开发过程中必用的功能,尤其是对于初级开发者来说,更应该掌握这些情况的使用,这里不再赘述。
作者:三掌柜
链接:https://juejin.cn/post/7030848872947646471