美文网首页
ES6中Array.find()和findIndex()函数用法

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

作者: liutianou | 来源:发表于2019-01-09 14:32 被阅读0次

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
    }
]

关于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

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

相关文章

  • react 小知识点总结

    1.获取表单的所有数据 2. 获取表单的部分字段数据 ES6中Array.find()和findIndex()函数...

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

    ES6为Array增加了find(),findIndex函数。find()函数用来查找目标元素,找到就返回该元素,...

  • ES6 Array

    Array.find()与Array.findIndex() find()函数用来在数组中查找目标元素,找到则返回...

  • JS查找数组指定元素

    查找数组指定元素 ES6 findIndex findIndex它会返回数组中满足提供的函数的第一个元素的索引,否...

  • js的find、match、replace、search函数的区

    1、es6新增了find、findIndex函数,find函数查找数组中的元素,找到即返回该元素,找不到则返回un...

  • 数组操作与应用(very important)

    这是我第11篇简书。 一、操作 (一)Array.find/ Array.findIndex find() 方法返...

  • Array.find()和Array.findIndex()

    ES6新增的两个方法,根据回调函数返回作为判断依据,按照数组顺序进行遍历,符合条件(为真)时find()返回该值、...

  • ES6箭头函数

    一、基本用法   ES6中允许使用”箭头“(=>)定义函数:var f = (形参)=>{函数体}  ①当函数体只...

  • findIndex()的用法

    定义和用法findIndex() 方法返回传入一个测试条件(函数)符合条件的数组第一个元素位置。有两点要注意: 当...

  • 数组常用函数整理

    数组函数有:every,find,findIndex,forEachsome函数 every函数

网友评论

      本文标题:ES6中Array.find()和findIndex()函数用法

      本文链接:https://www.haomeiwen.com/subject/ipfgrqtx.html