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的原文吧

如何使用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的文档