ES6 箭头函数问题

Question

学习 React 教程时，发现了一个箭头函数的问题。

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) => <li>{ number }</li>);

以上代码能够正确返回 5 个 <li /> 的数组。

但是当我像以下写法时：

const listItems = numbers.map((number) => { <li>{ number }</li> });

却只能返回出 5 个 undefined。。。

也许是看 ES6 箭头函数时看漏了什么。。。

先谢谢各位大神。。

Answer 1

箭头函数并没有完全理解，再找几个文章读读，应该就可以了。

const listItems = numbers.map((number) => <li>{ number }</li>);

这种写法，表明每次循环都要返回一个<li>{ number }</li>，相当于

const listItems = numbers.map((number) => { return <li>{ number }</li> });

注意箭头函数的写法，

numbers.map((number) => number)

相当于

numbers.map((number) => {return number})

相当于

number.map(function(number){
    return number
})

注意箭头函数回调部分的大括号。

所以你第二种写法，并没有告诉js该返回什么东西，所js就返回一个undefined的给你的数组。

Answer 2

有大括号要return
不写大括号是默认return

Answer 3

{}当做了一个方法，没有返回值

Answer 4

第二种写法就和咋们之前定义的时候是一样的，{//我们需要执行的语句}
你为listitems赋值，却没有返回值给他，他只能undefined了！

Answer 5

var f = () => 5;
// 等同于
var f = function () { return 5 };

var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2) {
  return num1 + num2;
};

箭头函数右侧是{}，需要添加return，否则无返回值显示undefined；

Answer 6

多写了一个大括号
没有默认的return了

Answer 7

{ <li>{ number }</li> }这是个块,里边的number没有定义,作用域问题