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

Posted on by

前言

在前端開發中，經常會遇到一些通過遍歷循環來獲取想要的內容的情形，而且這種情形在開發中無所不在，那麼本篇博文就來分享一個比較常用又經典的知識點：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"
                       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()使用的文章就介紹到這瞭,更多相關Vue forEach()使用內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：