语法问题

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"

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

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的单个对象的函数。

而不是写作：

Button

您可以将其缩小为以下形式：

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

正如您所看到的，通过属性的顺序并不重要。与默认参数列表语法相反。这种行为在React应用程序中可能是有利的，因为组件倾向于接受多个命名属性。

语法问题

如果在函数参数中没有关于对象解构的大括号，则会出现语法错误，因为它被解析为对象文字。

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

如果要在箭头函数中返回对象，则会出现相同的问题，这可能会导致意外行为。例如，此代码将返回并打印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)

对象和数组解构是一个强大的工具，它使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
}

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

javascript中的箭头功能

3 个答案:

语法问题