类型错误：过滤器不是 JavaScript 中的函数

作者

目录

TypeError: filter is not a function in JavaScript

  1. 类型错误：过滤器不是 JavaScript 中的函数
  2. 类型错误：object.filter 不是 JavaScript 中的函数

TypeError: filter 不是 JavaScript 中的函数

filter()当我们对非数组类型的值调用方法时，会发生“过滤器不是函数”错误。

要解决此错误，请在调用该方法之前将值转换为数组filter
，或确保仅对数组调用该方法。

typeerror 过滤器不是一个函数

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

索引.js
const arr = {};

// ⛔️ Uncaught TypeError: arr.filter is not a function
const result = arr.filter(element => element % 2 === 0);

我们

在导致错误的对象上调用了Array.filter()方法。

要解决该错误，console.log您调用该方法的值filter并确保它是一个有效的数组。

索引.js
const arr = [4, 6, 11];

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

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

或者，您可以使用Array.isArray方法检查值是否为数组

。

索引.js
const arr = null;

const result = Array.isArray(arr) ? arr.filter(num => num % 2 === 0) : [];

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

我们使用了三元运算符，它与语句非常相似if/else。

如果值是一个数组，我们返回调用该方法的结果filter，否则，我们返回一个空数组。

这样，即使值不是数组，您也不会收到错误。

如果该值是从远程服务器获取的，请通过将其记录到控制台来确保它是预期的类型。此外，请确保在调用该方法之前已将其解析为原生 JavaScript 数组filter。

filter如果您尝试在对象上
使用该方法，请使用该Object.values()方法获取对象值的数组并
filter在该数组上调用该方法。

索引.js
const obj = {a: 2, b: 4, c: 13};

const values = Object.values(obj);
console.log(values); // 👉️ [2, 4, 13]

const result = values.filter(num => num % 2 === 0);
console.log(result); // 👉️ [2, 4]

该Object.values()方法返回对象值的数组。然后我们可以安全地调用filter数组上的方法来过滤出结果。

如果您有类似数组的对象，请Array.from()在调用该方法之前使用该方法将其转换为数组filter。

索引.js
const set = new Set([8, 2, 3]);

const result = Array.from(set).filter(element => element % 2 === 0);
console.log(result); // 👉️ [8, 2]

在调用方法之前，我们将值转换为数组filter()。

如果错误仍然存​​在，请检查console.log您调用该方法的值并确保它是一个数组。 filter

如果该值是一个对象，您可能应该访问具有数组值的特定属性。

TypeError: object.filter 不是 JavaScript 中的函数

出现“object.filter is not a function”错误是因为该filter方法未在对象上实现。

要过滤对象，请使用该Object.values()方法获取对象值的数组，然后filter()对值数组调用该方法。

类型错误对象过滤器不是函数

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

索引.js
const obj = {
  user1: {id: 1, name: 'Alice'},
  user2: {id: 2, name: 'Bob'},
  user3: {id: 3, name: 'Charlie'},
};

// ⛔️ TypeError: object.filter is not a function
const result = obj.filter(value => {
  return value.id === 2;
});

要解决该错误，请使用
Object.values()
方法获取对象值的数组并

对该数组调用Array.filter()方法。

索引.js
const obj = {
  user1: {id: 1, name: 'Alice'},
  user2: {id: 2, name: 'Bob'},
  user3: {id: 3, name: 'Charlie'},
};

// 👇️ [{id: 1, name: 'Alice'}, {id: 2, name: 'Bob'}, ...]
console.log(Object.values(obj));

const result = Object.values(obj).filter(value => {
  console.log(value);
  return value.id === 2;
});

// 👇️ [{id: 2, name: 'Bob'}]
console.log(result);

该Object.values()方法返回对象值的数组，我们可以在该数组上调用该Array.filter()方法。

该filter方法返回一个新数组，其中仅包含满足所提供函数实现的条件的元素。

但是，如果您只需要一个匹配条件的对象而不是对象数组，则可以使用
Array.find()
方法。

索引.js
const obj = {
  user1: {id: 1, name: 'Alice'},
  user2: {id: 2, name: 'Bob'},
  user3: {id: 3, name: 'Charlie'},
};

// 👇️ if you only need the object that matches the condition
const found = Object.values(obj).find(value => {
  return value.id === 2;
});

// 👇️ {id: 2, name: 'Bob'}
console.log(found);

该find()方法返回满足条件的第一个元素（对象）。

请注意，如果回调函数在任何迭代中都没有返回真值，则该find()方法返回undefined。