ES6中Array.find()和findIndex()函数的用法详解

ES6为Array增加了find()，findIndex函数。find()函数用来查找目标元素，找到就返回该元素，找不到返回undefined，而findIndex()函数也是查找目标元素，找到就返回元素的位置，找不到就返回-1。下面通过实例详解，需要的朋友参考下吧

find()函数用来查找目标元素，找到就返回该元素，找不到返回undefined。

findIndex()函数也是查找目标元素，找到就返回元素的位置，找不到就返回-1。

他们的都是一个查找回调函数。

查找函数有三个参数。

value：每一次迭代查找的数组元素。

index：每一次迭代查找的数组元素索引。

arr：被查找的数组。

假如我们给vue组件绑定了一个班级的学生列表数据。其数据结构可能如下格式，如果你想从以下数据中查找出姓名为李四的学生的信息。

var stu = [
    {
        name: '张三',
        gender: '男',
        age: 20
    },
    {
        name: '王小毛',
        gender: '男',
        age: 20
    },
    {
        name: '李四',
        gender: '男',
        age: 20
    }
]

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17

这个时候肯定有些人想到了使用循环来查找，当然这是一种办法，也可以解决实际需求但是我们需要一种更为高效的方法。其实js的数组操作方法真的非常非常多，多的你一时间感觉不知如何是好。那么我们就这个场景来看看常用的方法吧。

关于find()的使用

find()是用来干什么的呢？

关于find()是干什么的我们来看看来自mozilla的 MDN Web docs的原文吧

The find() method returns the value of the first element in the array that satisfies the provided testing function. Otherwise undefined is returned. 
find()方法返回数组中符合测试函数条件的第一个元素。否则返回undefined 
在这儿需要注意的几个点： 
①、第一个元素 
②、测试函数

如何使用find()方法

既然需要测试函数

function getStu(element){
   return element.name == '李四'
}

stu.find(getStu)
//返回结果为
//{name: "李四", gender: "男", age: 20}

• 1
• 2
• 3
• 4
• 5
• 6
• 7

结合es6的改进

stu.find((element) => (element.name == '李四'));返回的是{name: "李四", gender: "男", age: 20}这个元素stu.findIndex((element)=>(element.name =='李四'));返回的是索引下标：2

• 1

在这儿主要是使用了es6的箭头函数。使用起来非常非常方便。es6为js创造了很多可能喜欢的可以去看看es6的新特性。而且很多浏览器对es6的支持程度已经非常好了。

这儿的find的使用只是工作中用到了分享一下。当然还有很多其他的方法，比如fill filter等。更多的请查看mdn的文档https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find