使用 || 和 console.log 快速调试

GenAI LIVE! | 2025年6月4日

用 console.log 调试单行箭头函数总是很麻烦。为什么？因为我们需要先把它转换成多行代码。不用了！只需||在表达式前使用即可。它会同时输出你的代码console.log和表达式👍

清理起来轻而易举！不用再费力地重新转换回一行代码了。只需删除console.log。就大功告成了😆

// ✅
() => console.log('🤖') || expression

// ❌
() => {
  console.log('🤖')
  return expression
}

例子

让我们看一个简单的例子来了解它是如何工作的：

const numbers = [1,2,3];

numbers.map(number => number * 2);


// ✅ Debug quickly by prepending with `||`
numbers.map(number => console.log(number) || number * 2);

// ❌ No need to expand it to multi line
numbers.map(number =>  {
  console.log(number);
  return number * 2;
});

工作如何`||`？

我们常常认为||运算符只用于条件语句。然而，你也可以把它看作一个选择器运算符。它总是会计算两个表达式中的一个。

因为console.log总是返回undefined，这是一个假值。第二个表达式总是会被求值👍

要了解有关||操作员的更多信息，请查看我之前的帖子

社区意见

使用逗号运算符

@phenax5：您也可以使用逗号运算符。用逗号分隔两个表达式，它将先执行第一个表达式，然后执行第二个表达式，并返回第二个表达式。

a => (console.log(a), a + 5);

让我分解一下这个例子，这样就能很清楚地看出这两个表达式的位置：

a => (
  console.log(a),
  a + 5
)

⚠️ 注意逗号的位置

但请确保不要这样做。我第一次看到他的例子时就犯了这个错误。你不应该把表达式放在里面console.log。如果你这样做，你的函数将不会返回任何内容，也不会执行任何操作。因此，这会破坏你的函数。所以，小心你的逗号位置 😅

a => (
  console.log(a, a + 5),
)

`||`与 TypeScript 一起使用

如果您正在使用 TypeScript，则取决于您的设置方式。使用此调试技术可能会导致错误并阻止代码编译。在这种情况下，您可以使用来抑制错误ts-ignore。

在这种情况下，使用ts-ignore应该没什么大不了的，因为它console.log只是在调试期间暂时存在。调试完成后，你一定要删除它。

// @ts-ignore: Unreachable code error
() => console.log('🤖') || expression

感谢：@stramel89

资源

感谢阅读❤
打个招呼！Instagram | Twitter | Facebook | Medium |博客

鏂囩珷鏉ユ簮锛�https://dev.to/samanthaming/quick-debug-using-with-console-log-59lo

使用 || 和 console.log GenAI LIVE! 快速调试 | 2025 年 6 月 4 日