过滤包含可选值的对象数组

Question

我有一个对象数组，对象可以有可选的name值或subject值。

同时我有一个过滤字符串。

我需要编写过滤函数，检查这些值中是否包含该字符串。

      const filterString = e.target.value.toLowerCase();
        if (filterString != "") {
          let filteredItemsList = this.state.itemsList.filter(
            el =>
              el.subject
                .toLocaleLowerCase()
                .includes(e.target.value.toLocaleLowerCase()) ||
              el.name
                .toLocaleLowerCase()
                .includes(e.target.value.toLocaleLowerCase())
          );
          this.setState({
            itemsList: filteredItemsList,
            filter: e.target.value.toLocaleLowerCase()
          });

这是我现在拥有的内容。我遇到了错误，例如Cannot read property "toLocaleLowerCase" of undefined，因为我的元素具有名称OR主题，我该如何避免这种情况？

- Alex

---

如果对象没有 name 或 subject，你想要做什么？ - Fahd Lihidheb

我知道这里有类似的问题和答案。查看Typescript 3.7中的?., 或者在引用之前需要显式地测试属性。 - crashmstr

@FahdLihidheb 嗯，什么也不要做，不要改变state.itemList的状态。 - Alex

@crashmstr，实际上我的问题不在于 TypeScript，而是关于正确的算法。 - Alex

搜索结果中可能存在重复项 cannot read property of undefined。 - crashmstr

Answer 1

你可以试试这个。

      const filterString = e.target.value.toLowerCase();
        if (filterString != "") {
          let filteredItemsList = this.state.itemsList.filter(
            el => {
              const inSubject = el.subject ?
                el.subject.toLocaleLowerCase()
                .includes(e.target.value.toLocaleLowerCase()) : false;

              const inName = el.name ?
                el.name.toLocaleLowerCase()
                .includes(e.target.value.toLocaleLowerCase()) : false;

              return inSubject || inName;
          });
          this.setState({
            itemsList: filteredItemsList,
            filter: e.target.value.toLocaleLowerCase()
          });

- Fahd Lihidheb

Answer 2

我认为给项目添加验证可能会起作用

    const filterString = e.target.value && e.target.value.toLowerCase();
    if ( filterString ) {
        const { itemsList } = this.state;
        const filteredItemsList = [...filteredItemsList.filter(
                el => {
                  const inSubject = el.subject &&
                    el.subject.toLocaleLowerCase()
                    .includes(filterString);

                  const inName = el.name &&
                    el.name.toLocaleLowerCase()
                    .includes(filterString));

                  return inSubject || inName;
              })];

       this.setState({
            itemsList: filteredItemsList,
            filter: filterString
       });
    }

- vam

Answer 3

const filterString = e.target.value.toLowerCase();
if (filterString === '') return;
let filteredItemsList = this.state.itemsList.filter(
    el => [el.subject, el.name]
        .some(
            item => item && item
                .toLocaleLowerCase()
                .includes(e.target.value.toLocaleLowerCase())
        )
);
this.setState({
    itemsList: filteredItemsList,
    filter: e.target.value.toLocaleLowerCase(),
});

- Acebee