前言

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(item,index,array) { ... })

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

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

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

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

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);
            }
          })
        })

附：vue中forEach未定義

在Vue中，forEach是JavaScript數(shù)組的一個方法，用于遍歷數(shù)組中的每個元素并執(zhí)行指定的回調(diào)函數(shù)。如果在Vue中使用forEach方法時出現(xiàn)"未定義"的錯誤，可能是因為你嘗試在一個非數(shù)組的對象上使用forEach方法。

請確保你在使用forEach方法之前，將其應(yīng)用于一個有效的數(shù)組對象。你可以使用Array.isArray()方法來檢查一個對象是否為數(shù)組。如果不是數(shù)組，你可以嘗試將其轉(zhuǎn)換為數(shù)組，或者使用其他適合的方法來遍歷對象的屬性。

以下是一個示例代碼，演示如何在Vue中正確使用forEach方法：

// 假設(shè)你有一個名為"items"的數(shù)組
data() {
  return {
    items: [1, 2, 3, 4, 5]
  }
},
mounted() {
  // 使用forEach方法遍歷數(shù)組
  this.items.forEach(item => {
    console.log(item);
  });
}

請確保在使用forEach方法之前，你已經(jīng)正確定義了數(shù)組對象，并且沒有拼寫錯誤或其他語法錯誤。

總結(jié) 

到此這篇關(guān)于Vue中forEach()的使用方法例子的文章就介紹到這了,更多相關(guān)Vue中forEach()使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論