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){&nbsp; &nbsp; return number})注意箭头函数回调部分的大括号。所以你第二种写法，并没有告诉js该返回什么东西，所js就返回一个undefined的给你的数组。