ES6 summary "suggestions collection" of array methods find(), findindex()

Hello everyone , I meet you again , I'm your friend, Quan Jun .

This article mainly explains ES6 Array methods find() And findIndex(), About JS More array methods for , Refer to the following ：

①JavaScript Built in objects -Array

②ES5 New array method （ example ：map()、indexOf()、filter() etc. ）

③ES6 New string expansion method includes()、startsWith()、endsWith()

---

1. find()

• This method is mainly used to find first Qualified array elements , That is, return to pass the test （ In function judgment ） The value of the first element of the array .
• Its argument is a callback function , Call the function once for each element in the array to execute . In the callback function, you can write the condition you want to find the element , When the condition is true when , Return the element , The value after Can't Then call the execution function . without Elements that meet the conditions , Return value by undefined.

example ： ① The following code is myArr The value of the search element in the array is greater than 5 The elements of , Return as soon as found , It's not going to continue . The returned result is the found element ：

const myArr=[1,2,3,4,5,6,7,8,9];
var v=myArr.find(value=>value>5);
console.log(v);

Copy

result ：

② If the condition is changed to >10, No matching element , Then return to undefined:

const myArr=[1,2,3,4,5,6,7,8,9];
var v=myArr.find(value=>value>10);
console.log(v); 

Copy

result ：

③ Its callback function has three parameters .value： The current array element .index： Current index value .arr： The array to be looked up .

example ： The lookup index value is 5 The elements of , Results show 6：

const myArr=[1,2,3,4,5,6];
var v=myArr.find((value,index,arr)=>{ 
   
    return index===5;
});
console.log(v);

Copy

result ：

Be careful ：

• find() For an empty array , Functions do not execute .
• find() It doesn't change the original value of the array .

2. findIndex()

• findIndex() Method returns a test condition passed in （ function ） Qualified array first Element location .
• When an element in an array tests a condition, it returns true when , findIndex() return The index position of the eligible element （ notes ：find() What is returned is the element ）, The value after Can't Then call the execution function . If No, The qualified element returns -1（ notes ：find() The return is undefined）.
• findIndex() And find() Of Use the same way ,findIndex() The callback function also receives three parameters , And find() identical .
• findIndex() The method is implemented by looping through the search . Wide application scenarios , You can find greater than or equal to less than , Expressions can be written casually . It's actually equivalent to a for loop , It's just that you don't need to quit when you find it .

grammar ：

array.findIndex(function(currentValue, index, arr), thisValue);

Copy

example ①：

const myArr=[
    { 
   
        id:1,
        Name:" Zhang San "
    },
    { 
   
        id:2,
        Name:" Li Si "
    },
    { 
   
        id:3,
        Name:" Wang Wu "
    },
    { 
   
        id:4,
        Name:" Zhao Liu "
    }
];
var i0=myArr.findIndex((value)=>value.id==1);
console.log(i0); 
var i1=myArr.findIndex((value)=>value.id==2);
console.log(i1); 
var i2=myArr.findIndex((value)=>value.id==3);
console.log(i2); 
var i3=myArr.findIndex((value)=>value.id==4);
console.log(i3); 
var i4=myArr.findIndex((value)=>value.id==5);
console.log(i4); 

Copy

result ：

example ②：

const myArr = [1,2,3,4,5,6,7,8,9];
function bigNum(ele){ 
   
    return ele > 6;
}
console.log(myArr.findIndex(bigNum));

Copy

result （ That is, the first one in the array is greater than 6 Number of numbers , namely “7” The index of the location ）：

example ③： It can be used to return an array index that matches a number larger than the number in the input box

var ages = [2,4,6,8,10];
 
function checkAdult(age) { 
   
    return age >= document.getElementById("ageToCheck").value;
}
 
function myFunction() { 
   
    document.getElementById("demo").innerHTML = ages.findIndex(checkAdult);
}

Copy

Be careful :

• findIndex() For an empty array , Functions do not execute .
• findIndex() It doesn't change the original value of the array .

---

Publisher ： Full stack programmer stack length , Reprint please indicate the source ：https://javaforall.cn/130822.html Link to the original text ：https://javaforall.cn