Vue.js报错filter is not a function：数组过滤问题求助

咱们先拆解你遇到的两个核心问题：filter is not a function的报错，以及过滤逻辑本身的小疏漏。

为什么会出现filter is not a function？ #

这个错误的核心原因只有一个：你调用filter的this.specialityTest不是数组类型。常见的触发场景有这些：

• 某个操作不小心把this.specialityTest赋值成了非数组（比如对象、null、undefined，甚至字符串）
• 变量初始化时没正确设置为数组（比如一开始是undefined，还没赋值就调用了filter）
• 如果是在Vue/React这类框架中，可能数据响应式处理时发生了意外的类型转换

你可以在调用filter前加一行调试代码，确认变量类型：

console.log(typeof this.specialityTest, Array.isArray(this.specialityTest));

如果Array.isArray返回false，就得先把它恢复成数组类型（比如补全初始化逻辑，或者修正赋值操作）。

修正你的过滤逻辑 #

你的过滤回调有两个明显问题：

1. 回调参数person是数组里的对象（比如{person:'nurse', text:'text1'}），直接和字符串"physician"比较肯定不匹配，应该取对象的person属性
2. 你用了赋值符号=，不是比较运算符===（这会把变量赋值成"physician"，永远返回true，等于没做过滤）

正确的过滤写法应该是：

const filteredArray = this.specialityTest.filter(item => item.person === "physician");

正确复制过滤后的数组 #

你用JSON.parse(JSON.stringify(...))的方式是可行的（适合深拷贝复杂对象），如果数组里的对象没有函数、日期这类特殊类型，用扩展运算符或Array.from会更简洁：

// 方法1：扩展运算符（浅拷贝）
const copiedArray = [...filteredArray];
// 方法2：Array.from（浅拷贝）
const copiedArray = Array.from(filteredArray);
// 方法3：你的原方法（深拷贝）
const copiedArray = JSON.parse(JSON.stringify(filteredArray));

完整的正确示例 #

假设你已经确保this.specialityTest是数组，完整代码如下：

// 先校验数组类型，避免报错
if (Array.isArray(this.specialityTest)) {
  const filteredArray = this.specialityTest.filter(item => item.person === "physician");
  const copiedArray = JSON.parse(JSON.stringify(filteredArray));
  // 后续操作copiedArray即可
} else {
  console.error("specialityTest不是数组，请检查变量赋值");
  // 可以在这里补初始值，比如：
  // this.specialityTest = [{person:'nurse', text:'text1'}, {person:'physician', text:'text1'}, ...];
}

额外排查提示 #

如果是在Vue/React框架中，要确保你在正确的生命周期钩子中访问this.specialityTest——比如如果数据是异步获取的，要等数据加载完成后再调用filter，避免在未初始化的状态下操作。

内容的提问来源于stack exchange，提问作者gileneusz