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的给你的数组。