filter() 、find()、findIndex()

filter()

定義和用法

filter() 方法創建一個新的數組，新數組中的元素是通過檢查指定數組中符合條件的所有元素。

注意： filter() 不會對空數組進行檢測。

注意： filter() 不會改變原始數組。

 

語法

array.filter(function(currentValue,index,arr), thisValue)

 

返回值：	返回數組，包含了符合條件的所有元素。如果沒有符合條件的元素則返回空數組。

實例

返回數組 ages 中所有元素都大於 18 的元素:

var ages = [32, 33, 16, 40];

function checkAdult(age) {
    return age >= 18;
}

function myFunction() {
    document.getElementById("demo").innerHTML = ages.filter(checkAdult);
}

輸出結果為:

32,33,40

 

 

---

find()

定義和用法

find() 方法返回通過測試（函數內判斷）的數組的第一個元素的值。

find() 方法為數組中的每個元素都調用一次函數執行：

• 當數組中的元素在測試條件時返回 true 時, find() 返回符合條件的元素，之后的值不會再調用執行函數。
• 如果沒有符合條件的元素返回 undefined

注意: find() 對於空數組，函數是不會執行的。

注意: find() 並沒有改變數組的原始值。

語法

array.find(function(currentValue, index, arr),thisValue)

返回值：	返回符合測試條件的第一個數組元素值，如果沒有符合條件的則返回 undefined。

實例

獲取數組中年齡大於 18 的第一個元素

var ages = [3, 10, 18, 20];
 
function checkAdult(age) {
    return age >= 18;
}
 
function myFunction() {
    document.getElementById("demo").innerHTML = ages.find(checkAdult);
}

輸出結果：

18

 

 

---

findIndex()

定義和用法

findIndex() 方法返回傳入一個測試條件（函數）符合條件的數組第一個元素位置。

findIndex() 方法為數組中的每個元素都調用一次函數執行：

• 當數組中的元素在測試條件時返回 true 時, findIndex() 返回符合條件的元素的索引位置，之后的值不會再調用執行函數。
• 如果沒有符合條件的元素返回 -1

注意: findIndex() 對於空數組，函數是不會執行的。

注意: findIndex() 並沒有改變數組的原始值。

語法

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

返回值：	返回符合測試條件的第一個數組元素索引，如果沒有符合條件的則返回 -1。

實例

獲取數組中年齡大於等於 18 的第一個元素索引位置

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

輸出結果：

2

 

 

 

 

 

---

總結

filter()：從數組查找所有滿足條件的值

find()：從數組查找第一個滿足條件的值

findIndex()：從數組查找第一個滿足條件的值的下標