时间戳

首页 > 解决方案 > 有没有更好的方法在 JavaScript 中编写冗余过滤器语句？

javascript - 有没有更好的方法在 JavaScript 中编写冗余过滤器语句？

问题描述

我有多个 if 语句，我使用三元运算符呈现，然后为每个 If 一个单独的过滤器，这在 React 中工作得非常好，但是过滤器语句的重复使代码看起来不整洁，有没有办法消除这种重复？

let ar = data;
id === 'A' ? ar = ar.filter(item => item > 4) : Id === 'B' ? ar = ar.filter(item => item > 4 
&& item < 8) : Id === 'C' ? ar = ar.filter(item => item >8 && item < 15) : ar = data;

标签： javascript

解决方案

让我们进行一些重构，看看我们可以改进什么。首先，我将它分成多行，以便我可以更容易地看到它：

let ar = data;
id === 'A' ?
  ar = ar.filter(item => item > 4) : 
id === 'B' ? 
  ar = ar.filter(item => item > 4 && item < 8) : 
id === 'C' ? 
  ar = ar.filter(item => item > 8 && item < 15) :
//default
ar = data;

我注意到的第一件事是您分配了多次，但使用了三元组，这使得它不需要。让我们解决这个问题：

let ar = data
ar = (
id === 'A' ?
  ar.filter(item => item > 4) : 
id === 'B' ? 
  ar.filter(item => item > 4 && item < 8) : 
id === 'C' ? 
  ar.filter(item => item > 8 && item < 15) :
//default
data
)

接下来，ar.filter每次都被调用（默认情况除外），只有参数在变化。可以将默认情况更改为返回所有内容的过滤器，使其更加一致，然后我们可以将参数提取到变量（我们称之为filter）：

let ar = data
// we are just determining the argument here
let filter = ( 
id === 'A' ?
  item => item > 4 : 
id === 'B' ? 
  item => item > 4 && item < 8 : 
id === 'C' ? 
  item => item > 8 && item < 15 :
// default is to return all items
item => true
)

// now we can use the argument in the function call
ar = ar.filter(filter)

这消除了这里的大部分重复，但我们id多次以相同的方式进行比较。如前所述，如果您想Pavlos根据字符串 id 选择一个选项，基本对象可以让您这样做。问题是我们失去了默认参数，但我们通常可以使用||("or") 运算符来解决这个问题：

let ar = data

// another benefit of doing it this way is that it is super easy to add 
// new filters now, and you can even pass this in as a prop to your component.
let filters = { 
  'A' : item => item > 4, 
  'B' : item => item > 4 && item < 8,
  'C' : item => item >8 && item < 15
}
let defaultFilter = item => true 

// pick the right filter
let filter = filters[id] || defaultFilter

// now filter the collection with that filter
ar = ar.filter(filter)

有了这个，您已经将选择正确过滤器的命令式过程转变为声明性过程。该filters对象现在列出没有任何逻辑的过滤器。这更加灵活，并允许在代码库的其他部分进行更多的重构。

另一个可能有帮助的提示是重新排列参数，使其item位于中间，并且数字从最小到最大：

item => 4 < item && item < 8

（有关更多信息，请参阅此答案）

推荐阅读