近日，筆者在認真搬磚的過程中，突然遇到一個問題，請看大屏幕（代碼）：

data()?{
??return?{
????statusList:?[
??????{
????????code:??"1",
????????name:??"已保存"
??????},
??????{
????????code:??"2",
????????name:??"已提交"
??????}
????]
??}
?},
computed:?{
??statusShow()?{
????return?function(type)?{
??????this.statusList.forEach(el??=>?{
????????if?(el.code?==?type)?{
??????????return?el.name;
????????}
??????});
??????return?""
????};
??}
},

這段代碼的意義在于，將數(shù)組中對象的?code?值與傳入的?type?值進行對比，如果相等的話，即返回對應的?name?值，否則返回空。你猜猜當傳入的?type?值為?1?時，statusShow?應該顯示什么？
按設想，statusShow?應該顯示為?已保存?，然而實際情況返回的是?空?。是不是一臉問號？？？
不急，在解決這個問題前，我們先來了解了解涉及到的知識。

javascript中 return 有什么用處

在 JavaScript 中，return?是一個關(guān)鍵字，用于從函數(shù)中返回一個值，并且停止函數(shù)的執(zhí)行。return?語句是函數(shù)中非常重要的一個組成部分，因為它允許函數(shù)將計算結(jié)果返回給函數(shù)調(diào)用者。?return?語句有以下用處：

1.返回一個值：return?語句允許函數(shù)返回一個值。函數(shù)可以對輸入值進行計算，并將結(jié)果作為輸出返回給函數(shù)調(diào)用者。例如：

function?add(a,?b)?{
??return?a?+?b;
}
const?sum?=?add(2,?3);
console.log(sum);?//?輸出：5

在上面的代碼中，add?函數(shù)接收兩個參數(shù)?a?和?b，將它們相加并使用?return?語句返回結(jié)果。在?add?函數(shù)被調(diào)用時，返回的結(jié)果被存儲在?sum?變量中，并被打印出來。

2.終止函數(shù)執(zhí)行：return?語句還可以用于終止函數(shù)的執(zhí)行。當?return?語句被執(zhí)行時，函數(shù)將立即停止執(zhí)行，并返回指定的值（如果有）。這對于在函數(shù)執(zhí)行過程中遇到錯誤或特定條件時需要立即停止函數(shù)執(zhí)行的情況非常有用。例如：

function?divide(a,?b)?{
??if?(b?===?0)?{
????return?"Division?by?zero?is?not?allowed.";
??}
??return?a?/?b;
}
const?result1?=?divide(10,?2);
console.log(result1);?//?輸出：5
const?result2?=?divide(10,?0);
console.log(result2);?//?輸出："Division?by?zero?is?not?allowed."

在上面的代碼中，divide?函數(shù)檢查除數(shù)是否為零。如果是，它將使用?return?語句返回錯誤消息。如果除數(shù)不為零，它將使用?return?語句返回計算結(jié)果。

3.返回 undefined：如果函數(shù)沒有指定?return?語句，或者?return?語句沒有指定返回值，則函數(shù)將返回?undefined。例如：

function?greet(name)?{
??console.log(`Hello,?${name}!`);
?}
?const?result?=?greet("John");
?console.log(result);?//?輸出：undefined

在上面的代碼中，greet?函數(shù)將?Hello, John!?字符串打印到控制臺上，但未使用?return?語句返回任何值。因此，result?變量包含?undefined。

forEach 中使用 return

在 JavaScript 中，使用?forEach?方法遍歷數(shù)組時，如果在函數(shù)內(nèi)部使用?return?語句，它只會跳出當前的循環(huán)，而不會跳出整個函數(shù)。 例如，下面的代碼演示了在?forEach?循環(huán)中使用?return?語句：

const?numbers?=?[1,?2,?3,?4,?5];
numbers.forEach(num?=>?{
??if?(num?===?3)?{
????return;
??}
??console.log(num);
});
//?輸出：
//?1
//?2
//?4
//?5

在上面的代碼中，當?num?等于?3?時，使用?return?語句跳出了當前循環(huán)，所以數(shù)字?3?沒有被打印出來。但是，forEach?循環(huán)仍然會繼續(xù)執(zhí)行，直到遍歷完整個數(shù)組。

因此，如果我們想要跳出整個函數(shù)，可以使用?Array.prototype.some()?或?Array.prototype.every()?方法來代替?forEach，或使用異常捕捉?try{}catch{}?在需要結(jié)束循環(huán)處?throw new Error(“退出循環(huán)”)?這三個方法可以在滿足某個條件時提前跳出循環(huán)。

針對案例中，還可以使用一種方法，即不跳出循環(huán)，在循環(huán)未開始前定義一個變量，循環(huán)中給此變量賦值，最后?return?出此變量。

statusShow()?{
??return?function(type)?{
????let?ret?=?"";
??????this.statusList.forEach(el??=>?{
????????if?(el.code?==?type)?{
??????????ret?=?el.name;
????????}
?????});
????return??ret;
??};
}

結(jié)語

牽手 持續(xù)為你分享各類知識和軟件 ，歡迎訪問、關(guān)注、討論 并留下你的小心心?