javascript中的箭头函数

Question

我正在阅读本教程：React-Redux Basic 但我对 Javascript 中的箭头函数感到困惑。
我理解语法：

var myFunction = (para1, para2) => {statements}

我可以使用：myFunction(para1, para2)

但是我不懂语法：

var myFunction2 = ({para1, para2}) => (stattements)

({para1, para2}) 和 (statements) 是什么意思？
每个人都可以帮助我吗？对不起我的英语不好。

Answer 1

你说的是object destructuring。

对象解构允许您同时从一个对象分配多个变量。例如：

let object = { foo: 3, bar: 7 };

// object destructuring
let { foo, bar } = object;

console.log(foo, bar); // prints "3 7"

在函数参数中使用 this 时会发生同样的事情：

let myFunction = function({ foo, bar }) { // can use arrow functions or regular functions
  console.log(foo, bar);
};

let object = { foo: 3, bar: 7 };
myFunction(object); // prints "3 7"

---

另外，使用大括号和小括号（或什么都不用）的区别在于，只有大括号才能有多个语句，否则只能有一个表达式（会自动返回）：

// these three are equivalent functions
let add1 = (x, y) => (x + y);          // note the implicit return
let add2 = (x, y) => x + y;            // we also don't need parentheses
let add3 = (x, y) => { return x + y; } // { ... } is just as a normal function body

你可以阅读更多关于这个here的信息。

Answer 2

此语法与object dectructuring 相关（请参阅examples）并且在 React 中很常见，因为组件可以声明为称为 props 的单个对象的函数。

而不是写：

var Hello = (props) => {
    return <div>Hello {props.name} from {props.city} with {props.item}</div>;
}

您可以将其简化为以下形式：

var Hello = ({name, city, item}) => <div>Hello {name} from {city} with {item}</div>

在您的示例中，它将props 解构为属性para1 和para2。

var works = ({para1, para2}) => console.log(para1, para2)
works({para1: 'test', para2: 'another one'})
works({para2: 'another one', para1: 'test', anotherProp: 'does not matter'})

如您所见，传递属性的顺序无关紧要。与默认参数列表语法相反。这种行为在 React 应用程序中可能是有利的，因为组件倾向于接受多个命名属性。

语法问题

如果函数参数中的对象解构没有大括号，您会收到语法错误，因为它被解析为对象文字。

var doesntWork = {para1, para2} => console.log(para1, para2)

当您想在箭头函数中返回一个对象时，也会出现同样的问题，这可能会导致不良行为。例如，此代码将返回并打印undefined。

var add = ({a, b}) => {sum: a + b}
var result = add({b: 3, a: 5})
console.log(result)

括号被解析为代码块，而不是表达式。要修复代码，它应该用大括号括起来：var add = ({a, b}) => ({sum: a + b})

对象和数组解构是一个强大的工具，它使 React 中的无状态功能组件成为可能和可行。代码变得更简单，更易读。

Answer 3

我建议您阅读以下内容：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions。

你可以这样写：

myFunction = (param1, param2)=>{
     //body
}

同样的：

function myFunction(param1, param2){
    //body
}

在括号之间传递参数（如果只有一个参数，括号是可选的）并在语句中编写函数的逻辑块。阅读文档对您来说非常重要。希望对您有所帮助。