ES6中Array.find()和findIndex()函數(shù)用法詳解

yuanzhanghu 發(fā)布于2019-08-26 13:44 / 997人閱讀

摘要：張三男王小毛男李四男關(guān)于的使用方法返回?cái)?shù)組中符合測(cè)試函數(shù)條件的第一個(gè)元素。否則返回在這兒需要注意的幾個(gè)點(diǎn)第一個(gè)元素測(cè)試函數(shù)李四返回結(jié)果為李四男結(jié)合的改進(jìn)李四返回的是李四男這個(gè)元素李四返回的是索引下標(biāo)

ES6為Array增加了find()，findIndex函數(shù)。find()函數(shù)用來(lái)查找目標(biāo)元素，找到就返回該元素，找不到返回undefined，而findIndex()函數(shù)也是查找目標(biāo)元素，找到就返回元素的位置，找不到就返回-1。
他們的都是一個(gè)查找回調(diào)函數(shù)。
查找函數(shù)有三個(gè)參數(shù)。
value：每一次迭代查找的數(shù)組元素。
index：每一次迭代查找的數(shù)組元素索引。
arr：被查找的數(shù)組。

假如我們給vue組件綁定了一個(gè)班級(jí)的學(xué)生列表數(shù)據(jù)。其數(shù)據(jù)結(jié)構(gòu)可能如下格式，如果你想從以下數(shù)據(jù)中查找出姓名為李四的學(xué)生的信息。

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

關(guān)于find()的使用

find()方法返回?cái)?shù)組中符合測(cè)試函數(shù)條件的第一個(gè)元素。否則返回undefined
在這兒需要注意的幾個(gè)點(diǎn)：
①、第一個(gè)元素
②、測(cè)試函數(shù)

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

結(jié)合es6的改進(jìn)

stu.find((element) => (element.name == "李四")); //返回的是{name: "李四", gender: "男", age: 20}這個(gè)元素
stu.findIndex((element)=>(element.name =="李四"));  //返回的是索引下標(biāo)：2