Question

我正在尝试使用带有.filter的ES6箭头功能来回归成年人（Jack＆amp; Jill）。看来我不能使用if语句。

在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);

我的工作ES5示例：

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

Answer 1

看来我不能使用if语句。

箭头功能允许使用表达式 或阻止作为其正文。传递表达

foo => bar

等同于以下块

foo => { return bar; }

然而，

if (person.age > 18) person

不是表达式，if是一个语句。因此，如果您想在箭头函数中使用if，则必须使用块：

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

虽然技术上解决了这个问题，但这是.filter的混乱使用，因为它表明你必须返回应该包含在输出数组中的值。但是，传递给.filter的回调应返回 Boolean ，即true或false，指示该元素是否应包含在新数组中。

所以你需要的只是

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

在ES5中：

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

Answer 2

你不能用if隐式返回，你需要大括号：

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

虽然可以简化：

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

Answer 3

使用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

这是我为那些使用hook的人的解决方案；如果您要在网格中列出项目并希望删除所选项目，则可以使用此解决方案。

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

Answer 5

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

在方法中编写并调用

如何使用ES6 Fat Arrow来.filter（）一个对象数组

5 个答案: