js数组操作find查找特定值结合es6特性

使用场景

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

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

这个时候肯定有些人想到了使用循环来查找，当然这是一种办法，也可以解决实际需求但是我们需要一种更为高效的方法。其实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}

结合es6的改进

stu.find((element) => (element.name == '李四'))

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

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