的ECMAScript 6箭头功能

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

我知道上面箭头的功能等同于：的ECMAScript 6箭头功能

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> 
)

为什么包裹函数的参数在大括号中，而函数体仅包含在括号中？ ES6的

来源

2016-08-14 TA3

一些语法糖元素在这里打球：

参数解构：该功能实际上需要一个对象，但在执行函数之前，它的唯一目的参数被解构为三个变量。基本上，如果传递给函数的参数被称为obj，那么onClick变量被分配obj.onClick的值，并且与其他命名的解构结构变量相同。
简明箭头机构：只需要一个表达式的箭头函数就可以使用简洁的形式。例如，x => 2 * x是一个箭头函数，它返回其输入时间2。但是，ES6语法规范指出，箭头之后的大括号必须解释为语句块。因此，为了使用简洁的主体返回对象，必须将对象表达式包装在括号内。
JSX：圆括号通常用于需要跨越多行的JSX表达式。

加成：一种方式，其中箭头功能是从函数声明和函数表达式不同是这样的事实：在箭头功能（甚至用非简明体），的arguments和this值是与包含范围相同。因此，使用.call或.apply调用箭头函数将不起作用，如果您希望箭头函数采用可变数量的参数，则需要使用其余参数。

来源

2016-08-14 04:38:32

只需要添加上面很好解释的答案，下面是关于参数解构的一个很好的写法：https://leanpub.com/understandinges6/read#leanpub-auto-destructured-parameters – KumarM

优秀。谢谢@ platinum-azure – TA3

'AddTodo = connect（）（AddTodo）'你能解释一下这里发生了什么吗？ – TA3

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

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

来源

2016-08-14 04:49:13 xblymmx

显示一个例子。

参数解构：

在这里你可以看到，虽然logEmployee函数在两个参数考虑，我们只在员工对象传递作为代码的一部分。我们没有传递个别参数。因此，在运行时，员工对象的内容被提取出来，以匹配函数期望并相应传入的参数。

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

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

logEmployee(employee);

请注意，只有名字和年龄由功能，所以只有这两个属性将员工对象解构需要。

来源

2016-08-14 05:11:23 KumarM

谢谢@kumarm。 – TA3

的ECMAScript 6箭头功能

回答

相关问题