Website-Suche

javascript - Optionales Chaining in Kombination mit toLowerCase und indexOf während Array map

Für ein Autocomplete-Eingabefeld suche ich während der Eingabe in den Projekteigenschaften. Jetzt möchte ich diesen Code verbessern

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
  );
}

mit diesem:

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

Ich verwende die optionale Verkettung, weil description null oder undefined sein kann.

Aber es funktioniert nicht, das bedeutet, dass die Funktion das Array immer unverändert zurückgibt. Außerdem, wenn der Wert in der Beschreibung eines Elements gefunden wird, wird das Array nicht nur auf dieses Element gefiltert.

Was könnte die Lösung sein, außer die „alten“ Prüfungen wie if (str !== undefined) und Ähnliches zu verwenden?

Antwort #1

Dieses map gibt ein Array von Booleans zurück, das immer wahr ist, egal was passiert, also ist es nicht das Prädikat, das du suchst. Du brauchst Array.some (auch in lodash/underscore/ramda, falls du alte Browser unterstützen willst). Lass mich auch das innere Prädikat ein wenig anpassen:

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

Antwort #2

Sie können den `Nullish-Koaleszenz-Operator (??)` verwenden

mögen

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

Verwandte Artikel