Web前端Tips:使用 forEach 循環中的 return 語句會發生什么?
近日,筆者在認真搬磚的過程中,突然遇到一個問題,請看大屏幕(代碼):
這段代碼的意義在于,將數組中對象的 code 值與傳入的 type 值進行對比,如果相等的話,即返回對應的 name 值,否則返回空。你猜猜當傳入的 type 值為 1 時,statusShow 應該顯示什么?按設想,statusShow 應該顯示為 已保存 ,然而實際情況返回的是 空 。是不是一臉問號???不急,在解決這個問題前,我們先來了解了解涉及到的知識。
javascript中 return 有什么用處
在 JavaScript 中,return 是一個關鍵字,用于從函數中返回一個值,并且停止函數的執行。return 語句是函數中非常重要的一個組成部分,因為它允許函數將計算結果返回給函數調用者。 return 語句有以下用處:
1.返回一個值:return 語句允許函數返回一個值。函數可以對輸入值進行計算,并將結果作為輸出返回給函數調用者。例如:
在上面的代碼中,add 函數接收兩個參數 a 和 b,將它們相加并使用 return 語句返回結果。在 add 函數被調用時,返回的結果被存儲在 sum 變量中,并被打印出來。
2.終止函數執行:return 語句還可以用于終止函數的執行。當 return 語句被執行時,函數將立即停止執行,并返回指定的值(如果有)。這對于在函數執行過程中遇到錯誤或特定條件時需要立即停止函數執行的情況非常有用。例如:
在上面的代碼中,divide 函數檢查除數是否為零。如果是,它將使用 return 語句返回錯誤消息。如果除數不為零,它將使用 return 語句返回計算結果。
3.返回 undefined:如果函數沒有指定 return 語句,或者 return 語句沒有指定返回值,則函數將返回 undefined。例如:
在上面的代碼中,greet 函數將 Hello, John! 字符串打印到控制臺上,但未使用 return 語句返回任何值。因此,result 變量包含 undefined。
forEach 中使用 return
在 JavaScript 中,使用 forEach 方法遍歷數組時,如果在函數內部使用 return 語句,它只會跳出當前的循環,而不會跳出整個函數。 例如,下面的代碼演示了在 forEach 循環中使用 return 語句:
在上面的代碼中,當 num 等于 3 時,使用 return 語句跳出了當前循環,所以數字 3 沒有被打印出來。但是,forEach 循環仍然會繼續執行,直到遍歷完整個數組。
因此,如果我們想要跳出整個函數,可以使用 Array.prototype.some() 或 Array.prototype.every() 方法來代替 forEach,或使用異常捕捉 try{}catch{} 在需要結束循環處 throw new Error(“退出循環”) 這三個方法可以在滿足某個條件時提前跳出循環。
針對案例中,還可以使用一種方法,即不跳出循環,在循環未開始前定義一個變量,循環中給此變量賦值,最后 return 出此變量。