的ECMAScript 6箭頭功能

var getTempItem = id => ({ id: id, name: "Temp" });

我知道上面箭頭的功能等同於：的ECMAScript 6箭頭功能

var getTempItem = function(id) { 

    return { 
     id: id, 
     name: "Temp" 
    }; 
};

但我有點困惑以下

const Todo = ({ onClick, completed, text }) => (
    <li 
    onClick={onClick} 
    style={{ 
     textDecoration: completed ? 'line-through' : 'none' 
    }} 
    > 
    {text} 
</li> 
)

爲什麼包裹函數的參數在大括號中，而函數體僅包含在括號中？ ES6的

來源

2016-08-14 TA3

一些語法糖元素在這裏打球：

參數解構：該功能實際上需要一個對象，但在執行函數之前，它的唯一目的參數被解構爲三個變量。基本上，如果傳遞給函數的參數被稱爲obj，那麼onClick變量被分配obj.onClick的值，並且與其他命名的解構結構變量相同。
簡明箭頭機構：只需要一個表達式的箭頭函數就可以使用簡潔的形式。例如，x => 2 * x是一個箭頭函數，它返回其輸入時間2。但是，ES6語法規範指出，箭頭之後的大括號必須解釋爲語句塊。因此，爲了使用簡潔的主體返回對象，必須將對象表達式包裝在括號內。
JSX：圓括號通常用於需要跨越多行的JSX表達式。

加成：一種方式，其中箭頭功能是從函數聲明和函數表達式不同是這樣的事實：在箭頭功能（甚至用非簡明體），的arguments和this值是與包含範圍相同。因此，使用.call或.apply調用箭頭函數將不起作用，如果您希望箭頭函數採用可變數量的參數，則需要使用其餘參數。

來源

2016-08-14 04:38:32

只需要添加上面很好解釋的答案，下面是關於參數解構的一個很好的寫法：https://leanpub.com/understandinges6/read#leanpub-auto-destructured-parameters – KumarM

優秀。謝謝@ platinum-azure – TA3

'AddTodo = connect（）（AddTodo）'你能解釋一下這裏發生了什麼嗎？ – TA3

用括號括起來的函數體返回包裝在圓括號中的表達式的值。

var getTempItem = id => ({ id: id, name: "Temp" }); 
var getTempItem = id => {return { id: id, name: "Temp" }}; 
// Identical

來源

2016-08-14 04:49:13 xblymmx

顯示一個例子。

參數解構：

在這裏你可以看到，雖然logEmployee函數在兩個參數考慮，我們只在員工對象傳遞作爲代碼的一部分。我們沒有傳遞個別參數。因此，在運行時，員工對象的內容被提取出來，以匹配函數期望並相應傳入的參數。

const employee = { 
id: 1, 
name: "John", 
age: 28 
} 

const logEmployee = ({name, age}) => (
    console.log(name, age) 
) 

logEmployee(employee);

請注意，只有名字和年齡由功能，所以只有這兩個屬性將員工對象解構需要。

來源

2016-08-14 05:11:23 KumarM

謝謝@kumarm。 – TA3

的ECMAScript 6箭頭功能

回答

相關問題