以后我再也不用for找出我要的某一条数据了！

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第1天，点击查看活动详情。

示例数据

let arr = [
    {
        name: 'joop',
        id: 0,
    },
    {
        name: 'dell',
        id: 1
    },
    {
        name: 'jtls',
        id: 2
    }
]

伙计们想一下我要找到数组中的第二条 也就是ID是 1 的数据是不是需要for循环啊就像这样

let itemActive = null
for(let i = 0; i < arr.length; i++){
    let item = arr[i]
    if(item.id === 1){
        itemActive = item
        break;
    }
}
console.log(itemActive); // { name: 'dell', id: 1 }

啊 同事看到这代码 小声的说了一句 这代码是有屎山的基础啊！ 我。。。。。。

划重点喽

Array.protptype.find

数组 实例下方法 find 方法接受两个参数 参数一是 函数迭代器， 参数二是 迭代器函数绑定的 this 注意 如果使用第二个参数来绑定迭代器函数的 this 请不要使用箭头函数

let itemActive = arr.find(function(item, index, arr){
    console.log(this); // { id: 1 }
    return item.id === this.id
}, {id: 1})
console.log(itemActive); // { name: 'dell', id: 1 }

函数迭代器 函数 共接收三个参数

item 迭代的每一项 index 迭代每一项的下标 arr 当前源数据

请注意如果说 没有找到匹配项 就会返回undefined

let itemActive = arr.find(function(item, index, arr){
    console.log(this); // { id: 5 }
    return item.id === this.id
}, {id: 5})
console.log(itemActive); // undefined

Array.protptype.findIndex

findIndex 顾名思义它和 find 的区别就是匹配到返回匹配到的下标 否则返回 -1

let itemActive = arr.findIndex(function(item, index, arr){
    console.log(this); // { id: 5 }
    return item.id === this.id
}, {id: 5})
console.log(itemActive); // -1


----------分割线-------------


let itemActive = arr.findIndex(function(item, index, arr){
    console.log(this); // { id: 1 }
    return item.id === this.id
}, {id: 1})
console.log(itemActive); // 1 下标