ES6箭头函数调试器语句

Question

如果我有这样一个函数：

param => params + 1

我需要在函数体内放置一个debugger语句。像这样添加括号：

param => { debugger; return params + 1 }

唯一的选择？

- courses.indepth.dev

---

技术说明：这些是花括号，而不是圆括号。在谈论正则表达式等内容时需要明确区分。 - James Thorpe

@JamesThorpe，谢谢，可以给个小例子展示一下区别吗？ - Max Koretskyi

好的，请将需要翻译的内容提供给我。 - James Thorpe

@JamesThorpe，啊，我明白了，非常感谢你提醒我。 - Max Koretskyi

没问题，只是想尽可能地帮助教育有关问题的各个方面 :) - James Thorpe

Answer 1

来自关于箭头函数的MDN文章：

(param1, param2, …, paramN) => { statements }
(param1, param2, …, paramN) => expression

你可以看到，无括号语法要求箭头右侧的代码必须是一个表达式，这是语言本身所做的（不幸的）区别。

由于debugger是一个语句，在任何需要一个表达式的地方使用它都是语法错误。你可以采取的一种方法是将你的调试器语句转换为一个表达式，这样你就可以欺骗JavaScript进行评估但不返回，例如：

function debug(args) {
     debugger;
     return true;
}

params => debug() && params + 1

// or

params => console.log(params) || params + 1

这个工作原理是由于 JavaScript 中逻辑运算符的工作方式，所以这是正确的：

truthyA && B  === B

falsyA || B === B

当链接逻辑运算符时，JavaScript 从左到右评估子表达式，然后根据它们的布尔值进行操作。这就是为什么有时会看到 && 用于代替 if 语句的原因：

 if (smth) doStuff();
 // is equivalent to:
 smth && doStuff();

- lleaff

---

似乎你想通过不断编辑来获得更多的赞。 - Max Koretskyi

请多多点赞。但说真的，SO在Google上的索引非常好，所以其他人将来可能会看到这个问题，最好给他们提供最好的答案。而且我喜欢解释这种东西。 - lleaff

逗号运算符在这些情况下也很有用，虽然大多数人似乎不知道它。 - Yay295

@Yay295 好的观点，尽管您仍然需要将 lambda 主体用括号括起来，因为逗号具有所有运算符中最低的优先级。所以，您可以使用大括号和冒号代替 :) - lleaff

Answer 2

使用逻辑或运算符与console.log一起使用。这将把参数写入控制台。原始答案为"最初的回答"。

const add = (x, y) => console.log(x, y) || x + y;

- Cory House

Answer 3

这是另一种方法，不需要定义一个函数：

(() => { debugger; })()

这是一个自动调用的箭头函数，调用了 debugger 语句，并且它也是一个表达式。

因此在您的代码中，您可以使用：

param => (() => { debugger; })() && params + 1

虽然打字有点困难，但在需要表达式的任何地方都能派上用场。

请注意，如果您希望params + 1也被执行（例如，在调试语句后继续执行），您必须从函数中返回true：

(() => { debugger; return true })()

- Cristian

---

这将在断点处暂停执行，但您实际上无法调试值。当您在开发工具中将鼠标悬停在它们上面时，参数是未定义的。 - Cory House

Answer 4

我还没有找到一个好的方法来在箭头函数中注入调试器。

选项：

 ()=>console.log(9)?? (()=>{debugger} )() ?? console.log(0) 

控制台是任何代码的存根。(()=>{debugger} )() 似乎是使调试器内联的唯一方法。在您的情况下：

param => (()=>{debugger} )() ?? params + 1

- Sasha Firsov