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参数.