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);
}

输出结果：

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);
}

输出结果：

总结

filter()：从数组查找所有满足条件的值

find()：从数组查找第一个满足条件的值

findIndex()：从数组查找第一个满足条件的值的下标