在数组映射期间与 toLowerCase 和 indexOf 组合的可选链接

Question

对于自动完成输入，我在键入过程中在项目属性中搜索。现在我想改进这段代码

filterProjects(value: string) {
  return this.projects.filter(
    project =>
      project.key.toLowerCase().indexOf(value.toLowerCase().trim()) >=
        0 ||
      project.name.toLowerCase().indexOf(value.toLowerCase().trim()) >=
        0 ||
      project.description?.toLowerCase().indexOf(value.toLowerCase().trim()) >=
        0
  );
}

有了这个：

filterProjects(value: string) {
  return this.projects.filter(project =>
    [project.key, project.name, project.description].map(
      str => str?.toLowerCase().indexOf(value.toLowerCase().trim()) >= 0
    )
  );
}

我使用可选链接，因为 description 可以为 null 或未定义。

但它不起作用，这意味着函数总是 returns 数组未修改。此外，当在一项的描述中找到该值时，数组不会仅过滤到此项。

除了使用 if (str !== undefined) 之类的“旧”检查之外，还有什么解决方案？

Answer 1

map returns 一个布尔值数组，无论如何它始终为真，因此它不是您要查找的谓词。您需要 Array.some（如果您打算针对旧浏览器，也在 lodash/underscore/ramda 中）。让我也稍微调整一下内部谓词：

filterProjects(value: string) {
  return this.projects.filter(project =>
    [project.key, project.name, project.description].some(str =>
      str ? str.toLowerCase().includes(value.toLowerCase().trim()) : false
    )
  );
}

Answer 2

您可以使用“Nullish 合并运算符 (??)”

喜欢

str => (str ?? "").toLowerCase().indexOf(value.toLowerCase().trim()) >= 0

在数组映射期间与 toLowerCase 和 indexOf 组合的可选链接

Optional chaining in combination with toLowerCase and indexOf during array map

javascript

arrays

indexof

typescript

optional-chaining