Come usare ES6 Fat Arrow per .filter () una matrice di oggetti

139

Sto cercando di utilizzare la funzione freccia ES6 con .filterper tornare adulti (Jack & Jill). Sembra che non riesca a usare un'istruzione if.

Cosa devo sapere per farlo in ES6?

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);

Il mio esempio ES5 funzionante:

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

javascript ecmascript-6 higher-order-functions

— Henry Zhu
fonte

(8:37) Sintassi Errore: sconosciuto: token imprevisto (8:37) | let adults = family.filter (person => if (person.age> 18) people);

— Henry Zhu,

236

Sembra che non posso usare un'istruzione if.

Le funzioni freccia consentono di usare un'espressione o un blocco come corpo. Passando un'espressione

foo => bar

è equivalente al seguente blocco

foo => { return bar; }

Però,

if (person.age > 18) person

non è un'espressione, ifè un'affermazione. Quindi dovresti usare un blocco, se volessi usare ifuna funzione freccia:

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

Mentre ciò risolve tecnicamente il problema, questo è un uso confuso di .filter, perché suggerisce che è necessario restituire il valore che dovrebbe essere contenuto nell'array di output. Tuttavia, il callback passato a .filterdovrebbe restituire un valore booleano , ovvero trueo false, che indica se l'elemento deve essere incluso nel nuovo array o meno.

Quindi tutto ciò che serve è

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

In ES5:

family.filter(function (person) {
  return person.age > 18;
});

— Felix Kling
fonte

Ah, che grande spiegazione. In .filter () se non viene restituito nulla per un oggetto, viene considerato falso? Ad esempio, nell'esempio ES5 vengono restituiti solo gli elementi veri.

— Henry Zhu,

2

@HenryZhu: Sì. Ma il mio esempio restituisce sempre o falseo true, poiché person.age > 18è sempre falseo true.

— Felix Kling,

La versione con "non bloccato" se dovesse tornare person(ovviamente non lo fa come hai indicato ...). Se la tua prima correzione lo avesse effettivamente fatto ( foo => { if (person.age > 18) return person }), otterrai esattamente l'equivalente di ciò che OP ha usato nel codice ES5. Sebbene sia un codice confuso, FUNZIONA e risolverà il problema. return personcostringerà a true, e nessun ritorno "ritornerà" undefined, a cui sarà costretto false.

— Entro il

1

@Amit: certo. Ho pensato perché l'altra risposta l'ha suggerito, non avrei dovuto. Tuttavia, questo può essere fonte di confusione, quindi l'ho aggiornato.

— Felix Kling,

2

@ just-boris: non sono sicuro di ciò che questo conseguirebbe qui .filter. Intendi le funzioni delle frecce in generale?

— Felix Kling,

46

Non puoi implicitamente tornare con un if, avresti bisogno delle parentesi graffe:

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

Può essere semplificato però:

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

— Kit Sunde
fonte

Fantastico, il secondo funziona. Il primo restituisce un array vuoto. Qualche idea?

— Henry Zhu,

1

@HenryZhu: Funziona bene (probabilmente c'è qualcos'altro che non va nel tuo codice o nel tuo transpiler). Ma non è comunque il modo giusto.

— Felix Kling,

1

Come si farebbe nel caso in cui tu abbia una dichiarazione else? Sto provando a vederlo con un ternario ma non riesco a identificare la sintassi corretta

— Winnemucca

@stevek Esattamente come faresti con una normale funzione come nel primo esempio.

— Kit Sunde,

0

Semplice come puoi usare 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)

Espandi frammento

— Mo.
fonte

0

Ecco la mia soluzione per coloro che usano hook; Se stai elencando elementi nella griglia e desideri rimuovere l'elemento selezionato, puoi utilizzare questa soluzione.

var list = data.filter(form => form.id !== selectedRowDataId);
setData(list);

— Sabri Meviş
fonte