Cách sử dụng ES6 Fat Arrow để .filter () một mảng các đối tượng

Tôi đang cố gắng sử dụng chức năng mũi tên ES6 .filterđể trả lại người lớn (Jack & Jill). Có vẻ như tôi không thể sử dụng một câu lệnh if.

Tôi cần biết những gì để làm điều này trong 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);

Ví dụ ES5 làm việc của tôi:

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

Có vẻ như tôi không thể sử dụng một câu lệnh if.

Các hàm mũi tên hoặc cho phép sử dụng một biểu thức hoặc một khối làm cơ thể của chúng. Vượt qua một biểu thức

foo => bar

tương đương với khối sau

foo => { return bar; }

Tuy nhiên,

if (person.age > 18) person

không phải là một biểu thức, iflà một tuyên bố. Do đó, bạn sẽ phải sử dụng một khối, nếu bạn muốn sử dụng iftrong hàm mũi tên:

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

Trong khi về mặt kỹ thuật giải quyết vấn đề, đây là một cách sử dụng khó hiểu .filter, bởi vì nó gợi ý rằng bạn phải trả về giá trị nên có trong mảng đầu ra. Tuy nhiên, cuộc gọi lại được chuyển đến .filtersẽ trả về Boolean , nghĩa là truehoặc false, cho biết phần tử có nên được đưa vào mảng mới hay không.

Vì vậy, tất cả những gì bạn cần là

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

Trong ES5:

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

Bạn không thể hoàn toàn quay lại với một if, bạn sẽ cần niềng răng:

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

Nó có thể được đơn giản hóa mặc dù:

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

Đơn giản như bạn có thể sử dụng 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)

Đây là giải pháp của tôi cho những người sử dụng hook; Nếu bạn đang liệt kê các mục trong lưới của bạn và muốn xóa mục đã chọn, bạn có thể sử dụng giải pháp này.

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