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数组查找方法 find() findIndex() - Kaiqisan相关推荐

js 数组遍历方法详解（map、filter、find、findIndex、reduce）
目录前言 map map是什么 map方法的结构及入参语法糖 map一般不改变原数组 filter 说明例子 find 和 findIndex 说明例子 reduce 说明例子尾言前言 ...
在js对象上绑定js数组原生方法
在js对象上绑定js数组原生方法在js对象上绑定数组方法会给当前对象添加一个lenght:0属性例: var o = {}; [].pop.call(o) console.log(o)//返回结果 ...
JS数组去重方法记录
js数组去重方法 1.遍历数组,建立新数组,利用indexOf判断是否存在于新数组中,不存在则push到新数组,最后返回新数组代码如下(示例): function getArray(ar) {va ...
js数组查找最接近_js 数组快速查询指定字符串方法
有一个动态数组,[adfjsf,ad2fjsf,adf32jsf,ad4fjsf,ad523fjsf,a523dfjsf,ad423fjsf,adfjs234f,......] 我想查查数组是否有ab ...
js数组所有方法(超级详细，超细总结)
数组 1. 数组转字符串 1.1 toString() 方法 toString() 在把数组转换成字符串时,首先要将数组的每个元素都转换为字符串.当每个元素都被转换为字符串时,才使用逗号进行分隔,以列 ...
JS进阶篇--JS数组reduce()方法详解及高级技巧
基本概念 reduce() 方法接收一个函数作为累加器(accumulator),数组中的每个值(从左到右)开始缩减,最终为一个值. reduce 为数组中的每一个元素依次执行回调函数,不包括数组中被 ...
JS数组去重方法小结
JS数组去重看了网上很多数组去重方法,用的比较常见的大概就几种,今天想自己来做一个总结. 部分内容参考该博客 1 . 在原数组上操作(基本方法) 思路:利用循环嵌套,判断数组中每个元素与其后面的元素 ...
js数组查找最接近_在JavaScript数组中找到最小元素的位置
在JavaScript数组中找到最小元素的位置注* 之前有篇文章介绍过数据遍历的性能比较: for in 比for loop慢至少20倍 ,这是另外一篇比较数组查找性能的例子,通过对手工/inde ...
JS进阶篇--JS数组reduce()方法详解及高级技巧 1
基本概念 reduce() 方法接收一个函数作为累加器(accumulator),数组中的每个值(从左到右)开始缩减,最终为一个值. reduce 为数组中的每一个元素依次执行回调函数,不包括数组中被 ...

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

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

注意点

js数组查找方法 find() findIndex() - Kaiqisan相关推荐

最新文章

热门文章