ECMAScript 6箭头函数

Question

var getTempItem = id => ({ id: id, name: "Temp" });

我知道上面的箭头函数相当于：

var getTempItem = function(id) {

    return {
        id: id,
        name: "Temp"
   };
};

但我有点困惑于以下几点

const Todo = ({ onClick, completed, text }) => (
  <li
    onClick={onClick}
    style={{
      textDecoration: completed ? 'line-through' : 'none'
    }}
  >
    {text}
 </li>
)

为什么函数参数包装在大括号中，而函数体仅用圆括号包装？

Answer 1

ES6的几个语法糖元素在这里起着作用：

• 参数析构：函数实际上接受一个对象，但在函数执行之前，它的唯一对象参数被解构为三个变量。基本上，如果传递给函数的参数称为obj，那么onClick变量将被赋给obj.onClick的值，与其他命名的destructure变量相同。
• 简明箭头体：一个只需要一个表达式就可以使用简洁形式的箭头函数。例如，x => 2*x是一个箭头函数，它返回输入乘以2。但是，ES6语法规范指出，箭头后面的大括号必须解释为语句块。因此，为了使用简洁的正文返回对象，必须将对象表达式括在括号中。
• JSX ：在JSX表达式周围通常使用圆括号，这些表达式需要跨越多行。

奖励:箭头函数与函数声明和函数表达式不同的一种方式是，在箭头函数中(即使是具有非简洁体的箭头函数)，arguments和this的值与包含范围相同。因此，使用.call或.apply调用箭头函数没有任何效果，如果您希望箭头函数接受可变数量的参数，则需要使用rest参数。

Answer 2

在圆括号中包装的函数体返回在括号中包装的表达式的值。

var getTempItem = id => ({ id: id, name: "Temp" });
var getTempItem = id => {return { id: id, name: "Temp" }};
// Identical

Answer 3

用一个例子来展示。

参数分解：

在这里可以看到，当logEmployee函数接受两个参数时，我们只是作为代码的一部分传入employee对象。我们不会传递单独的参数。因此，在运行时提取employee对象的内容以匹配函数所期望的params，并相应地传入。

const employee = {
 id: 1,
 name: "John",
 age: 28
}

const logEmployee = ({name, age}) => (
  console.log(name, age)
)

logEmployee(employee);

注意，函数只需要名称和年龄，因此只有这两个属性将从employee对象中解构。