map中使用箭頭函式遇到的坑

2022-06-11 03:03:11 字數 594 閱讀 6471

箭頭函式提供了更簡潔和更短的語法,其中乙個可用功能是可以將函式編寫為具有隱式返回值的lambda表示式。

這對於功能樣式**很方便,比如使用函式對映陣列:

const numbers = [1,2,3,4]; 

numbers.map(n => n * n);

這個箭頭函式將按照預期的方式工作,它將值自身相乘並返回到包含的新陣列

[1, 4, 9, 16]

但是,如果你嘗試對映到物件,例如,假設將數字對映到包含如下值的物件陣列:

const numbers = [1,2,3,4]; 

numbers.map(n => );

這裡的結果實際上是乙個包含未定義值的陣列。

雖然看起來我們在這裡返回乙個物件,但是直譯器看到了完全不同的東西。如果我們將上面的箭頭函式推斷為直譯器,實際上最終執行的內容像這樣:

numbers.map(function

(n));

解決方法就是將物件包裝在括號中,將其轉換為表示式而不是塊語句

numbers.map(n =>());

箭頭函式的坑

es6裡面的箭頭函式很好用,不過也有些坑,如果你覺得它完全取代了function關鍵字,那就是大錯特錯了。建構函式 箭頭函式無法跟function一樣使用new var foo var foo2 function console.log foo.prototype undefined console...

ts react中使用ts遇到的坑總結

import react from react import reactdom from react dom const reactdom.render document.getelementbyid root 上述 執行時會出現以下錯誤 cannot find module react canno...

小程式中使用箭頭函式的問題

做了乙個專案,因為只有乙個頁面,不想引入redux,同時因為所有邏輯擠在了同頁面的js下面,對於後續的除錯bug很不友好,因此想到了把js函式拆分出去.import send from utils send.js send,export default 複製 當我執行 的時候發現this為undef...