JavaScript数组之find——返回第一个符合条件的元素

定义和用法

• find（）方法返回数组内符合条件的第一个元素。
• find() 方法为数组中的每个元素都调用一次函数执行：
  • 当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素，之后的值不会再调用执行函数。
  • 如果没有符合条件的元素返回 undefined。
• 对于空数组，函数不执行。
• find并没有改变数组的原始值。

浏览器支持

浏览器	Chrome	IE	Firefox	Safari	opera
支持版本	45.0	12.0	25.0	7.1	32.0

注意: IE 11 及更早版本不支持 find() 方法。

语法

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

参数

参数	描述
function(currentValue, index,arr)	必填。数组的每个元素都要执行。
thisValue	可选。传递函数的值一般用“this”值。 如果这个参数为空，"undefined" 会传递给 "this" 值。

 function 内传递的参数说明如下表：

参数	描述
currentValue	必填。当前元素。
index	可选。当前元素的索引值。
arr	可选。当前元素所属的数组对象。

thisValue有什么作用？

用于传递值给 function 。

举个例子，以下用 find() 方法，获取年龄大于18岁的第一个元素。

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

这里demo的输出值为 18 。

如果需要向方法传递参数呢？则可以使用 thisValue ，将参数传递给对应的函数（这里指的是 checkAdult ）。然后，在函数内，将传递的参数用 this 表示。对应代码如下：

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

这里输出值为 18 。

技术细节

返回值	返回符合测试条件的第一个数组元素值，如果没有符合条件的则返回  undefined 。
JavaScript版本：	ECMAScript 6

数组的find相关方法

•  filter : 检测数值元素，并返回符合条件所有元素的数组。
•  findIndex :返回符合传入测试（函数）条件的数组元素索引。

参考网址

• https://www.runoob.com/jsref/jsref-find.html