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

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

JS数组查找元素常用方法总结
indexOf(value,start)
includes(value,start)
find(fun,obj) 不推荐
findIndex(fun,obj) 不推荐
关键字in  不推荐
不推荐find findIndex in的原因

indexOf(value,start)
返回元素所在下标 不存在返回-1

value：查找元素

start：开始查找的位置下标 默认为0  当start为负数时表示从该负数对应的下标元素向后查找  (数组最后一位元素的下标用负数表示为-1 倒数第二位元素表示为-2…以此类推)

例子：


includes(value,start)
判断元素是否存在 返回true/false

value：查找元素

start：开始查找的位置下标 默认为0  当start为负数时表示从该负数对应的下标元素向后查找  (数组最后一位元素的下标用负数表示为-1 -2对应倒数第二位元素…一次类推)

例子：


find(fun,obj) 不推荐
返回第一个符合条件的数组成员 没有返回undefined

fun：回调函数 参数 value：当前元素 index：当前元素下标 array：数组

obj：指定回调函数的对象(可不传)

例子：


findIndex(fun,obj) 不推荐
返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1。

例子：


关键字in  不推荐
判断元素是否存在于数组/对象 返回true/false

例子：


不推荐find findIndex in的原因
会把Number和String相互转换


array.findIndex(function(value,index,array){
    return value == '7'
})
//6

1，indexOf()
let arr = [1, 2, 3, 4, 5, 6];
arr.indexOf(7)  //-1
arr.indexOf(6)  //5

要检索的字符串值出现返回下标，没有出现返回 -1
2，includes()
let arr = [1, 2, 3, 4, 5, 6];
arr.includes(7)  //false
arr.includes(6)  //true

是否包含一个指定的值，如果是返回 true，否则false
3，filter()
let arr = [1, 2, 3, 4, 5, 6];
let find=arr.filter(function(item){
	return item%2===0
})
console.log(find)	//[2, 4, 6]

filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素，不会对空数组进行检测，不会改变原始数组。
4，find()、findIndex()
let arr = [1, 2, 3, 4, 5, 6];
let find1=arr.find(function(item){
	return item==3
})
console.log(find1)	//3
let find2=arr.findIndex(function(item){
	return item==3
})
console.log(find2)	//2

find()直到找出第一个返回值为true的成员，然后返回该成员。如果没有符合条件的成员，则返回undefined,findIndex()返回该成员的下表

假设现有一个数组为a[2,4,5,-5,6,3]

使用find()方法查找数组中小于0的第一个成员
a.find( (n)=> n<0 ) 

得到的值为 -5

使用findIndex()方法查找数组中小于0的第一个成员的位置
a.findIndex( (n)=> n<0 ) 

得到的值为 3

使用includes()判断一个数组是否含有一个值
[1,2,3].includes(2)

返回true