Javascript ECMAScript 6箭头函数

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

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

但我对以下几点有点困惑

var getTempItem = function(id) {

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

const Todo=（{onClick，completed，text}）=>(

{text}

)

---

为什么函数参数用大括号括起来，而函数体只用括号括起来？

ES6的一些语法糖类元素在这里起作用：

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

---

好处：箭头函数不同于函数声明和函数表达式的一种方式是，在箭头函数中（即使是具有非简明主体的函数），

参数

和

此

的值与包含范围相同。因此，使用

.call

或

.apply

调用arrow函数将无效，如果希望arrow函数接受可变数量的参数，则需要使用rest参数。

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

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

---

用一个例子来展示它

参数分解：

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

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

---

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

为了补充上述解释充分的答案，这里有一篇关于参数解构的精彩文章：

AddTodo=connect（）（AddTodo）

您能解释一下这里发生了什么吗？完成@TA3

connect（）

返回一个函数，该函数本身用AddTodo值调用。阅读您正在使用的库的文档，以便准确了解该代码的功能。

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

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

logEmployee(employee);