詳解ES6陣列方法find()、findIndex()的總結

本文主要講解ES6陣列方法 find() 與 findIndex() ，關於JS的更多陣列方法，可參考以下：
①JavaScript 內建物件之-Array
②ES5新增陣列方法（例：map()、indexOf()、filter()等）
③ES6新增字串擴張方法includes()、startsWith()、endsWith()
1. find()
該方法主要應用於查詢 第一個 符合條件的陣列元素，即返回通過測試（函式內判斷）的陣列的第一個元素的值。
它的引數是一個回撥函式,為陣列中的每個元素都呼叫一次函式執行。在回撥函式中可以寫你要查詢元素的條件，當條件成立為 true 時，返回該元素，之後的值 不會 再呼叫執行函式。 如果沒有 符合條件的元素，返回值 為undefined 。
例：
① 以下程式碼在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,2,3,4,5,6,7,8,9]; var v=myArr.find(value=>value>10); console.log(v);
結果：
③ 它的回撥函式有三個引數。value：當前的陣列元素。index：當前索引值。arr：被查詢的陣列。
例：
查詢索引值為5的元素，結果顯示6：
const myArr=[1,2,3,4,5,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() 返回 （ ），之後的值 再呼叫執行函式。如果 符合條件的元素返回 （ ）。 findIndex()與find()的 使用方法相同 ，findIndex()當中的回撥函式也是接收三個引數，與find()相同。
，findIndex()當中的回撥函式也是接收三個引數，與find()相同。 findIndex()方法實現是通過迴圈遍歷查詢。應用場景廣泛，可以查詢大於等於小於，表示式可以隨便寫。實際上相當於一個for迴圈，只不過找到了你不需要自己退出。
語法：
array.findIndex(function(currentValue, index, 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,2,3,4,5,6,7,8,9]; function bigNum(ele){ return ele > 6; } console.log(myArr.findIndex(bigNum));
結果（也就是陣列中第一個大於6的數，即「7」所在位置的索引）：
例③：可以用來返回符合大於輸入框中數字的陣列索引
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); }
注意:
findIndex() 對於空陣列，函式是不會執行的。
findIndex() 並沒有改變陣列的原始值。