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

yuanzhanghu 发布于2019-08-26 13:44 / 976人阅读

摘要：张三男王小毛男李四男关于的使用方法返回数组中符合测试函数条件的第一个元素。否则返回在这儿需要注意的几个点第一个元素测试函数李四返回结果为李四男结合的改进李四返回的是李四男这个元素李四返回的是索引下标

ES6为Array增加了find()，findIndex函数。find()函数用来查找目标元素，找到就返回该元素，找不到返回undefined，而findIndex()函数也是查找目标元素，找到就返回元素的位置，找不到就返回-1。
他们的都是一个查找回调函数。
查找函数有三个参数。
value：每一次迭代查找的数组元素。
index：每一次迭代查找的数组元素索引。
arr：被查找的数组。

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

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

关于find()的使用

find()方法返回数组中符合测试函数条件的第一个元素。否则返回undefined
在这儿需要注意的几个点：
①、第一个元素
②、测试函数

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

结合es6的改进

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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/109423.html

【深度长文】JavaScript数组所有API全解密

摘要：关于我的博客掘金专栏路易斯专栏原文链接深度长文数组全解密全文共字，系统讲解了数组的各种特性和。构造器构造器用于创建一个新的数组。中声明的数组，它的构造函数是中的对象。本文首发于CSDN网站，下面的版本又经过进一步的修订。关于我的博客：louis blog 掘金专栏：路易斯专栏原文链接：【深度长文】JavaScript数组全解密全文共13k+字，系统讲解了JavaScrip...

Mr_zhang 2019-08-20 16:13 评论0 收藏0
ES6数组 - 新增的数组接口方法

摘要：一返回符合条件的第一个元素方法接收个参数，第一个参数为一个回调函数，第二个参数指定回调函数里的。其中，回调函数本身接受三个参数元素的值，元素的下标，数组本身回调函数的功能逻辑是想要寻找的元素应当满足的某种条件。一：find() 返回符合条件的第一个元素find方法接收2个参数，第一个参数为一个回调函数，第二个参数指定回调函数里的this。大概如下：find(function(valu...

caikeal 2019-08-26 10:30 评论0 收藏0
es6常用数组操作及技巧汇总

摘要：检测数组或者检测对象的原型链是否指向构造函数的对象或者终极大招注意不可以用此方法检查常用方法合并多个数组，返回合并后的新数组，原数组没有变化。返回值是由被删除的元素组成的一个数组。定义数组 const array = [1, 2, 3]; 或者 const array = new Array(); array[0] = 1; 建议尽量使用第一种形式定义数组，采用new的形式在大量的数...

Noodles 2019-08-22 11:18 评论0 收藏0
es6常用数组操作及技巧汇总

摘要：检测数组或者检测对象的原型链是否指向构造函数的对象或者终极大招注意不可以用此方法检查常用方法合并多个数组，返回合并后的新数组，原数组没有变化。返回值是由被删除的元素组成的一个数组。定义数组 const array = [1, 2, 3]; 或者 const array = new Array(); array[0] = 1; 建议尽量使用第一种形式定义数组，采用new的形式在大量的数...

jk_v1 2019-08-29 14:02 评论0 收藏0