过滤并非所有键都存在的对象数组 - JavaScript [重复]答案

【问题标题】：Filter array of objects in which not all keys are present - JavaScript [duplicate]过滤并非所有键都存在的对象数组 - JavaScript [重复]
【发布时间】：2022-01-02 13:24:48
【问题描述】：

我有一个对象数组：

[
  {
      "id": "1",
      "LB1": "Kod produktu: PMPSB216IN80",
      "Type": "Figurki"
  },
  {
      "id": "2",
      "Type": "Głowa Do Stylizacji"
  },
  {
      "id": "3",
      "LB1": "Kod produktu: 97834",
      "Type": "Pluszak"
  },
]

比我定义一个字符串：'97834'

我想根据 LB1 值过滤数组：

filteredProducts = productList.filter(product => product.LB1.replace('Kod produktu: ', '').toLowerCase() === this.props.searchTerm.toLowerCase());

但是，正如您在上面看到的 - 并非所有对象都包含此 LB1 - 并且该函数正在引发错误：

Test.js:101 Uncaught TypeError: Cannot read properties of undefined (reading 'replace')

【问题讨论】：

问题是什么？只需添加一个if，在替换之前测试该属性是否存在...

标签： javascript

【解决方案1】：

您可以在过滤器函数中添加一个条件来检查该属性是否存在。在这里，我使用in 运算符来验证这一点。

const productList = [
  {
      "id": "1",
      "LB1": "Kod produktu: PMPSB216IN80",
      "Type": "Figurki"
  },
  {
      "id": "2",
      "Type": "Głowa Do Stylizacji"
  },
  {
      "id": "3",
      "LB1": "Kod produktu: 97834",
      "Type": "Pluszak"
  },
]

const searchTerm = '97834' /*  this.props.searchTerm.toLowerCase() */;

const filteredProducts = productList.filter(product => 'LB1' in product && product.LB1.replace('Kod produktu: ', '').toLowerCase() === searchTerm );

console.log('output', filteredProducts);

【讨论】：

【解决方案2】：

检查 LB1 是否存在 - 如果不存在，将其过滤掉，就好像它与您的搜索词不匹配（这里我使用的是 logical AND：

filteredProducts = productList.filter(product => product.LB1 != null && product.LB1.replace('Kod produktu: ', '').toLowerCase() === this.props.searchTerm.toLowerCase());

【讨论】：

如果product.LB1 === 0?
公平点@Clive！它应该读取 product.LB1 != null 来检查 null 和 undefined
如果你想获得技术（让我们面对现实，我们在这里），那也是不对的。 null 的值表示该属性已设置。对于健壮的代码，请使用typeof product.LB1 !== ‘undefined’ 进行该方法。使用in 或可选链接可以说都更具可读性
绝对看你从这里来。不过，我很好奇，对于仅在此处检查 nullish（甚至为 0）就可以满足我们过滤掉不包含 LB1 字符串属性的对象的要求，您会怎么说？我们不会得到 replace 不是函数的 TypeError 吗？
我想如果product.LB1 === 1 说，我们还是会得到那个，所以我想没有实际意义