Como usar o ES6 Fat Arrow para .filter () uma matriz de objetos

139

Estou tentando usar a função de seta ES6 .filterpara retornar adultos (Jack & Jill). Parece que não posso usar uma instrução if.

O que eu preciso saber para fazer isso no 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);

Meu exemplo de trabalho do ES5:

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

javascript ecmascript-6 higher-order-functions

— Henry Zhu
fonte

(8:37) SintaxeErro: desconhecido: token inesperado (8:37) | deixe adult = family.filter (person => if (person.age> 18) people);

— Henry Zhu

236

Parece que não posso usar uma instrução if.

As funções de seta permitem usar uma expressão ou um bloco como corpo. Passando uma expressão

foo => bar

é equivalente ao seguinte bloco

foo => { return bar; }

Contudo,

if (person.age > 18) person

não é uma expressão, ifé uma afirmação. Portanto, você teria que usar um bloco, se quisesse usar ifem uma função de seta:

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

Embora isso resolva tecnicamente o problema, esse é um uso confuso .filter, pois sugere que você deve retornar o valor que deve estar contido na matriz de saída. No entanto, o retorno de chamada passado para .filterdeve retornar um booleano , trueou seja false, indicando se o elemento deve ser incluído na nova matriz ou não.

Então tudo que você precisa é

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

No ES5:

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

— Felix Kling
fonte

Ah, que ótima explicação. Em .filter (), se nada é retornado para um objeto, ele é assumido como falso? Por exemplo, no seu exemplo ES5, apenas os elementos verdadeiros são retornados.

— Henry Zhu

2

@HenryZhu: Sim. Mas meu exemplo sempre retorna um falseou true, já que person.age > 18é sempre um falseou outro true.

— Felix Kling

A versão com o "desbloqueado" se deveria retornar person(é claro que não faz isso como você apontou ...). Se a sua primeira correção realmente fizesse isso ( foo => { if (person.age > 18) return person }), você obteria o equivalente exato do OP usado no código ES5. Embora esse seja um código confuso, ele funciona e resolverá o problema. return personcoagirá truee nenhum retorno "retornará" undefined, o que será coagido false.

— Amit

1

@Mit: com certeza. Eu pensei que, porque a outra resposta sugeria, eu não precisaria. No entanto, isso pode ser confuso, então eu atualizei.

— Felix Kling

2

@ just-boris: Não tenho certeza do que isso alcançaria aqui .filter. Você quer dizer funções de seta em geral?

— Felix Kling

46

Você não pode retornar implicitamente com um if, seria necessário o aparelho:

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

No entanto, pode ser simplificado:

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

— Kit Sunde
fonte

Impressionante, o segundo funciona. O primeiro retorna uma matriz vazia. Alguma ideia?

— Henry Zhu

1

@ HenryZhu: Funciona muito bem (provavelmente algo mais está errado com seu código ou transpilador). Mas esse não é o caminho certo de qualquer maneira.

— Felix Kling

1

Como isso seria feito no caso de você ter uma declaração else? Eu estou tentando ver isso com um ternário, mas parece que não consegue identificar a sintaxe correta

— Winnemucca

@ stevek Exatamente como você faria com uma função normal, como no primeiro exemplo.

— Kit Sunde

0

Tão simples quanto você pode usar 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)

Expandir snippet

— Mo.
fonte

0

Aqui está a minha solução para quem usa hook; Se você estiver listando itens em sua grade e quiser remover o item selecionado, poderá usar esta solução.

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

— Sabri Meviş
fonte