迹忆客 专注技术分享

对 null 值调用 filter() 方法时会发生“Cannot read properties of null (reading 'filter')”错误。

要解决此错误，请将变量的值初始化为空数组或确保仅对数组调用 filter 方法。

下面是产生上述错误的一个示例

const arr = null;

// ⛔️ TypeError: Cannot read properties of null (reading 'filter')
arr.filter(element => element);

我们在导致错误的空值上调用了 Array.filter() 方法。

将变量初始化为空数组#

解决该错误的一种方法是使用逻辑或 || 运算符将变量初始化为空数组。

const fromDb = null;

const arr = fromDb || [];

const result = arr.filter(element => {
  return element % 2 === 0;
});

如果左边的值是假的（例如 null），逻辑 OR || 运算符返回右边的值。

我们还可以在调用 filter() 方法之前提供空数组的回退。

const arr = null;

const result = (arr || []).filter(element => {
  return element % 2 === 0;
});

console.log(result); // 👉️ []

如果 arr 变量存储了一个虚假值（例如 null），则该表达式会在一个空数组上调用 filter() 方法。

在调用过滤器之前检查值是否为数组

在调用 filter() 方法之前，您可以使用 Array.isArray() 方法检查变量是否存储数组。

const arr = null;

if (Array.isArray(arr)) {
  const result = arr.filter(element => {
    return element % 2 === 0;
  });
  console.log(result);
}

if 块仅在 arr 变量存储数组时运行。

使用三元运算符解决错误

我们也可以使用三元运算符来解决错误。

const arr = null;

const result = arr
  ? arr.filter(element => {
      return element % 2 === 0;
    })
  : [];

console.log(result); // 👉️ []

三元运算符与 if/else 语句非常相似。

如果问号前的表达式的计算结果为真值，则返回冒号左侧的值，否则返回冒号右侧的值。

如果存储在 arr 变量中的值是 falsy（例如 null），我们返回一个空数组，否则，我们返回调用 filter 方法的结果。

使用可选链 (?.) 解决错误

如果引用为空，我们还可以使用可选的链接运算符进行短路。

const arr = null;

const result =
  arr?.filter(element => {
    return element % 2 === 0;
  }) || [];

console.log(result); // 👉️ []

如果左侧的值为空值（空值或未定义），则可选链接 ?. 运算符会短路，而不是抛出错误。

总结

对空值调用 filter() 方法时会发生“Cannot read properties of null (reading 'filter')”错误。

要解决此错误，请将变量的值初始化为空数组或确保仅对数组调用 filter 方法。