JavaScript中forEach()怎么用

這篇文章主要為大家展示了“JavaScript中forEach()怎么用”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“JavaScript中forEach()怎么用”這篇文章吧。

forEach()

foreach語句是java5的新特征之一，在遍歷數(shù)組、集合方面，foreach為開發(fā)人員提供了極大的方便。

foreach語句是for語句的特殊簡化版本，但是foreach語句并不能完全取代for語句，然而，任何的foreach語句都可以改寫為for語句版本。

foreach并不是一個關(guān)鍵字，習(xí)慣上將這種特殊的for語句格式稱之為“foreach”語句。從英文字面意思理解foreach也就是“for 每一個”的意思。

await 不能用在 forEach 中：原因：那就是 forEach 只支持同步代碼。

forEach 循環(huán)無法中途跳出，break 命令或 return 命令都不能奏效

forEach() 方法對數(shù)組的每個元素執(zhí)行一次提供的函數(shù)。

var arr = ['a', 'b', 'c'];

arr.forEach(function(e) {

  console.log(e);

});

//輸出結(jié)果

a;

b;

c;

forEach方法中的function回調(diào)有三個參數(shù)：

第一個參數(shù)是遍歷的當(dāng)前元素 （必需），

第二個參數(shù)是當(dāng)前元素的索引值（可選），

第三個參數(shù)是當(dāng)前元素所屬的數(shù)組對象（可選）

forEach(function(value,index,array){

　　　　// something

　　});

 var arr = [1, 2, 3, 4];

 arr.forEach(console.log);

//    等價于：

 var arr = [1, 2, 3, 4];

 for (var k = 0; k < arr.length; k++) {

 console.log(array[k]);

    }

var arr = [1,2,3,4];

var sum =0;

arr.forEach(function(value,index,array){

 array[index] == value; //輸出結(jié)果為 true

 sum+=value; 

 });

console.log(sum); 

//輸出結(jié)果 10

forEach 循環(huán)無法中途跳出，break 命令或 return 命令都不能奏效

1、forEach不支持break

大家都知道，在使用for循環(huán)時可以使用break跳出循環(huán)，比如我希望找到數(shù)組中符合條件的第一個元素就跳出循環(huán)，這對于優(yōu)化數(shù)組遍歷是非常棒的。很遺憾，forEach并不支持break操作，使用break會導(dǎo)致報錯。

let arr = [1, 2, 3, 4];

for (let i = 0; i < arr.length; i++) {

   console.log(arr[i]);

   if (arr[i] === 2) {

       break;

   };

};

//輸出結(jié)果  1,2 

arr.forEach((self, index) => {

   console.log(self);

   if (self === 2) {

       break;

   };

});

//報錯

2、forEach中使用return無效

首先需要確定的，直接再for循環(huán)中使用return會報錯（函數(shù)中使用for可以return），forEach中使用return不會報錯，但rerutn并不會生效，我們來看個例子：

 let arr = [1, 2, 3, 4];

 function find(array, num) {

     array.forEach((value, index) => {

         if (value === num) {

             return index;

         };

     });

 };

 let index = find(arr, 2);

 console.log(index);

 // 輸出結(jié)果 undefined

上述代碼想要找到數(shù)字2在數(shù)組中的索引，但return并不會起到終止代碼運行并返回值的作用。

當(dāng)然如果我們真的要用return返回某個值，那就只能將return操作放在函數(shù)中，而不是forEach循環(huán)中，像這樣：

let arr = [1, 2, 3, 4];

function find(array, num) {

    let index_;

    array.forEach((value, index) => {

        if (value === num) {

            index_ = index;

        };

    });

    return index_;

};

console.log(find(arr, 2));

//輸出結(jié)果 1

3、forEach刪除自身元素index不會被重置

還記得文章開頭的問題嗎，那段代碼其實只會執(zhí)行一次，數(shù)組也不會被刪除干凈，這是因為forEach在遍歷跑完回調(diào)函數(shù)后，會隱性讓index自增，像這樣：

let arr = [1, 2, 3, 4];

arr.forEach((value, index) => {

    arr.splice(index, 1);

    //這里隱性讓index自增加1  

    index++;

});

console.log(arr);

//輸出結(jié)果 [2,4]

4、forEach 并不改變原數(shù)組：

 let arr = [1, 2, 3, 4, 5];

 let a = arr.forEach(function(value, index, arr) {

     console.log(value)

//輸出

 })

 console.log(a) //輸出結(jié)果 undefined

 console.log(arr.toString())//輸出 1,2,3,4,5

for與forEach的區(qū)別

for循環(huán)可以使用break跳出循環(huán)，但forEach不能。

for循環(huán)可以控制循環(huán)起點（i初始化的數(shù)字決定循環(huán)的起點），forEach只能默認(rèn)從索引0開始。

for循環(huán)過程中支持修改索引（修改 i），但forEach做不到（底層控制index自增，我們無法左右它）。

以上是“JavaScript中forEach()怎么用”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！