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

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 值進行對比，如果相等的話，即返回對應(yīng)的 name 值，否則返回空。你猜猜當傳入的 type 值為 1 時，statusShow 應(yīng)該顯示什么？按設(shè)想，statusShow 應(yīng)該顯示為 已保存 ，然而實際情況返回的是 空 。是不是一臉問號？？？不急，在解決這個問題前，我們先來了解了解涉及到的知識。

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