ES6 数组方法 find 和 findIndex 区别

1. 前言

J**aScript 的 Array 对象方法太多了，短时间内记不住的，可以每天学几个，日积月累，积少成多 !

ES6 中新增了很多实用的数组方法，array.find() 和 array.findIndex 就是其中两个

array.find() 方法用于获取数组中满足指定条件的第一个元素的值

array.findIndex() 方法用于获取数组中满足指定条件的第一个元素的索引

1. const array = [
2. { id: 1, name: 'tom' },
3. { id: 2, name: 'jerry' },
4. { id: 3, name: 'maria' },
5. ]

2. array.find()

完整形式

1. // item 数组元素
2. // index 数组索引
3. // array 当前元素所属数组
4. // thisValue 参数1的函数体中的this指向,默认是Window对象
5. // 注意: 其中 index, array, thisValue 都是可选参数,大多数情况下都是只使用 item
6. array.find(function(item, index, array) { }, thisValue)

关于 thisValue 参数的用法

1. array.find(function (item, index, array) {
2. // 省略 thisValue 参数时, this 指向 Window 对象
3. console.log(this)
4. })
6. const user = { name: 'liang' }
7. array.find(function (item, index, array) {
8. // 此时 this 指向 user 变量,
9. // 特别注意: 当前函数必须为普通函数,不能用箭头函数,懂的都懂
10. console.log(this)
11. }, user)

最常见的用法

1. // 查找数组元素中 name 为 jerry 元素
2. // 找到返回该元素, 否则返回 undefined
3. const item = array.find(item => item.name == 'jerry')

也可以传入一个函数名称，效果是一样的

1. function jerryInfo(item) {
2. return item.name == 'jerry';
3. }
4. const item = array.find(jerryInfo)

3. array.findIndex()

array.findIndex() 参数同 array.find() 一致，都是用于查找满足指定条件的数组中的第一个元素，区别是当能查找的到时, find 返回的是数组元素，findIndex 返回的是数组索引；当查找不到时，find 返回 undefined，findIndex 返回 -1

1. const index = array.findIndex(item => item.name == 'jerry')
2. console.log(index) // 1
3. const index = array.findIndex(item => item.name == 'cat')
4. console.log(index) // -1