美文网首页
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的支持程度已经非常好了。

    相关文章

      网友评论

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

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