How to use ES6 Fat Arrow to .filter() an array of objects

Question

I'm trying to use ES6 arrow function with .filter to return adults (Jack & Jill). It appears I cannot use an if statement.

What do I need to know in order to do this 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);

My working ES5 example:

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

Answer 1

It appears I cannot use an if statement.

Arrow functions either allow to use an expression or a block as their body. Passing an expression

foo => bar

is equivalent to the following block

foo => { return bar; }

However,

if (person.age > 18) person

is not an expression, if is a statement. Hence you would have to use a block, if you wanted to use if in an arrow function:

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

---

While that technically solves the problem, this a confusing use of .filter , because it suggests that you have to return the value that should be contained in the output array. However, the callback passed to .filter should return a Boolean , ie true or false , indicating whether the element should be included in the new array or not.

So all you need is

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

In ES5:

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

Answer 2

You can't implicitly return with an if , you would need the braces:

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

It can be simplified though:

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

Answer 3

As simple as you can use 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)

Answer 4

Here is my solution for those who use hook ; If you are listing items in your grid and want to remove the selected item, you can use this solution.

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

Answer 5

return arrayname.filter((rec) => rec.age > 18)

在方法中写这个并调用它

Answer 6

Another good option is use the ternary operator like as filter in the map and use the filter for take off the nulls value

 var family = [{"name":"Jack", "age": 26}, {"name":"Jill", "age": 22}, {"name":"James", "age": 5 }, {"name":"Jenny", "age": 0 }]; let adults = family.map(person => person.age < 18?person:null).filter(Boolean); // or if you are afraid about filter(Boolean) you could use filter(person => person;= null). adults.forEach(element => console log(element))