it-swarm.com.de

Wann sollte ich "return" in es6-Pfeilfunktionen verwenden?

Die neuen Pfeilfunktionen von es6 say return ist unter bestimmten Umständen implizit:

Der Ausdruck ist auch der implizite Rückgabewert dieser Funktion.

In welchen Fällen muss ich return mit den Es6-Pfeilfunktionen verwenden?

123
Jess Telford

Jackson hat teilweise beantwortete dies in einer ähnlichen Frage:

Implizite Rückkehr, aber nur wenn kein Block vorhanden ist.

  • Dies führt zu Fehlern, wenn ein Einzeiler auf mehrere Zeilen erweitert wird und der Programmierer das Hinzufügen einer return vergisst.
  • Die implizite Rückgabe ist syntaktisch mehrdeutig. (name) => {id: name}meldet das Objekt {id: name}... richtig ab? Falsch. Es gibt undefined zurück. Diese geschweiften Klammern sind ein expliziter Block. id: ist ein Label.

Ich würde dazu noch die Definition eines Blocks hinzufügen:

Eine Blockanweisung (oder eine zusammengesetzte Anweisung in anderen Sprachen) wird zum Gruppieren von null oder mehr Anweisungen verwendet. Der Block wird durch geschweifte Klammern begrenzt.

Beispiele:

// returns: undefined
// explanation: an empty block with an implicit return
((name) => {})() 

// returns: 'Hi Jess'
// explanation: no block means implicit return
((name) => 'Hi ' + name)('Jess')

// returns: undefined
// explanation: explicit return required inside block, but is missing.
((name) => {'Hi ' + name})('Jess')

// returns: 'Hi Jess'
// explanation: explicit return in block exists
((name) => {return 'Hi ' + name})('Jess') 

// returns: undefined
// explanation: a block containing a single label. No explicit return.
// more: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/label
((name) => {id: name})('Jess') 

// returns: {id: 'Jess'}
// explanation: implicit return of expression ( ) which evaluates to an object
((name) => ({id: name}))('Jess') 

// returns: {id: 'Jess'}
// explanation: explicit return inside block returns object
((name) => {return {id: name}})('Jess') 
219
Jess Telford

Ich verstehe diese Faustregel ... 

Für Funktionen, die effektiv transformiert werden (einzeilige Manipulation von Argumenten), ist return implizit. 

Kandidaten sind:

// square-root 
value => Math.sqrt(value)

// sum
(a,b) => a+b

Bei anderen Operationen (mehr als Einzeiler, für die ein Block erforderlich ist, muss die Rückgabe explizit sein.)

12
Amarsh

Es gibt einen anderen Fall hier.

Beim Schreiben einer funktionalen Komponente in React können Sie implizit zurückgegebenes JSX in Klammern verwenden.

const FunctionalComponent = () => (
  <div>
    <OtherComponent />
  </div>
);
4
Deci

Pfeilfunktionen ermöglichen eine implizite Rückgabe: Werte werden zurückgegeben, ohne das Schlüsselwort return verwenden zu müssen.

Es funktioniert, wenn im Funktionskörper eine Online-Anweisung vorhanden ist:

const myFunction = () => 'test'

console.log(myFunction()) //'test'

Ein anderes Beispiel, ein Objekt zurückgeben (Denken Sie daran, die geschweiften Klammern in Klammern zu setzen, um zu vermeiden, dass sie als Körperklammern der Umbruchfunktion betrachtet werden):

const myFunction = () => ({value: 'test'})

console.log(myFunction()) //{value: 'test'}

1
Flavio Copes

Hier ist ein weiterer Fall, der mir Probleme bereitet hat. 

// the "tricky" way
const wrap = (foo) => (bar) => {
  if (foo === 'foo') return foo + ' ' + bar;
  return 'nofoo ' + bar;
}

Hier definieren wir eine Funktion, die eine anonyme Funktion zurückgibt. Das "knifflige" Bit ist, dass der Funktionskörper für die äußere Funktion (der Teil, der mit (Takt) => ... beginnt) visuell wie ein "Block" aussieht, aber nicht. Da dies nicht der Fall ist, tritt die implizite Rückkehr ein.

So wird Wrap ausgeführt:

// use wrap() to create a function withfoo()
const withfoo = wrap('foo');
// returns: foo bar
console.log(withfoo('bar'));

// use wrap() to create a function withoutfoo()
const withoutfoo = wrap('bar');
// returns: nofoo bar
console.log(withoutfoo('bar'));

Die Art, wie ich das ausgepackt habe, um sicher zu gehen, dass ich es verstanden habe, bestand darin, die Funktionen "unarrowify" zu machen.

Hier ist das semantische Äquivalent des ersten Codeblocks, indem der Rumpf von wrap () explizit zurückgegeben wird. Diese Definition führt zu den gleichen Ergebnissen wie oben. Hier verbinden sich die Punkte. Vergleichen Sie den ersten Codeblock mit dem folgenden Code. Es ist klar, dass eine Pfeilfunktion selbst als ein Ausdruck und kein Block behandelt wird und den implizierten return enthält.

// the explicit return way
const wrap = (foo) => {
  return (bar) => {
    if (foo === 'foo') return foo + ' ' + bar;
    return 'nofoo ' + bar;
  }
}

Die vollständig nicht festgelegte Version von Wrap wäre so, obwohl sie nicht so kompakt ist wie die Version mit dickem Pfeil und viel einfacher zu verstehen scheint.

// the "no arrow functions" way
const wrap = function(foo) {
  return function(bar) {
    if (foo === 'foo') return foo + ' ' + bar;
    return 'nofoo ' + bar;
  };
};

Für andere, die vielleicht meinen Code lesen müssen, und in Zukunft, denke ich, würde ich es vorziehen, die Nicht-Pfeil-Version zu wählen, die auf den ersten Blick visuell verstanden werden kann, und nicht die Pfeil-Version, für die einiges erforderlich ist dachte (und in meinem Fall experimentieren) an grok.

0
grayjohn