Question

我正在查看此代码 - https://facebook.github.io/react-native/docs/network.html

return fetch('https://facebook.github.io/react-native/movies.json')
      .then((response) => response.json())
      .then((responseJson) => {
        return responseJson.movies;
      })

根据我的理解.then((response) => response.json())转换为：

.then(function(response) {
    return response.json()
}

但我无法弄清楚这会转化为什么？其中有一个额外的{}

.then((responseJson) => {
        return responseJson.movies;
      })

Answer 1

胖箭头功能的基本语法是：

(arg1, arg2, ...) => { ... }

然而：

如果只有一个参数，您可以省略参数列表周围的()：
```
arg => { ... }
```
如果在正文中只有一个语句，则可以省略函数体周围的{}，在这种情况下，return也是隐含的：
```
arg => arg.foo
// means:
(arg) => { return arg.foo; }
```

由于function (arg) { return arg.prop; }形式的回调在Javascript中非常常见，因此这两种语法特殊情况使得这些常见操作非常简洁和富有表现力。 E.g：

arr.filter(foo => foo.bar)

Answer 2

（foo）=＆gt; '酒吧';

与

完全相同

(foo) => {
  return 'bar';
};

如果您的功能是多线，请使用第二种形式。

以下是一些文档：MDN Arrow function

Answer 3

如果没有用大括号包装箭头函数的主体，它将计算表达式并隐式返回结果。如果用大括号包装它，结果不会被隐式返回，你必须明确地这样做。

出于这个原因，第二部分“等于”以下内容：

.then(function(responseJson) {
    return responseJson.movies;
})

Answer 4

另一个提示-如果使用隐式的返回简写，即：

foo => foo.bar

您可以将返回表达式写成多行。唯一要注意的是，您必须在表达式周围包括()。这种情况经常发生在React中，例如，以提高JSX的可读性

const myButton = props => (
  <Button color={props.color} >
    My Button text!
  </Button>
)

Answer 5

作为旁注，如果您希望函数返回对象文字，则必须使用多余的花括号和显式的return：

foo => { bar: "baz" } // will not work!

该示例将不起作用，因为花括号将不会被解释为对象文字的定界字符，而是会被解释为块的分枝符。在块中，bar: "baz"显然是语法错误。因此，要返回{ bar: "baz" }，您需要使用xtra大括号和显式的return：

foo => { return { bar: "baz" } } // will work

胖箭头函数（=＆gt;）的语法，用于或不在身体周围使用{}

5 个答案: