js过滤数组的filter用法（附与find的区别）

向右看齐 2024-02-17 13:25 48阅读 0赞

#### **一、使用背景** ####

相信很多前端开发者都有这么一个需求：拿到后端返回的某个字段值，但是这个值并不能直接展示在前端给用户看，我们需要转换格式，比如后端返回 “1”，我们要展示“男”，拿到 “2”，我们要展示“女”。这时就可以使用 filter 方法，注意本文讲的这个 filter 是数组的一个方法，而不是组件中的filters:\{\}，开发者可自行在组件 filters：\{\} 中加入筛选函数去转换格式。

#### **二、filter使用方法与注意事项** ####

直接上代码会更直观：

![f250604f755a450a95d06dec309bb1b5.png][]

如图所示，countryOptions 是要进行筛选的一个数组，它有一个 filter 方法，item 则是countryOptions 里的每一个子项，filter 会遍历这个数组，将满足 item.value === "C" 的子项拿出来放在 filters1 数组中，直到筛选出所有满足条件的子项才结束，因此它返回的一定是个数组，哪怕只有一个子项满足条件。

**注意点**：

1、如果参数只有一个，括号可加可不加，但是参数超过 1 个时必须使用括号；

2、如果执行体加了 \{\}，那么必须要有 return 关键字，否则筛选出的数组永远为空；

3、除了箭头函数，也可以用常规的普通函数去筛选条件，结果是一样的；

4、不论哪种方式去进行筛选，被筛选的原数组是不会被改变的；

5、如果未筛选出指定条件的数组，则返回空数组 \[ \]，所以其结果永远不会为 undefined 或者 null（该条注意点为最近新增，未体现在上面的代码中，开发者们可自行去验证）；

6、如果 countryOptions 是作为下拉框的选项，那么它里面每个对象的 value 必须唯一，图中只是为了举例，不用于实际项目。

#### **三、filter与find的区别** ####

还是直接上代码：

![1147ea19f82e4eb085f0fcc4b59cc578.png][]

从上图可以总结出 filter 与 find 的区别与共同点：

1、filter 遍历数组后会把所有符合条件的子项筛选出来，而 find 按顺序遍历数组后只会把符合条件的第一个子项筛选出来，然后就停止遍历；

2、因为 filter 是筛选出所有满足条件的子项，所以返回的结果一定是个数组对象，哪怕只筛选出了一项（见 filters3）；而 find 因为只返回一项，故返回的结果是一个非数组的对象（见 filters4）；

3、当未筛选出满足指定条件的对象时，filter 会返回空数组 \[ \]，其结果永远不为 undefined 或者null，但是 find 则一定是返回 undefined，这一点在做对象的判断时尤其要注意；

4、共同点就是被筛选的原数组都不会被它们所改变（见第25行代码的输出）。

[f250604f755a450a95d06dec309bb1b5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/a14a0279bf704647b1be6f8dc2ea17e1.png
[1147ea19f82e4eb085f0fcc4b59cc578.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/3d724cb38b63435898c4f2e2aa9bf4ab.png