所属分类:web前端开发
es6中find和filter的区别:1、在不改变数组的情况下查找数组内符合条件的内容时,find方法返回的结果是对象,filter方法返回的结果是数组;2、若没有值满足测试函数,find方法返回的是未定义,filter方法返回一个空数组。
前端(vue)入门到精通课程:进入学习
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API调试工具:点击使用
本教程操作环境:windows10系统、ECMAScript 6.0版、Dell G3电脑。
1. find 和 filter 都是不改变原数组的方法,都是在不改变数组的情况下查找数组内符合条件的内容,区别是find返回的是对象,filter返回的是数组。
示例如下:
const list = [{'name':'1',index:1},{'name':'2'},{'name':'1'}]
let list2 = list.find(i=>i.name==='1')
let list3 = list.filter(i=>i.name==='1')
console.log(list); [ { name: '1', index: 1 }, { name: '2' }, { name: '1' } ]
console.log(list2); { name: '1', index: 1 }
console.log(list3);[ { name: '1', index: 1 }, { name: '1' } ]
登录后复制
find只查出第一个符合条件的结果,像例子里是直接返回了一个对象而不是数组!,而filter返回全部结果仍然是数组。
注意:find()找到第一个元素后就不会在遍历其后面的元素,所以如果数组中有两个相同的元素,他只会找到第一个,第二个将不会再遍历了。
2. 综上来看find的查询效率更高一些,所以在数组的中的数据唯一的话最好使用find
find()
ES6 find() 方法返回通过测试函数的第一个元素的值。如果没有值满足测试函数,则返回 undefined。
语法
以下语法中使用的箭头函数。
find((element) => { /* ... */ } )
find((element, index) => { /* ... */ } )
find((element, index, array) => { /* ... */ } )
登录后复制
filter()
filter() 方法创建一个包含所有通过测试函数的元素的新数组。如果没有元素满足测试函数,则返回一个空数组。
语法
filter((element) => { /* ... */ } )
filter((element, index) => { /* ... */ } )
filter((element, index, array) => { /* ... */ } )
登录后复制
共点
高阶函数:这两个函数都是高阶函数。
区别
1、通过一个测试功能
find() 返回第一个元素。
filter() 返回一个包含所有通过测试函数的元素的新数组。
2、如果没有值满足测试函数
find() 返回未定义;
filter() 返回一个空数组;
【相关推荐:javascript视频教程、web前端】
以上就是es6中find和filter有什么区别的详细内容,更多请关注zzsucai.com其它相关文章!