ECMAScript 6 arrow Funktionen

Question

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

weiß, dass ich die oben Pfeil Funktion entspricht:

var getTempItem = function(id) { 

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

Aber ich bin die Funktionsargumente wickelte ein wenig verwirrt über die folgenden

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

Warum sind in geschweiften Klammern, und der Funktionskörper ist nur in Klammern gewickelt?

Answer 1

Einige syntaktischer Zucker Elemente ES6 sind hier im Spiel:

• Parameter Destrukturierung: Die Funktion nimmt tatsächlich ein Objekt, aber bevor die Funktion ausgeführt wird, wird sein einziger Objektparameter in drei Variablen dekonstruiert . Wenn das an die Funktion übergebene Argument Obj heißt, wird der onClick-Variablen der Wert von obj.onClick zugewiesen, und dasselbe gilt für die anderen genannten desstructure-Variablen.
• Kurze Pfeilkörper: Eine Pfeilfunktion, die nur einen Ausdruck benötigt, kann die Kurzform verwenden. Zum Beispiel ist x => 2 * x eine Pfeilfunktion, die ihre Eingabe zweimal zurückgibt. Die ES6-Grammatikspezifikation besagt jedoch, dass eine geschweifte Klammer hinter dem Pfeil als Anweisungsblock interpretiert werden muss. Um also ein Objekt mit einem übersichtlichen Text zurückzugeben, müssen Sie den Objektausdruck in runde Klammern setzen.
• JSX: Klammern werden häufig für JSX-Ausdrücke verwendet, die mehr als eine Zeile umfassen müssen.

Bonus: Eine Art und Weise, in den Pfeilfunktionen unterscheiden sich von Funktionsdeklarationen und Funktionsausdrücken ist in der Tatsache, dass in einer Pfeilfunktion (auch nur eine mit einem nicht-Concise Körper), die Werte von arguments und this sind Gleich wie der enthaltende Bereich. Das Aufrufen einer Pfeilfunktion mit .call oder .apply hat keine Auswirkungen, und Sie müssen Restparameter verwenden, wenn Sie möchten, dass Ihre Pfeilfunktion eine variable Anzahl von Argumenten verwendet.

Answer 2

Der in Klammern eingeschlossene Funktionskörper gibt den Wert des in Klammern eingeschlossenen Ausdrucks zurück.

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

Answer 3

Zeigen Sie es mit einem Beispiel.

Parameter Destrukturierung:

Hier können Sie sehen, dass während logEmployee Funktion in zwei Parameter nimmt, werden wir nur als ein Teil des Codes in dem Mitarbeiter-Objekt übergeben. Wir geben keine individuellen Parameter weiter. Zur Laufzeit werden also die Inhalte des Mitarbeiterobjekts extrahiert, damit sie mit den Parametern übereinstimmen, die die Funktion erwartet und entsprechend übergeben wird.

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

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

logEmployee(employee); 

Beachten Sie, dass nur Alter und Namen werden von der Funktion erforderlich, so dass nur diese beiden Eigenschaften werden vom Mitarbeiter Objekt destrukturiert werden.