接受一个destructured对象作为箭头函数的唯一参数

Question

我有一个函数接受回调并用对象调用它：

function login(callback) { 
   /* do login ; */ 
   callback({ username: 'u', email: 'e@e.e' }); 
}

如果我尝试：

login(obj => { console.log(obj.username); });

一切都很好，但如果我尝试：

login({username, email} => { console.log(username); });

我得到＆＃39; VM880：2未捕获的SyntaxError：意外的令牌}（...）＆＃39;

为什么这不起作用，我怎样才能让它发挥作用？

Answer 1

您需要在参数周围使用括号，以便按照您期望的方式对其进行解析。如果=>左侧只有一个标识符，则只能省略箭头函数的括号：

login(({username, email}) => { console.log(username); });

https://tc39.github.io/ecma262/2016/#prod-ArrowParameters

Answer 2

问题与starting a statement with a curly brace的情况非常相似。

开口花括号标志着代码块的开始。但是解构对象模式{username, email}不是代码块。破坏模式周围的括号迫使它被评估为表达式。正如Paulpro已经提到的，解决方案是将括号放在对象模式{username, email}：

周围

login(({username, email}) => { console.log(username); });

另请参阅pitfalls of destructuring