从数组中过滤数据的最佳方法

Question

我想根据特定条件从数组中筛选出数据。

检查'isChecked'和'isPrimaryKey'是否都为true，如果'rename'不为空，则在输出数组中需要显示重命名，否则显示名称。

下面的代码非常适合我。 我想知道有没有更好的方法。

还想知道这种方法是否有缺陷（使用map迭代有限数量的对象）

let columnList = [
  { id:1, name: "Id", rename: "", isChecked: true, isPrimaryKey: true },
  { id:2, name: "Name", isChecked: false, isPrimaryKey: true },
  { id:3, name: "age",  rename: "Age", isChecked: true, isPrimaryKey: true },
  { id:4, name: "Designation", isChecked: true, isPrimaryKey: false },
  { id:5, name: "Salary", isChecked: false, isPrimaryKey: true },
  { id:6, name: "Department", isChecked: true, isPrimaryKey: false },
  { id:7, name: "Project", isChecked: false, isPrimaryKey: false }
];

let data = columnList.map(d => {
  if(d.isChecked && d.isPrimaryKey) {
    return (d.rename && d.rename !== '') ? d.rename : d.name;
  }
});

data = data.filter(item => item);
console.log(data);

输出：[“ Id”，“ Age”]

Answer 1

您应该使用array.reduce代替array.map + array.filter 。

• Array.map-此函数将返回具有返回值的n个元素的数组。 它可以返回部分/处理后的值。
• Array.filter-此函数用于过滤数组中的项目。 这将返回n个匹配大小写的元素，但不会更改/处理它们。
• Array.reduce-此功能旨在减少数组中的项目数。 为此，您可以操纵项目并返回自定义值。

同样，对于需要检查rename是否可用然后返回其他返回name ，也可以使用.push(d.rename || d.name)

 let columnList = [ { id:1, name: "Id", rename: "", isChecked: true, isPrimaryKey: true }, { id:2, name: "Name", isChecked: false, isPrimaryKey: true }, { id:3, name: "age", rename: "Age", isChecked: true, isPrimaryKey: true }, { id:4, name: "Designation", isChecked: true, isPrimaryKey: false }, { id:5, name: "Salary", isChecked: false, isPrimaryKey: true }, { id:6, name: "Department", isChecked: true, isPrimaryKey: false }, { id:7, name: "Project", isChecked: false, isPrimaryKey: false } ]; let data = columnList.reduce((p, d) => { if(d.isChecked && d.isPrimaryKey) { p.push(d.rename || d.name); } return p; }, []); console.log(data) 

但是，如果您仍然希望使用Array.map + array.filter ，可以尝试执行以下操作：

 let columnList = [ { id:1, name: "Id", rename: "", isChecked: true, isPrimaryKey: true }, { id:2, name: "Name", isChecked: false, isPrimaryKey: true }, { id:3, name: "age", rename: "Age", isChecked: true, isPrimaryKey: true }, { id:4, name: "Designation", isChecked: true, isPrimaryKey: false }, { id:5, name: "Salary", isChecked: false, isPrimaryKey: true }, { id:6, name: "Department", isChecked: true, isPrimaryKey: false }, { id:7, name: "Project", isChecked: false, isPrimaryKey: false } ]; let data = columnList .filter(d => d.isChecked && d.isPrimaryKey) .map(d => d.rename || d.name); console.log(data) 

区别在于阅读。 当您阅读时，您将其阅读为

您正在通过isChecked和isPrimaryKey过滤列表，并且从过滤后的列表中返回的是rename或name

这些函数是函数编程的一部分，当它们提高代码的可读性时，它们的美就来了。 在您的代码中，读者将必须阅读逻辑以理解您想要达到的目标，这超出了目的。

Answer 2

Rajesh答案的后续部分：如果您想要filter then- map的干净代码，但又不想添加额外的迭代，Ramda在其许多列表处理功能（包括map和filter支持换能 filter 。 以下版本将迭代列表一次，检查每个步骤是否匹配过滤器，以及是否通过传递给map的函数选择正确的属性。

但是代码仍然可以很好地分解到过滤步骤和映射步骤中。

 let columnList = [ { id:1, name: "Id", rename: "", isChecked: true, isPrimaryKey: true }, { id:2, name: "Name", isChecked: false, isPrimaryKey: true }, { id:3, name: "age", rename: "Age", isChecked: true, isPrimaryKey: true }, { id:4, name: "Designation", isChecked: true, isPrimaryKey: false }, { id:5, name: "Salary", isChecked: false, isPrimaryKey: true }, { id:6, name: "Department", isChecked: true, isPrimaryKey: false }, { id:7, name: "Project", isChecked: false, isPrimaryKey: false } ]; const getCols = R.into([], R.compose( R.filter(d => d.isChecked && d.isPrimaryKey), R.map(d => d.rename || d.name) )) const cols = getCols(columnList) console.log(cols) 

 <script src="//cdnjs.cloudflare.com/ajax/libs/ramda/0.25.0/ramda.min.js"></script> 

您还询问您的方法是否存在问题。 可能有。 除了已经讨论过的额外迭代之外，还有另外两个问题：首先，将filter与item => item将不仅禁止null / undefined值，而且不允许任何false-y值，最值得注意的是0 。 因此，如果您尝试提取其中0可能是一个合理值的列表，则将其排除在外。 其次，在函数式编程中，重新分配变量通常被认为是一种坏习惯。 所以data = data.filter(...)被皱眉了。