Javascript 在数组映射期间，可选链接与toLowerCase和indexOf结合使用

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

filterProjects（值：字符串）{
返回此.projects.filter(
项目=>
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（值：字符串）{
返回此.projects.filter（项目=>
[project.key，project.name，project.description].map(
str=>str？.toLowerCase（）.indexOf（value.toLowerCase（）.trim（））>=0
)
);
}

我使用可选链接是因为

description

可以为null或未定义

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

---

除了使用“旧”检查，比如

if（str！==undefined）

和

map

返回布尔值数组之类的检查之外，还有什么解决方案呢？

它返回一个布尔值数组，无论什么情况下都是真实的，因此它不是您要寻找的谓词。您需要（如果您计划以旧浏览器为目标，也可以使用lodash/下划线/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
    )
  );
}

---

您可以使用“Nullish合并运算符（？？）

像

---

这仍然会返回

false

always.je并查看我上面的评论，我的错误，仅此修复无法工作@tokland有完整的修复程序。整洁，有效！但是我仍然在想一种摆脱三元运算符的方法。@sivako所提出的-

（str？？）

或`（str | | |“”）-也是一种有效且非常典型的方法。@JeanD，通过使用

一些

，您可以尝试使用可选的链接

（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

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