首頁 >web前端 >js教程 >為什麼花括號會破壞個案陳述中的箭頭功能?

為什麼花括號會破壞個案陳述中的箭頭功能?

Susan Sarandon
Susan Sarandon原創
2024-12-11 03:06:11307瀏覽

Why Do Curly Braces Break My Arrow Function in a Case Statement?

箭頭函數中的大括號:揭開謎團

在Dan Abramov 的講座中,出現了一個有趣的問題:為什麼大括號會導致函數測試失敗?讓我們調查這個謎團。

有問題的程式碼是 case 語句中的箭頭函數:

case 'toggleTodo' :
        return (
            state.map( (one) => {
                oneTodo( one, action )
            })
        );

當包含大括號 { } 時,測試失敗。然而,當它們被省略時,程式碼可以完美地工作。下面是幕後發生的事。

大括號的力量:區塊和明確回傳

當您將函數體括在大括號中時,您建立了一個阻止。區塊可以包含多個語句,每個語句都以分號結尾。如果要從區塊傳回值,則必須明確使用 return 語句。

對於有大括號的箭頭函數,主體只包含對oneTodo()。由於沒有明確的 return 語句,函數傳回 undefined。這種意外行為會導致測試失敗。

要修正此問題,您需要明確回傳 oneTodo() 呼叫的結果:

(one) => {
    return oneTodo(one, action);
}

簡潔的主體:為了簡單而省略大括號

如果省略大括號中,箭頭函數有一個簡潔的函數體。簡潔主體由單一表達式組成,其結果隱式傳回。

在沒有大括號的範例中,簡潔主體為:

(one) => oneTodo( one, action )

此表達式相當於:

return oneTodo( one, action );

省略大括號,您無需顯式即可得到相同的結果return 語句。

理解差異

關鍵要點是理解 區塊 之間的區別(由大括號)和簡潔的正文 (由沒有大括號表示括號)。區塊需要明確的 return 語句,而簡潔的主體則隱式傳回單一表達式的結果。

因此,在 case 語句中使用箭頭函數時,請記住使用大括號和顯式的 return 語句(如果您需要在函數體內包含多個語句)。如果您只需要單一表達式,則可以省略大括號以建立簡潔的正文。

以上是為什麼花括號會破壞個案陳述中的箭頭功能?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn