鍍金池/ 問(wèn)答/HTML/ ES6 箭頭函數(shù)問(wèn)題

ES6 箭頭函數(shù)問(wèn)題

學(xué)習(xí) React 教程時(shí)，發(fā)現(xiàn)了一個(gè)箭頭函數(shù)的問(wèn)題。

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

以上代碼能夠正確返回 5 個(gè) <li /> 的數(shù)組。

但是當(dāng)我像以下寫(xiě)法時(shí)：


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

卻只能返回出 5 個(gè) undefined。。。

也許是看 ES6 箭頭函數(shù)時(shí)看漏了什么。。。

先謝謝各位大神。。

回答
編輯回答
萌吟

{ <li>{ number }</li> }這是個(gè)塊,里邊的number沒(méi)有定義,作用域問(wèn)題

2017年11月23日 22:13
編輯回答
青裙

{}當(dāng)做了一個(gè)方法，沒(méi)有返回值

2018年1月12日 00:16
編輯回答
青裙

多寫(xiě)了一個(gè)大括號(hào)
沒(méi)有默認(rèn)的return了

2018年4月14日 22:05
編輯回答
逗婦乳

有大括號(hào)要return
不寫(xiě)大括號(hào)是默認(rèn)return

2017年3月4日 17:28
編輯回答
病癮

第二種寫(xiě)法就和咋們之前定義的時(shí)候是一樣的，{//我們需要執(zhí)行的語(yǔ)句}
你為listitems賦值，卻沒(méi)有返回值給他，他只能undefined了！

2017年7月15日 04:39
編輯回答
綰青絲

箭頭函數(shù)并沒(méi)有完全理解，再找?guī)讉€(gè)文章讀讀，應(yīng)該就可以了。

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

這種寫(xiě)法，表明每次循環(huán)都要返回一個(gè)<li>{ number }</li>，相當(dāng)于

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

注意箭頭函數(shù)的寫(xiě)法，

numbers.map((number) => number)

相當(dāng)于

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

相當(dāng)于

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

注意箭頭函數(shù)回調(diào)部分的大括號(hào)。

所以你第二種寫(xiě)法，并沒(méi)有告訴js該返回什么東西，所js就返回一個(gè)undefined的給你的數(shù)組。

2018年9月4日 12:32
編輯回答
心上人
var f = () => 5;
// 等同于
var f = function () { return 5 };

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

箭頭函數(shù)右側(cè)是{}，需要添加return，否則無(wú)返回值顯示undefined；

2017年12月23日 14:33