在前端開發(fā)中，經(jīng)常會遇到一些通過遍歷循環(huán)來獲取想要的內(nèi)容的情形，而且這種情形在開發(fā)中無所不在，那么本篇博文就來分享一個比較常用又經(jīng)典的知識點：forEach() 的使用。

forEach() 是前端開發(fā)中操作數(shù)組的一種方法，主要功能是遍歷數(shù)組，其實就是 for 循環(huán)的升級版，該語句需要有一個回調(diào)函數(shù)作為參數(shù)。回調(diào)函數(shù)的形參依次為：1、value：遍歷數(shù)組的內(nèi)容；2、index：對應(yīng)數(shù)組的索引，3、array：數(shù)組自身。

在 Vue 項目中，標(biāo)簽里的循環(huán)使用 v-for，方法里面的循環(huán)使用 forEach。

forEach() 方法主要是用于調(diào)用數(shù)組的每個元素，并將元素傳遞給回調(diào)函數(shù)。需要注意的是: forEach() 方法對于空數(shù)組是不會執(zhí)行回調(diào)函數(shù)的。

forEach：即 Array.prototype.forEach，只有數(shù)組才有的方法，相當(dāng)于 for 循環(huán)遍歷數(shù)組。用法：arr.forEach(function(item,index,array){...}),其中回調(diào)函數(shù)有 3 個參數(shù)，item 為當(dāng)前遍歷到的元素，index 為當(dāng)前遍歷到的元素下標(biāo)，array 為數(shù)組本身。forEach 方法不會跳過 null 和 undefined 元素。比如數(shù)組[1，undefine，null，，2]中的四個元素都將被遍歷到，注意與 map 的區(qū)別。

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

例子：

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

1、forEach()的 continue 和 break：

forEach() 自身不支持 continue 和 break 語句的，但是可以通過 some 和 every 來實現(xiàn)。

2、forEach()與 map 的區(qū)別:

forEach()沒有返回值，性質(zhì)上等同于 for 循環(huán)，對每一項都執(zhí)行 function 函數(shù)。即 map 是返回一個新數(shù)組，原數(shù)組不變，而 forEach 是改變原數(shù)組。

3、forEach()與 for 循環(huán)的對比：

for 循環(huán)步驟多比較復(fù)雜，forEach 循環(huán)比較簡單好用，不易出錯。

4、forEach()例子：

實例一：

let array = [1, 2, 3, 4, 5, 6, 7];array.forEach(function (item, index) { console.log(item); //輸出數(shù)組的每一個元素});

實例二：

var array=[1, 2, 3, 4, 5];array.forEach(function(item, index, array){ array[index]=4 * item;});console.log(array); //輸出結(jié)果：修改了原數(shù)組元素，為每個元素都乘以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); } }); } },

到此這篇關(guān)于Vue必學(xué)知識點之forEach()使用的文章就介紹到這了,更多相關(guān)Vue forEach()使用內(nèi)容請搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！