本文主要講解ES6陣列方法find()與findIndex()，關於JS的更多陣列方法，可參考以下：

①JavaScript 內建物件之-Array

②ES5新增陣列方法（例：map()、indexOf()、filter()等）

③ES6新增字串擴張方法includes()、startsWith()、endsWith()

1. find()

該方法主要應用於查詢第一個符合條件的陣列元素，即返回通過測試（函式內判斷）的陣列的第一個元素的值。

它的引數是一個回撥函式,為陣列中的每個元素都呼叫一次函式執行。在回撥函式中可以寫你要查詢元素的條件，當條件成立為true時，返回該元素，之後的值不會再呼叫執行函式。如果沒有

例：

① 以下程式碼在myArr陣列中查詢元素值大於5的元素，找到後立即返回，並不會繼續往下執行。返回的結果為查詢到的元素：

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

結果：

② 如果把條件改為>10，沒有符合元素，則返回undefined:

const myArr=[1,9];
var v=myArr.find(value=>value>10);
console.log(v); 

結果：

③ 它的回撥函式有三個引數。value：當前的陣列元素。index：當前索引值。arr：被查詢的陣列。

例：

查詢索引值為5的元素，結果顯示6：

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

結果：

注意：

• find() 對於空陣列，函式是不會執行的。
• find() 並沒有改變陣列的原始值。

2. findIndex()

• findIndex() 方法返回傳入一個測試條件（函式）符合條件的陣列第一個元素位置。
• 當陣列中的元素在測試條件時返回 true 時,findIndex() 返回符合條件的元素的索引位置（注：find()返回的是元素），之後的值不會再呼叫執行函式。如果沒有符合條件的元素返回 -1（注：find()返回的是undefined）。
• findIndex()與find()的使用方法相同，findIndex()當中的回撥函式也是接收三個引數，與find()相同。
• findIndex()方法實現是通過迴圈遍歷查詢。應用場景廣泛，可以查詢大於等於小於，表示式可以隨便寫。實際上相當於一個for迴圈，只不過找到了你不需要自己退出。

語法：

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

例①：

const myArr=[
 {
 id:1,Name:"張三"
 },{
 id:2,Name:"李四"
 },{
 id:3,Name:"王五"
 },{
 id:4,Name:"趙六"
 }
];
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); 

結果：

例②：

const myArr = [1,9];
function bigNum(ele){
 return ele > 6;
}
console.log(myArr.findIndex(bigNum));

結果（也就是陣列中第一個大於6的數，即“7”所在位置的索引）：

例③：可以用來返回符合大於輸入框中數字的陣列索引

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

注意:

• findIndex() 對於空陣列，函式是不會執行的。
• findIndex() 並沒有改變陣列的原始值。

到此這篇關於詳解ES6陣列方法find()、findIndex()的總結的文章就介紹到這了,更多相關ES6 find() findIndex()內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！