譯 forEach迴圈中你不知道的3件事

2022-07-04 19:33:09 字數 2818 閱讀 7273

總括:foreach迴圈中你不知道的3件事。

自棄者扶不起，自強者擊不倒。

你覺得你真的學會用foreach了麼？

這是我之前對foreach迴圈的理解：就是乙個普通語義化之後的for迴圈，可以被break,continue,return。

這篇文章將向你展示foreach中你可能不了解的3件事。

1. return不會停止迴圈

你覺得下面的**在列印1和2之後會停止麼？

array = [1, 2, 3, 4];


array.foreach(function (element) );


// output: 1 2 3 4
原因是我們在foreach函式中傳了乙個**函式，該**函式的行為和普通函式一樣，我們return操作其實就是普通函式中return。所以並不符合我們預期將foreach迴圈打斷。

mdn官方文件：

注意：除了丟擲異常以外，沒有辦法中止或跳出foreach()迴圈。如果你需要中止或跳出迴圈，foreach()方法不是應當使用的工具。

我們將上述**改寫：

const array = [1, 2, 3, 4];


const callback = function(element) 


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


// output: 1 2 3 4
這就是上述**實際的執行思路，return操作只作用於當前的函式，自然不會對for迴圈產生影響

2. 不能break

下面的**你覺得會被break掉麼？

const array = [1, 2, 3, 4];


array.foreach(function(element) );


// output: uncaught syntaxerror: illegal break statement
不會，甚至這行**都不會執行，直接報錯了。

那麼這段**如何達到我們原本想達到的效果呢？

用普通for迴圈就好了:

const array = [1, 2, 3, 4];


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


// output: 1 2
3. 不能continue

下面**會是跳過2只列印1、3、4嗎？

const array = [1, 2, 3, 4];


array.foreach(function (element) );


// output: uncaught syntaxerror: illegal continue statement: no surrounding iteration statement
同樣不會，和break一樣，報錯，這行**之後甚至都不會執行。

怎麼達到預期呢?

還是使用普通的for迴圈來解決：

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


// output: 1 3 4
譯者補充

foreach函式的實際執行原理其實是這樣的，偽**如下：

let arr = [1, 2];


arr.foreach(function(ele) ); 


// output: 1, 2


// 上面**等同於


function func(ele) 


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


// output: 1, 2
實際上foreach的polyfill實現也是這樣的，在foreach函式中執行乙個for迴圈，在for迴圈裡呼叫**函式。

因此，像下面**自然不會符合預期：

let arr = [1, 2];


let sum = 0;


function add(a) 


arr.foreach(async function(ele) );


console.log(sum);


// output：0
改寫如下：

let arr = [1, 2];


let sum = 0;


function add(a) 


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


console.log(sum);


// output：3

就你不知道 Java clone

請看下面的 一 code public class clone implements cloneable public void setnum int num override protected object clone throws clonenotsupportedexception catc...

你不知道的 和

開發中，編寫有一定逼格的 是每個程式猿都追求的。經常用來判斷的符號 和 也經常用來定義變數哦，你知道嗎？邏輯與 在有乙個運算元不是布林值的情況下，就不一定返回布林值。比如以下情況 1 第乙個運算元是物件，返回第二個數 var myinfo console.log myinfo 2 輸出22 第二個運...

你不知道的box shadow

我們可以僅使用乙個div利用shadow配合animation實現很多豐富的效果 github 求 必需。水平陰影的位置。允許負值。v shadow 必需。垂直陰影的位置。允許負值。blur 可選。模糊距離。spread 可選。陰影的尺寸。color 可選。陰影的顏色。請參閱 css 顏色值。ins...