在Array.Filter中使用If语句

时间:2019-05-22 14:08:17

标签: javascript angular

我将Array.Filter用作:

  this.newData = this.allData.filter(imp =>   
       imp.name.toLowerCase().includes(((filter.name) ? filter.name.toLowerCase() : imp.name.toLowerCase())) &&
       imp.type === ((filter.type) ? filter.type: imp.type) &&
       imp.createdBy.toLowerCase().includes(((filter.createdBy) ? filter.createdBy.toLowerCase() : imp.createdBy.toLowerCase()))
  )

但是我的imp.name有时可以为null,因此代码会出错。

如何在过滤器中添加if语句,以便如果任何数据为null都不要将其添加到AND。

类似

if(imp.name!=null){
  imp.name.toLowerCase().includes(((filter.name) ? filter.name.toLowerCase() : imp.name.toLowerCase()))
}

希望我很清楚。

3 个答案:

答案 0 :(得分:2)

我个人认为这是滥用三元的一个例子。 花了一些时间弄清楚逻辑,即使如此,我仍然认为这不能解决所需的确切过滤。

此处未显示过滤器,因此我们只能猜测。

this.newData = this.allData.filter(imp => {
    // Check if the properties we'll call methods on, are true-ty values.
    if ( !imp.name || !imp.createdBy ) return false;
    // imp.name.toLowerCase().includes( imp.name.toLowerCase()) is always true.
    // So the only way the name is invalid,
    // is if filter.name exists AND filter.name is not included inside imp.name.
    // So !filter.name gives us true if filter.name does not exist
    // and also makes sure filter.name exists before we try to use toLowerCase();
    const valid_name = !filter.name || imp.name.toLowerCase().includes( filter.name.toLowerCase());
    // Same here imp.type will always equal imp.type, so the ternary is redundant again.
    // The type will only be false if imp.type does not equal filter.correctionType
    const valid_type = !filter.type || imp.type === filter.correctionType;
    // Same again
    const valid_creation = !filter.createdBy || imp.createdBy.toLowerCase().includes( filter.createdBy.toLowerCase());
    // All 3 have to be true.
    return valid_name && valid_type && valid_creation;
});

答案 1 :(得分:1)

如果您要检查过滤器是否存在,并且仅在存在过滤器的情况下使用它,我将执行以下操作:

items.filter(imp => {
      let keep = true;
      if (imp.name) {
        keep = keep && imp.toLowerCase().includes(filter.name ? filter.name.toLowerCase() : imp.name.toLowerCase());
      }
      if (imp.type) {
        keep = keep && imp.type === (filter.type ? filter.correctionType : imp.type);
      }
      if (imp.createdBy) {
        keep = keep && imp.createdBy.toLowerCase().includes(filter.createdBy? filter.createdBy.toLowerCase(): imp.createdBy.toLowerCase());
      }
      return keep;
    });

答案 2 :(得分:0)

要获得预期结果,请在过滤器的第一行中使用以下使用imp && imp.name的选项

imp.name && imp.name.toLowerCase().includes(((filter.name)

Codepen-https://codepen.io/nagasai/pen/EzowXb?editors=1010

工作代码:

var allData = [{name: null , type: "A", createdBy: 'test1'},
              {name: 'aaaa' , type: "AB", createdBy: 'test12'},
              {name: 'bbbb' , type: "AA", createdBy: 'test13'},]

var filter = {name: 'bbbb' , correctionType: "AA", createdBy: 'test13'}

 var newData = allData.filter(imp =>   
       imp.name && imp.name.toLowerCase().includes(((filter.name) ? filter.name.toLowerCase() : imp.name.toLowerCase())) &&
       imp.type === ((filter.type) ? filter.correctionType : imp.type) &&
       imp.createdBy.toLowerCase().includes(((filter.createdBy) ? filter.createdBy.toLowerCase() : imp.createdBy.toLowerCase()))
  )
 
 console.log(newData)