es6数组方法find() findIndex() filter()的总结

es6数组方法

find()

用法:find详细用法介绍

find() 方法返回通过测试(函数内判断)的数组的第一个元素的值。
find() 方法为数组中的每个元素都调用一次函数执行:
当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素,之后的值不会再调用执行函数。
如果没有符合条件的元素返回 undefined
注意: find() 对于空数组,函数是不会执行的。
注意: find() 并没有改变数组的原始值。

:代码在myArr数组中查找元素值大于4的元素,找到后立即返回。返回的结果为查找到的元素:

const array = [1, 2, 3, 4, 5, 6];
const num = array.find(value => value > 4);
console.log(num);// 5

没有符合元素,返回undefined:

 const array = [1, 2, 3, 4, 5, 6];
 const num = array.find(value => value > 40);
console.log(num);  //undefined

回调函数有三个参数

  1. value:当前的数组元素
  2. index:当前索引值
  3. arr:被查找的数组
 const array = [10, 2, 5, 9, 5, 6];
 const num = array.find((value, index, arr) => {
	 console.log(value, index, arr);
        // 10 0(6)[10, 2, 5, 9, 5, 6]
        //  2 1(6)[10, 2, 5, 9, 5, 6]
        //  5 2(6)[10, 2, 5, 9, 5, 6]
        //  9 3(6)[10, 2, 5, 9, 5, 6]
        //  5 4(6)[10, 2, 5, 9, 5, 6]
        //  6 5(6)[10, 2, 5, 9, 5, 6]
 });

findIndex()

用法:findIndex详细用法介绍

findIndex() 方法返回传入一个测试条件(函数)符合条件的数组第一个元素位置。
findIndex() 方法为数组中的每个元素都调用一次函数执行:
当数组中的元素在测试条件时返回 true 时, findIndex() 返回符合条件的元素的索引位置,之后的值不会再调用执行函数。
如果没有符合条件的元素返回 -1
注意: findIndex() 对于空数组,函数是不会执行的。
注意: findIndex() 并没有改变数组的原始值。

与find的相同和不同

相同:

  1. findIndex()与find()的使用方法相同
  2. indIndex()当中的回调函数也是接收三个参数与find()相同

不同:

  1. 如果没有符合条件元素时findIndex()返回的是-1 而find()返回的是undefined

列:

const array = [1, 2, 3, 4, 5, 6];
const num = array.findIndex(value => {
return value == 4
 });
console.log(num);  //3
const array = [1, 2, 3, 4, 5, 6];
const num = array.findIndex(value => value > 40);
console.log(num);  //-1

filter()

用法:filter详细用法介绍

filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。
注意: filter() 不会对空数组进行检测。
注意: filter() 不会改变原始数组。

与find和findIndex的相同和不同

相同: filter()与find()使用方法也相同 同样都接收三个参数

不同:

  1. 返回值不同在find()只返回第一个满足条件的元素 filter()返回的是一个满足条件所有的数组
  2. 如果条件不满足 filter()返回的是一个空数组 find条件不满足返回undefined

列:

find方法

        const data = [
            {
                name: 'hello12',
                endTime: 1617023820000,
                startTime: 1617023220000,
                timeRange: '21:07 - 21:17',
                errorRate: '1.1822‰',
                pv: 3343680,
                pvError: 3953,

            },
            {
                "items": [{
                    name: '美女1',
                    endTime: 1617023820000,
                    id: '234',
                },
                {
                    name: '美女2',
                    endTime: 1617023820000,
                    id: '234',
                },
                ]
            }
        ]

        const num = data[1].items.find(i => {
            return i.name =='美女1'
        })
        console.log(num) 
        //{name: "美女1", endTime: 1617023820000, id: "234"}

filter方法
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值