js数组查找方法 find() findIndex()

ヤッハロー、Kaiqisanすうう、一つふつうの学生プログラマである,今天继续讲讲数组查询方法,,这俩方法更加适合于数组。

没错,就是数组专用的方法

find(callback, thisVal) : 自动迭代,查找自己在数组中想要的成员,所有数据类型的成员都可以查找。第一个参数是回调函数,里面填写筛选的条件,第二个参数表示执行回调时用作this 的对象。(后面会详细解释第二个参数),这个方法有返回值,为符合条件的数组成员,需要相应的参数接收。如果没有符合条件的成员,就返回undefined(不返回)。

let arr = ['usa', 'usb', 'usc', 'use']
// 回调支持三个参数,分别为 当前迭代的成员,当前迭代成员的下标,迭代数组
let res = arr.find((item, index, arr) => { 
    console.log(item, index, arr)
    return item === 'usc'
}) 
console.log(res)

// ---------输出结果
// 'usa' 0 ['usa', 'usb', 'usc', 'use']
// 'usb' 1 ['usa', 'usb', 'usc', 'use']
// 'usc' 2 ['usa', 'usb', 'usc', 'use']
// 'usc'
/* 也可以找对象 */
let arr = [{name: 'kaiqisan', id: 10001}, {name: 'tom', id: 10002}, {name: 'jimy', id: 10003}, {name: 'john', id: 10004}]
let res = arr.find(item => item.name === 'tom') // 箭头函数简写(只有箭头函数可以)
console.log(res);

// ----------输出结果 
// {name: 'tom', id: 10002}

这个方法的基本的使用方法已经讲清楚了,至于怎么使用, 就全靠大家的想象力了(不是),再根据实际的情况合理挑选这个方法。

现在我们来详细讲一下这个第二个参数有什么左右,今天在搜集资料的时候,发现网上关于这个第二个参数的资料是少得可怜,只有MDN和菜鸟官网还勉强有简单的文字讲解,但是,光光有文字,没有例子,大伙看了还是会一知半解,即使理解了,也不会有太深的印象,今天我就简单说明一下这个第二个参数的工作原理把。

经过实践之后,我发现这个参数是为了ES5语法准备的,因为ES5无法把callback书写成箭头函数,只能写成一般的函数,

// ES6语法
arr.find((item) => { 
    // xxx
}) 

// ES5语法
arr.find(function(item) {
    // xxx
})

再看一眼我前面对第二个参数做出的表述----第二个参数表示执行回调时用作this 的对象,有时候,这个find方法会被直接使用于别的的函数内

function app() {
    
    arr.find(function(item) {
    // xxx
	})
}

首先,我们需要理解什么是this,这里就不详细展开解释,一句话来说就是 this的最终指向的是那个调用它的对象。在上面代码所示的情况下,如果您还是要执意在回调函数内使用this的话,由于find内部的回调函数并没有被哪个对象调用,所以它指向的是window,这可能会造成一些错误。所以第二个参数会指定一些您希望传入的并被find内部回调函数执行的参数。

function app() {
    var arr = [{ uid: 1, name: 'kaiqisan' }, { uid: 2, name: 'tom' }, 
               { uid: 3, name: 'john' }, { uid: 4, name: 'kitty' }]
    var res = arr.find(function(item) {
        return item.uid === this.uid // this.uid就是3
    }, {uid: 3})
    console.log(res)
}
app()
// 结果为 { uid: 3, name: 'john' }

当然这里只是举个例子,使用了静态的参数,大家在实际情况中,在第二个参数填入 this , 从而达到箭头函数的效果,自动继承了父元素的this指针。

但是现在ES6都出来了,推荐大家直接使用箭头函数,避免更多的麻烦,需要注意的就是如果使用了ES6的箭头参数之后,再使用这个第二个参数的话,它就会失效,就是因为箭头函数自动帮您继承父对象的this指针了。这个第二个参数留给不得不使用ES5的时候使用(浏览器太辣鸡不支持ES6)

findIndex(callback, thisVal): 和find方法唯一不同的就是这个方法返回的是数组符合条件的成员下标而不是符合条件的成员,如果没有符合条件的成员,就返回**-1**。

let res = ['a', 'b', 'c'].findIndex(item => {
    return item === 'b'
})
console.log(res) // 1

注意点

上述俩方法只能查找数组成员,不能查找字符串的字符,否则必报错。字符串那么多查询方法,随便挑一个它不香吗?