find()和findIndex()函数详解

今天我在拿数组中的存在的某一项索引时，我用了filter()，结果折腾了半天还是没求出索引，结果询问同事，他说你直接用findIndex()就可以了，一语点醒梦中人，可能平时ES6的这些函数用的少，根本就想不起来用这个。find直接就找出这项了，何必用filter过滤拿呢？

话不多说，下面总结一下这2个方法~

ES6为Array增加了find()，findIndex函数。find()函数用来查找目标元素(查找符合条件的第一个元素)，找到就返回该元素，找不到返回undefined，而findIndex()函数也是查找目标元素(查找符合条件的第一个元素)，找到就返回元素的位置，找不到就返回-1。
下面通过实例详解

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

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

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

查找函数有三个参数。

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

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

arr：被查找的数组。

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

var stu=[
{
   name:'张三',
   gender:'男',
   age:25
},
{
   name:'李四',
   gender:'男',
   age:28
},
{
   name:'王五',
   gender:'男',
   age:27
}
    ]

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

关于find()的使用

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

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

如何使用find()方法
既然需要测试函数

function getStu(element){
  return element.name =='李四'
}
stu.find(getStu)
//返回结果为 {name:"李四"，gender:'男',age=28}

下图为在线测试，有图有真相

结合es6的改进（箭头函数）

stu.find(element=>element.name=='李四')  
//返回的是{name:"李四"，gender:'男',age=28}
stu.findIndex(element=>element.name=='李四')
//返回的是索引下标：1
 

同样有图有真相：

es6为js创造了很多可能，而且很多浏览器对es6的支持程度已经非常好了，要想起来用ES6的新特性啊~~

关于ES6箭头函数返回值的问题

 const fun1 = ()=>1+2 //执行后结果 3
 const fun2 = () => {1+2} //执行后结果 undefined
 const fun3 = () => {return 1+2 } // 执行后结果 3

总结：如果箭头后有{ }，则{}内有return 则返回return后的值，没有 则返回undefined
如果箭头后没有{ }如第一种简写写法，其实是return 1+2