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

【问题标题】：Optional chaining in combination with toLowerCase and indexOf during array map在数组映射期间结合 toLowerCase 和 indexOf 的可选链接
【发布时间】：2023-04-03 20:21:02
【问题描述】：

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

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 可以为空或未定义。

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

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

【问题讨论】：

标签： javascript arrays typescript indexof optional-chaining

【解决方案1】：

map 返回一个布尔数组，无论如何它总是真实的，所以它不是您要寻找的谓词。您需要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
    )
  );
}

【讨论】：

整洁，有效！但是我还在想办法摆脱三元运算符...
@sivako 提出的建议 - (str ?? "") 或 `(str || "") - 也是一种有效且非常典型的方法。
@JeanD，使用some 的这个很好的修复，您可以尝试使用可选链接(str) => str?.toLowerCase().indexOf(value?.toLowerCase().trim()) >= 0（或str => (str ?? "").toLowerCase().indexOf((value ?? "").toLowerCase().trim()) >= 0
@sivako 太好了，这现在很完美，是我的首选解决方案：str => str?.toLowerCase().indexOf(value?.toLowerCase().trim()) >= 0

【解决方案2】：

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

喜欢

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

【讨论】：

这仍然返回false。
JeanD 看到我上面的评论，我的错，这个修复单独不起作用。 @tokland 有完整的修复。