• 技术文章 >web前端 >前端问答

    es6中find和filter有什么区别

    长期闲置长期闲置2022-05-05 17:07:02原创193

    es6中find和filter的区别:1、在不改变数组的情况下查找数组内符合条件的内容时,find方法返回的结果是对象,filter方法返回的结果是数组;2、若没有值满足测试函数,find方法返回的是未定义,filter方法返回一个空数组。

    本教程操作环境:windows10系统、ECMAScript 6.0版、Dell G3电脑。

    es6中find和filter有什么区别

    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有什么区别的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:ES6
    上一篇:什么是es6中的构造函数 下一篇:es6怎么判断是否是数组
    VIP课程(WEB全栈开发)

    相关文章推荐

    • 【腾讯云】年中优惠,「专享618元」优惠券!• es6装饰器有什么用• es6中from方法怎么用• es6数组怎么修改每个元素• es6中引入了什么作用域• es6数组怎么求平均数
    1/1

    PHP中文网