快捷導航

Vue必學知識點之forEach()的使用

更新時間：2021年05月30日 14:30:38 作者：三掌柜

在前端開發(fā)中，經(jīng)常會遇到一些通過遍歷循環(huán)來獲取想要的內(nèi)容的情形，這時候就需要用到forEach()了，下面這篇文章主要給大家介紹了關(guān)于Vue必學知識點之forEach()使用的相關(guān)資料，需要的朋友可以參考下

前言

在前端開發(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 項目中，標簽里的循環(huán)使用 v-for，方法里面的循環(huán)使用 forEach。

一、forEach() 使用原理

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

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

二、forEach() 語法

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

例子：

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

三、forEach() 其他相關(guān)內(nèi)容

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)步驟多比較復雜，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);
            }
         });
      }
    },