Arrow功能在javascript

Question

我閱讀本教程：React-Redux Basic 但我感到困惑的東西大約在Javascript Arrow功能。
我理解的語法：

var myFunction = (para1, para2) => {statements} 

而且我可以使用：myFunction(para1, para2)

但我不明白的語法：

var myFunction2 = ({para1, para2}) => (stattements) 

什麼({para1, para2})和(statements)是什麼意思？
大家可以幫我嗎？對不起，我的英語不好。

Answer 1

你在說什麼是object destructuring。

對象解構使您可以同時從對象中分配多個變量。例如：

let object = { foo: 3, bar: 7 }; 

// object destructuring 
let { foo, bar } = object; 

console.log(foo, bar); // prints "3 7" 

當您使用此函數中的參數同樣的事情發生：

let myFunction = function({ foo, bar }) { // can use arrow functions or regular functions 
    console.log(foo, bar); 
}; 

let object = { foo: 3, bar: 7 }; 
myFunction(object); // prints "3 7" 

---

而且，使用大括號和括號（或沒有）之間的區別是，只有用大括號可以有多條語句，否則只能有一個表達式（它會自動返回）：

// these three are equivalent functions 
let add1 = (x, y) => (x + y);   // note the implicit return 
let add2 = (x, y) => x + y;   // we also don't need parentheses 
let add3 = (x, y) => { return x + y; } // { ... } is just as a normal function body 

您可以閱讀更多關於此here。

Answer 2

我建議您閱讀：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions。

你可以這樣寫：

myFunction = (param1, param2)=>{ 
    //body 
} 

相同：

function myFunction(param1, param2){ 
    //body 
} 

您通過PARAMS（如果奧菱有一個PARAM括號是可選）括號之間，並在聲明中你編寫你的函數的邏輯塊。閱讀文檔對你來說非常重要。希望能幫助到你。

Answer 3

此語法與object dectructuring（請參閱examples）相關，在React中很常見，因爲組件可以聲明爲稱爲props的單個對象的函數。

而是寫的：

var Hello = (props) => { 
    return <div>Hello {props.name} from {props.city} with {props.item}</div>; 
} 

你可以把它降低到這種形式：

var Hello = ({name, city, item}) => <div>Hello {name} from {city} with {item}</div> 

在您的例子是destructures的props到性能para1和para2。

var works = ({para1, para2}) => console.log(para1, para2) 
works({para1: 'test', para2: 'another one'}) 
works({para2: 'another one', para1: 'test', anotherProp: 'does not matter'}) 

正如你所看到的通過性能的順序並不重要。與默認參數列表語法相反。這種行爲在React應用程序中可能是有利的，因爲組件傾向於接受多個命名屬性。

語法問題

沒有周圍物體解構括號中函數的參數，因爲它被解析爲一個對象的文字，你會得到一個語法錯誤。

var doesntWork = {para1, para2} => console.log(para1, para2) 

當您想要在箭頭函數內返回一個對象時，會出現相同的問題，這可能會導致不希望的行爲。例如，此代碼將返回並打印undefined。

var add = ({a, b}) => {sum: a + b} 
var result = add({b: 3, a: 5}) 
console.log(result) 

托架被解析爲一個碼塊時，不表達。要修復代碼，應該用大括號包裝：var add = ({a, b}) => ({sum: a + b})

對象和數組解構是一個強大的工具，它使React中的無狀態功能組件成爲可能和可行的。代碼變得更簡單，更易讀。