Verwendung von ES6 Fat Arrow zum Filtern () eines Arrays von Objekten

138

Ich versuche, die ES6-Pfeilfunktion zu verwenden .filter, um Erwachsene (Jack & Jill) zurückzugeben. Es scheint, dass ich keine if-Anweisung verwenden kann.

Was muss ich wissen, um dies in ES6 zu tun?

var family = [{"name":"Jack",  "age": 26},
              {"name":"Jill",  "age": 22},
              {"name":"James", "age": 5 },
              {"name":"Jenny", "age": 2 }];

let adults = family.filter(person => if (person.age > 18) person); // throws error

(8:37) SyntaxError: unknown: Unexpected token (8:37)
|let adults = family.filter(person => if (person.age > 18) person);

Mein funktionierendes ES5-Beispiel:

let adults2 = family.filter(function (person) {
  if (person.age > 18) { return person; }
});
javascript ecmascript-6 higher-order-functions Henry Zhu
quelle
(8:37) SyntaxError: unbekannt: Unerwartetes Token (8:37) | let adult = family.filter (person => if (person.age> 18) people);
Henry Zhu

Antworten:

235

Es scheint, dass ich keine if-Anweisung verwenden kann.

Pfeilfunktionen ermöglichen entweder die Verwendung eines Ausdrucks oder eines Blocks als Körper. Einen Ausdruck übergeben

foo => bar

entspricht dem folgenden Block

foo => { return bar; }

Jedoch, 

if (person.age > 18) person

ist kein Ausdruck, ifist eine Aussage. Daher müssten Sie einen Block verwenden, wenn Sie ifin einer Pfeilfunktion verwenden möchten :

foo => {  if (person.age > 18) return person; }

Während dies das Problem technisch löst, ist dies eine verwirrende Verwendung .filter, da dies darauf hindeutet, dass Sie den Wert zurückgeben müssen, der im Ausgabearray enthalten sein sollte. Der an übergebene Rückruf .filtersollte jedoch einen Booleschen Wert zurückgeben , dh trueoder false, der angibt, ob das Element in das neue Array aufgenommen werden soll oder nicht.

Alles was Sie brauchen ist

family.filter(person => person.age > 18);

In ES5:

family.filter(function (person) {
  return person.age > 18;
});
Felix Kling
quelle
Ah, was für eine großartige Erklärung. Wenn in .filter () für ein Objekt nichts zurückgegeben wird, wird es als falsch angenommen? In Ihrem ES5-Beispiel werden beispielsweise nur die wahren Elemente zurückgegeben.
Henry Zhu
2
@ HenryZhu: Ja. Aber mein Beispiel gibt immer entweder falseoder zurück true, da person.age > 18es immer entweder falseoder ist true.
Felix Kling
Die Version mit dem "nicht blockierten" if sollte zurückkehren person(natürlich macht es das nicht, wie Sie gezeigt haben ...). Wenn Ihre erste Korrektur dies tatsächlich getan hätte ( foo => { if (person.age > 18) return person }), würden Sie genau das erhalten, was OP im ES5-Code verwendet. Das ist zwar ein verwirrender Code, aber er funktioniert und wird das Problem lösen. return personwird erzwingen true, und keine Rückkehr wird "zurückkehren" undefined, was erzwungen wird false.
Amit
1
@Amit: Sicher. Ich dachte, weil die andere Antwort es nahelegte, würde ich nicht müssen. Dies kann jedoch verwirrend sein, daher habe ich es aktualisiert.
Felix Kling
2
@ just-boris: Ich bin mir nicht sicher, womit dies hier erreicht werden würde .filter. Meinen Sie Pfeilfunktionen im Allgemeinen?
Felix Kling
45

Sie können nicht implizit mit einem zurückkehren if, Sie würden die Klammern benötigen:

let adults = family.filter(person => { if (person.age > 18) return person} );

Es kann jedoch vereinfacht werden:

let adults = family.filter(person => person.age > 18);
Kit Sunde
quelle
Super, der zweite funktioniert. Der erste gibt ein leeres Array zurück. Irgendwelche Ideen?
Henry Zhu
1
@ HenryZhu: Es funktioniert einwandfrei (wahrscheinlich stimmt etwas anderes mit Ihrem Code oder Transpiler nicht). Aber das ist sowieso nicht der richtige Weg.
Felix Kling
1
Wie würde dies geschehen, wenn Sie eine else-Anweisung haben? Ich versuche dies mit einem ternären zu sehen, kann aber nicht die richtige Syntax identifizieren
Winnemucca
@stevek Genau wie bei einer normalen Funktion wie im ersten Beispiel.
Kit Sunde
0

So einfach wie möglich const adults = family.filter(({ age }) => age > 18 );

const family =[{"name":"Jack",  "age": 26},
              {"name":"Jill",  "age": 22},
              {"name":"James", "age": 5 },
              {"name":"Jenny", "age": 2 }];

const adults = family.filter(({ age }) => age > 18 );

console.log(adults)
Erweitern Sie das Snippet

Mo.
quelle
0

Hier ist meine Lösung für diejenigen, die verwenden hook; Wenn Sie Elemente in Ihrem Raster auflisten und das ausgewählte Element entfernen möchten, können Sie diese Lösung verwenden.

var list = data.filter(form => form.id !== selectedRowDataId);
setData(list);
Sabri Meviş
quelle