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的值，并与其他命名的分解变量相同。
• 简洁的箭头主体 ：只需一个表达式的箭头函数就可以使用简洁的形式。 例如，x => 2 * x是一个箭头函数，返回其输入乘以2。 但是，ES6语法规范指出，箭头后的花括号必须解释为语句块。 因此，为了使用简洁的主体返回对象，必须将对象表达式括在括号中。
• JSX ：括号通常用于需要跨越多行的JSX表达式。

奖金：其中箭头功能是从函数声明和函数表达式不同的一种方式是在一个事实，即在箭头功能（甚至用非简明体），的值arguments和this是相同的包含范围内。 所以调用带有箭头的功能.call或.apply不会有任何效果，你需要的，如果你希望你的箭头功能可以带可变数量的参数，使用其余的参数。

Answer 2

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

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

Answer 3

举例说明。

参数解构：

在这里您可以看到，虽然logEmployee函数使用两个参数，但我们只是将employee对象作为代码的一部分传入。 我们没有传递单个参数。 因此，在运行时，将提取员工对象的内容以匹配该函数期望的参数，并相应地将其传递。

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

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

logEmployee(employee);

请注意，该功能仅需要名称和年龄，因此只有这两个属性将从雇员对象中解构。