Comment utiliser ES6 Fat Arrow pour .filter () un tableau d'objets

139

J'essaie d'utiliser la fonction de flèche ES6 avec .filterpour renvoyer les adultes (Jack & Jill). Il semble que je ne peux pas utiliser une instruction if.

Que dois-je savoir pour faire cela dans 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);

Mon exemple de travail ES5:

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

javascript ecmascript-6 higher-order-functions

— Henry Zhu
source

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

— Henry Zhu

236

Il semble que je ne peux pas utiliser une instruction if.

Les fonctions fléchées permettent d'utiliser une expression ou un bloc comme corps. Passer une expression

foo => bar

équivaut au bloc suivant

foo => { return bar; }

cependant,

if (person.age > 18) person

n'est pas une expression, ifest une déclaration. Par conséquent, vous devrez utiliser un bloc, si vous vouliez utiliser ifdans une fonction de flèche:

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

Bien que cela résout techniquement le problème, c'est une utilisation déroutante de .filter, car cela suggère que vous devez renvoyer la valeur qui devrait être contenue dans le tableau de sortie. Cependant, le rappel passé à .filterdoit retourner un booléen , c'est-à-dire trueou false, indiquant si l'élément doit être inclus dans le nouveau tableau ou non.

Donc tout ce dont tu as besoin c'est

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

Dans ES5:

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

— Félix Kling
source

Ah, quelle belle explication. Dans .filter () si rien n'est renvoyé pour un objet, il est supposé faux? Par exemple, dans votre exemple ES5, seuls les vrais éléments sont renvoyés.

— Henry Zhu

2

@HenryZhu: Oui. Mais mon exemple renvoie toujours soit falseou true, car person.age > 18est toujours soit falseou true.

— Felix Kling

La version avec le "non bloqué" était censée revenir person(bien sûr, elle ne le fait pas comme vous l'avez indiqué ...). Si votre première correction avait effectivement fait cela ( foo => { if (person.age > 18) return person }), vous obtiendriez l'équivalent exact de ce qu'OP utilisé dans le code ES5. Bien que ce soit un code déroutant, il fonctionne et résoudra le problème. return personsera contraint à true, et aucun retour ne «retournera» undefined, ce qui sera contraint à false.

— Amit

1

@Amit: Bien sûr. J'ai pensé que parce que l'autre réponse le suggérait, je n'aurais pas à le faire. Cependant, cela peut être déroutant, alors je l'ai mis à jour.

— Felix Kling

2

@ just-boris: Je ne sais pas ce que cela permettrait ici .filter. Voulez-vous dire les fonctions fléchées en général?

— Felix Kling

46

Vous ne pouvez pas retourner implicitement avec un if, vous auriez besoin des accolades:

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

Cela peut être simplifié:

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

— Kit Sunde
source

Génial, le second fonctionne. Le premier renvoie un tableau vide. Des idées?

— Henry Zhu

1

@HenryZhu: Cela fonctionne très bien (probablement quelque chose d'autre ne va pas avec votre code ou votre transpilateur). Mais ce n'est pas la bonne façon de toute façon.

— Felix Kling

1

Comment cela serait-il fait dans le cas où vous auriez une autre déclaration? J'essaie de voir cela avec un ternaire mais je n'arrive pas à identifier la syntaxe correcte

— Winnemucca

@stevek Exactement comme vous le feriez avec une fonction normale comme dans le premier exemple.

— Kit Sunde

0

Aussi simple que vous pouvez utiliser 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)

Développer l'extrait

— Mo.
source

0

Voici ma solution pour ceux qui utilisent hook; Si vous répertoriez des éléments dans votre grille et que vous souhaitez supprimer l'élément sélectionné, vous pouvez utiliser cette solution.

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

— Sabri Meviş
source