web前端tips:使用 forEach 循环中的 return 语句会发生什么?

近日，笔者在认真搬砖的过程中，突然遇到一个问题，请看大屏幕（代码）：

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

这段代码的意义在于，将数组中对象的 code 值与传入的 type 值进行对比，如果相等的话，即返回对应的 name 值，否则返回空。你猜猜当传入的 type 值为 1 时，statusShow 应该显示什么？
按设想，statusShow 应该显示为 已保存 ，然而实际情况返回的是 空 。是不是一脸问号？？？
不急，在解决这个问题前，我们先来了解了解涉及到的知识。

javascript中 return 有什么用处

在 JavaScript 中，return 是一个关键字，用于从函数中返回一个值，并且停止函数的执行。return 语句是函数中非常重要的一个组成部分，因为它允许函数将计算结果返回给函数调用者。 return 语句有以下用处：

1.返回一个值：return 语句允许函数返回一个值。函数可以对输入值进行计算，并将结果作为输出返回给函数调用者。例如：

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

在上面的代码中，add 函数接收两个参数 a 和 b，将它们相加并使用 return 语句返回结果。在 add 函数被调用时，返回的结果被存储在 sum 变量中，并被打印出来。

2.终止函数执行：return 语句还可以用于终止函数的执行。当 return 语句被执行时，函数将立即停止执行，并返回指定的值（如果有）。这对于在函数执行过程中遇到错误或特定条件时需要立即停止函数执行的情况非常有用。例如：

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 函数检查除数是否为零。如果是，它将使用 return 语句返回错误消息。如果除数不为零，它将使用 return 语句返回计算结果。

3.返回 undefined：如果函数没有指定 return 语句，或者 return 语句没有指定返回值，则函数将返回 undefined。例如：

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

在上面的代码中，greet 函数将 Hello, John! 字符串打印到控制台上，但未使用 return 语句返回任何值。因此，result 变量包含 undefined。

forEach 中使用 return

在 JavaScript 中，使用 forEach 方法遍历数组时，如果在函数内部使用 return 语句，它只会跳出当前的循环，而不会跳出整个函数。 例如，下面的代码演示了在 forEach 循环中使用 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 语句跳出了当前循环，所以数字 3 没有被打印出来。但是，forEach 循环仍然会继续执行，直到遍历完整个数组。

因此，如果我们想要跳出整个函数，可以使用 Array.prototype.some() 或 Array.prototype.every() 方法来代替 forEach，或使用异常捕捉 try{}catch{} 在需要结束循环处 throw new Error(“退出循环”) 这三个方法可以在满足某个条件时提前跳出循环。

针对案例中，还可以使用一种方法，即不跳出循环，在循环未开始前定义一个变量，循环中给此变量赋值，最后 return 出此变量。

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

结语

牵手 持续为你分享各类知识和软件 ，欢迎访问、关注、讨论 并留下你的小心心