类型错误：无法读取 JS 中未定义的属性“过滤器”

作者

TypeError: 无法读取 JS 中未定义的属性 ‘filter’

TypeError: Cannot read property ‘filter’ of Undefined in JS

filter()在存储值的变量上调用方法时发生“无法读取未定义的属性（读取‘过滤器’）”错误undefined。

要解决此错误，请确保仅调用filter数组上的方法并将未定义的变量初始化为空数组。

无法读取 udnefined 的属性过滤器

下面是错误如何发生的示例。

索引.js
const arr = undefined;

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

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

将变量初始化为空数组

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

索引.js
const fromDb = undefined;

const arr = fromDb || [];

const result = arr.filter(element => element);
console.log(result); // 👉️ []

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

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

索引.js
const arr = undefined;

const result = (arr || []).filter(element => element);
console.log(result); // 👉️ []

如果arr变量存储的是假值（例如undefined），则表达式将调用filter()空数组上的方法。

检查变量是否存储数组

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

索引.js
const arr = undefined;

if (Array.isArray(arr)) {
  const result = arr.filter(element => element);
  console.log(result);
} else {
  // 👇️ this runs
  console.log('The variable does NOT store an array');
}

该if块仅在arr变量存储数组时运行，否则，
else块运行。

使用三元运算符

您可以使用三元运算符在调用之前检查变量是否存储真值filter()。

索引.js
const arr = undefined;

const result = arr ? arr.filter(element => element) : [];

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

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

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

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

追踪变量赋值的undefined位置

如果错误仍然存​​在，您必须追踪变量在何处被赋值
undefined。

该filter方法仅存在于数组中，因此尝试对任何其他类型的值调用它会导致错误。

一个常见的值来源undefined是将不返回任何内容的函数的输出分配给变量。

许多在适当位置改变对象的内置方法返回undefined。

所有不返回值的 JavaScript 函数都返回undefined。

解决使用类时的错误

使用类时经常发生错误。

filter()在未初始化为数组的类属性上调用该方法会导致错误。

要解决该错误，请将类属性初始化为空数组。

索引.js
class Person {
  // ✅ initialize colors
  colors = [];

  constructor(countries) {
    // ✅ initialize countries from parameters
    this.countries = countries;
  }

  filterColors() {
    this.colors.filter(color => color === 'blue');
  }

  filterCountries() {
    this.countries.filter(country => country === 'Chile');
  }
}

const p1 = new Person(['Chile', 'Mexico', 'Peru']);

p1.filterCountries();
p1.filterColors();

在调用该方法之前，我们将colors和countries属性初始化为空数组filter。