js过滤数组的filter用法(附与find的区别)

本文介绍了前端开发中如何使用JavaScript数组的filter方法进行格式转换,以及与find方法的区别,包括使用场景、注意事项和返回结果类型。着重强调了作为下拉框选项时value的唯一性要求。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一、使用背景

       相信很多前端开发者都有这么一个需求:拿到后端返回的某个字段值,但是这个值并不能直接展示在前端给用户看,我们需要转换格式,比如后端返回 “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行代码的输出)。

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

【金融科技蚂蚁】

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值