js过滤数组的filter用法(附与find的区别) |
您所在的位置:网站首页 › find和finds的区别和用法 › 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行代码的输出)。 |
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |
CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭 |