跳转目标不能跨越 TypeScript 中的函数边界

作者

跳转目标在 TypeScript 中不能跨越函数边界

Jump target cannot cross function boundary in TypeScript

break当我们尝试在 for 循环之外使用语句时，例如在函数中forEach()或函数中，会出现“跳转目标不能跨越函数边界”错误。

要解决错误，只需break在 for 循环和退出
forEach()函数中使用一条语句，方法是抛出和捕获错误。

break以下是在调用中使用该语句时如何发生错误的示例forEach()。

索引.ts
const arr = ['bobby', 'hadz', 'com'];

arr.forEach((value) => {
  if (value === 'bobby') {
    // ⛔️ Error: Jump target cannot cross function boundary.ts(1107)
    break;
  }
  console.log(value);
});

break这是使用退出函数时如何发生错误的示例。

索引.ts
function example() {
  // ⛔️ Error: Jump target cannot cross function boundary.ts(1107)
  break; // 👉️ use return (not break)
}

break语句

用于终止当前循环。

示例中的错误发生是因为我们break 在循环之外使用了关键字。

在 TypeScript 中打破 forEach() 循环

要打破TypeScript 中的循环，通过将对方法的调用包装在一个块中forEach()来抛出并捕获错误。forEach()try/catch

抛出错误时，该forEach()方法将停止迭代集合。

索引.ts
const arr: string[] = ['bobby', 'hadz', 'com'];

const BreakError = {};

try {
  arr.forEach((element) => {
    if (element === 'hadz') {
      throw BreakError;
    }
    console.log(element); // 👉️ bobby
  });
} catch (err) {
  if (err !== BreakError) throw err;
}

我们无法break在循环外使用该语句 – 例如在
forEach()
方法中，因此我们必须将该forEach方法包装在一个try/catch块中。

我们基本上抛出一个错误来跳出forEach()方法，以同样的方式，我们会用一条语句跳出循环break 。

错误在catch块中被捕获，因此我们的应用程序继续运行没有任何问题。

在我们的catch块中，我们检查捕获的错误是否不等于BreakError我们抛出的错误，如果不是则重新抛出。这有助于我们避免消除方法主体中的任何实际错误forEach() 。

跳出单次迭代forEach()

如果只想中断方法中的单个迭代forEach()，则可以使用return语句。

索引.ts
const arr: string[] = ['bobby', 'hadz', 'com'];

arr.forEach((element) => {
  if (element === 'hadz') {
    return;
  }

  console.log(element); // 👉️ bobby, com
});
该示例仅跳过第二次迭代，因为使用return 语句 with 与在循环中forEach()使用相同- 它仅终止当前迭代并继续下一次迭代。 continue

请注意，我们可以break在以下场景中使用该语句：

  • 基本for循环
  • for...of循环
  • for...in循环
  • while循环
  • switch声明

for...of如果适合您的用例，请使用循环

这意味着您可能会使用for...of循环而不是
forEach()方法并使用
break
语句退出。

索引.ts
const arr: string[] = ['bobby', 'hadz', 'com'];

for (const element of arr) {
  if (element === 'hadz') {
    break;
  }

  console.log(element); // 👉️ "bobby"
}

循环for...of以
与但使我们能够使用语句相同的方式遍历数组。forEach()break

如果需要访问索引，使用基本for循环

如果在迭代时需要访问当前索引，则可以使用基本的 for 循环。

索引.ts
const arr: string[] = ['bobby', 'hadz', 'com'];

for (let i = 0; i < arr.length; i++) {
  if (arr[i] === 'hadz') {
    break;
  }

  console.log(arr[i]); // 👉️ "bobby"
}

基本循环的语法for有点冗长。

但是，基本for循环使我们能够使用该break语句并使我们能够访问当前迭代的索引。

尝试使用break语句退出一个函数

当我们尝试使用break语句退出函数时，经常会出现该错误。

索引.ts
function example() {
  // ⛔️ Error: Jump target cannot cross function boundary.ts(1107)
  break; // 👉️ use return (not break)
}

您可以使用该return语句退出函数。

索引.ts
function example() {
  return;
}

如果您需要从函数返回一个值，请指定该值。

索引.ts
function example() {
  return 'bobbyhadz.com';
}

console.log(example());

额外资源

您可以通过查看以下教程来了解有关相关主题的更多信息：