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

一、使用背景

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

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

直接上代码会更直观：

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

注意点：

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

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

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

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

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

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

三、filter与find的区别

还是直接上代码：

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

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

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

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

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