Jak używać ES6 Fat Arrow do .filter () tablicy obiektów

Próbuję użyć funkcji strzałki ES6 w .filtercelu zwrócenia dorosłych (Jack i Jill). Wygląda na to, że nie mogę użyć instrukcji if.

Co muszę wiedzieć, aby to zrobić w 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);

Mój działający przykład ES5:

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

Wygląda na to, że nie mogę użyć instrukcji if.

Strzałka funkcje albo umożliwić użycie wyrażenia lub do bloku , jak ich ciała. Przekazywanie wyrazu

foo => bar

odpowiada następnemu blokowi

foo => { return bar; }

Jednak,

if (person.age > 18) person

nie jest wyrażeniem, ifjest stwierdzeniem. Dlatego musiałbyś użyć bloku, gdybyś chciał użyć ifw funkcji strzałkowej:

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

Chociaż technicznie rozwiązuje to problem, jest to mylące użycie .filter, ponieważ sugeruje, że musisz zwrócić wartość, która powinna być zawarta w tablicy wyjściowej. Jednak wywołanie zwrotne przekazane do .filterpowinno zwrócić wartość logiczną , tj. trueOr false, wskazującą, czy element powinien zostać uwzględniony w nowej tablicy, czy nie.

Więc wszystko, czego potrzebujesz, to

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

W ES5:

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

Nie możesz niejawnie powrócić z if, potrzebujesz nawiasów klamrowych:

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

Można to jednak uprościć:

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

Tak proste, jak tylko możesz 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)

Oto moje rozwiązanie dla tych, którzy używają hook; Jeśli wystawiasz przedmioty w swojej siatce i chcesz usunąć wybrany przedmiot, możesz skorzystać z tego rozwiązania.

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