近日，筆者在認(rèn)真搬磚的過(guò)程中，突然遇到一個(gè)問(wèn)題，請(qǐng)看大屏幕（代碼）：

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

javascript中 return 有什么用處

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

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

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

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

2.終止函數(shù)執(zhí)行：return 語(yǔ)句還可以用于終止函數(shù)的執(zhí)行。當(dāng) return 語(yǔ)句被執(zhí)行時(shí)，函數(shù)將立即停止執(zhí)行，并返回指定的值（如果有）。這對(duì)于在函數(shù)執(zhí)行過(guò)程中遇到錯(cuò)誤或特定條件時(shí)需要立即停止函數(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 語(yǔ)句返回錯(cuò)誤消息。如果除數(shù)不為零，它將使用 return 語(yǔ)句返回計(jì)算結(jié)果。

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

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

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

forEach 中使用 return

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

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

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

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

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

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