JavaScript中的数组find()函数返回数组中通过所提供的函数测试的第一个元素的值。让我们深入了解一下数组find()方法。
Javascript数组查找
Javascript数组find()是一个内置函数，用于获取数组中符合所提供条件的第一个元素的值。find()函数接受函数和thisValue作为参数。find()函数接受元素、索引 和数组。
array.find()方法检查所有的数组元素，只要第一个元素满足条件，就会打印。如果有一个以上的项目满足条件，则返回第一个满足条件的项目。
如果你需要找到的项目在数组中的索引，请使用findIndex() 。
如果你需要找到一个值的索引，使用ArrayArray.prototype.indexOf()。如果你需要查找该值是否存在于数组中，使用Array.prototype.includes()。
假设你想找到数组中的第一个奇数。 参数函数检查传递给它的参数是否是一个奇数。
find() 函数为数组中的每一个项目调用一个参数函数。参数函数返回真值的第一个奇数被find()函数报告为答案。
语法
数组find()方法的语法如下：
array.find(function(element, index, array),thisValue)
参数
该函数需要以下三个参数：
元素。
这是函数正在处理的当前项目
索引
这是函数正在处理的当前项目的索引
另一个参数是thisValue： 它用于告诉函数在执行一个参数函数时使用数组的值。
例子
在这个例子中，我们将使用Node.js来运行JavaScript代码。
因此，让我们创建一个名为app.js的文件并添加以下代码：
// app.js
var data = [20, 18, 15, 10, 9];
var found = data.find(function(element) {
return element < 12;
});
console.log(found);
所以，我们已经写了一个条件。如果任何一个数组项满足这个条件，它将返回 该元素的值 ，而对数组内元素的进一步检查将被停止。
在这里，10 和9 的值都小于12， 但是，我们仍然得到了10 ，因为10的值在数组中是第一个。
所以只有10会返回，而不是9。如果在数组内找到满足条件的元素，它将立即返回，而不需要进一步检查：
➜ es git:(master) ✗ node app
10
➜ es git:(master) ✗
ES6数组find()
我们可以用ES6标准写上述函数，就像下面这样：
// app.js
const data = [20, 18, 15, 10, 9];
let found = data.find(element => element < 12);
console.log(found);
答案将和前面的一样，但它的语法要轻得多：
现在让我们来看看发现未定义的情况。
// app.js
const data = [20, 18, 15, 10, 9];
let found = data.find(element => element < 9);
console.log(found);
在上面的例子中，所有的元素都大于9；这就是为什么输出将是未定义的：
纯函数
Javascript数组查找方法是一个纯函数，因为它不会改变被调用的数组。相反，它将返回一个满足其条件的值。
使用find()查找数组中的一个元素
现在，写下下面的代码：
// app.js
const fruits = [
{name: 'apples', quantity: 2},
{name: 'bananas', quantity: 0},
{name: 'cherries', quantity: 5}
];
const getFruit = fruits.find(fruit => fruit.name === 'apples');
console.log(getFruit);
在这里，如果成功满足条件，将只返回一个对象：
es git:(master) ✗ node app
{ name: 'apples', quantity: 2 }
➜ es git:(master) ✗
所以，每当我们有一个场景，需要得到一个数组中的第一个元素的值，并满足所提供的测试函数，我们可以在JavaScript中使用Array.find()方法。
JavaScript数组的搜索
要在JavaScript中搜索数组中的一个元素，可以使用数组find()方法。find()方法检查一个数组是否包含该元素。 让我们举个例子，看看这个人是否是成年人。如果我们从数组中找到第一个满足条件的值，它就会返回。
看，我们正在使用javascript find()函数在数组中搜索一个项目：
// app.js
let ages = [6, 18, 19, 21];
let checkAdult = age => {
return age >= 18;
}
console.log(ages.find(checkAdult));
在上面的代码中，如果找到第一个大于或等于18的数组元素，那么它将在输出中返回。现在，请看输出：
➜ es git:(master) ✗ node app
18
➜ es git:(master) ✗
：在JavaScript数组中找到一个元素
要找到一个数组是否包含JavaScript数组中的一个元素，可以使用数组includes()方法。Javascript includes()是一个内置的数组 函数，可以确定一个数组是否包含指定的元素。如果包含一个元素，它返回真，否则返回假， 不包括数组中的元素。
从ECMAScript 2018开始，我们可以使用Javascriptincludes() 函数。
如果你想支持IE或其他旧的浏览器，那么可以试试下面的代码：
// app.js
function include(arr,obj) {
return (arr.indexOf(obj) != -1);
}
在上面的代码中，我们使用了Javascript的indexOf 方法。所以，这就是如何在javascript中搜索数组中的值。
在JavaScript数组中寻找对象
要在一个JavaScript数组中找到一个对象，可以使用array.find()方法。find()方法在数组中搜索所提供的对象，如果该方法找到它，它就会返回该对象。
假设我有一个未识别对象的数组，其中包含有名字的对象的数组，我们需要得到 "名字 "为 "某个字符串"的对象。 请看下面的编程例子：
// app.js
search = (key, inputArray) => {
for (let i=0; i < inputArray.length; i++) {
if (inputArray[i].name === key) {
return inputArray[i];
}
}
}
let arr = [
{ name:"Krunal", value:"Engineer", other: "Author" },
{ name:"Ankit", value:"MCA", other: "Author" }
];
let resultObject = search("Krunal", arr);
console.log(resultObject);
好的，所以在上面的代码中，首先，我们有一个用户定义的函数，叫做搜索函数，它接受两个参数。一个是输入对象的键，另一个是一个输入数组：
它遍历inputArray，并将key与Array的name属性进行比较。如果匹配，那么它就返回整个对象。请看下面的输出。
我们也可以使用find()函数来获得相同的值。请看下面的代码。
// app.js
let arr = [
{ name:"Krunal", value:"Engineer", other: "Author" },
{ name:"Ankit", value:"MCA", other: "Author" }
];
let obj = arr.find(data => data.name === 'Krunal');
console.log(obj);
它将给我们同样的输出，但它是在ES6风格的箭头函数。
在JavaScript中寻找一个字符串
要在JavaScript中找到一个字符串，请使用字符串search()方法。Javascript search()方法搜索一个字符串的指定值，并返回匹配的位置。搜索值可以是一个字符串或一个正则表达式。如果没有找到匹配，该方法返回-1。
寻找数组中的素数
下面的例子找到数组中属于质数的元素（如果没有质数则返回未定义）：
// app.js
const isPrime = (element, index, array) => {
let start = 2;
while (start <= Math.sqrt(element)) {
if (element % start++ < 1) { return false; } } return element > 1;
}
console.log([4, 6, 8, 11].find(isPrime));
console.log([9, 1, 21, 13].find(isPrime));
请看输出：
➜ es git:(master) ✗ node app
11
13
➜ es git:(master) ✗
使用ES6箭头函数和解构
我们可以通过javascript find()函数在Javascript中使用ES6的箭头函数和对象析构。这样一来，代码看起来更清晰，错误更少，而且容易理解。请看下面的代码：
// app.js
const fav = [
{ actress: 'Millie Bobby Brown', age: 16 },
{ actress: 'Kiernan Shipka', age: 19 },
{ actress: 'Emma Watson', age: 29 }
];
const result = fav.find(({ actress }) => actress === 'Millie Bobby Brown');
console.log(result)
输出
node app
{ actress: 'Millie Bobby Brown', age: 16 }
如果上述代码中的女演员是Millie Bobby Brown，它将给我们提供该对象的两个属性；否则，它将给我们提供undefined。
多重填充
JS数组find()方法已经被添加到ECMAScript 2015规范中，可能不是在所有的JavaScript实现中都可用。然而，你可以使用polyfill Array .prototype.find下面的片段：
if (!Array.prototype.find) {
Object.defineProperty(Array.prototype, 'find', {
value: function (predicate) {
// 1. Let O be ? ToObject(this value).
if (this == null) {
throw TypeError('"this" is null or not defined');
}
var o = Object(this);
// 2. Let len be ? ToLength(? Get(O, "length")).
var len = o.length >>> 0;
// 3. If IsCallable(predicate) is false, throw a TypeError exception.
if (typeof predicate !== 'function') {
throw TypeError('predicate must be a function');
}
// 4. If thisArg was supplied, let T be thisArg; else let T be undefined.
var thisArg = arguments[1];
// 5. Let k be 0.
var k = 0;
// 6. Repeat, while k < len
while (k < len) {
// a. Let Pk be ! ToString(k).
// b. Let kValue be ? Get(O, Pk).
// c. Let testResult be ToBoolean(? Call(predicate, T, « kValue, k, O »)).
// d. If testResult is true, return kValue.
var kValue = o[k];
if (predicate.call(thisArg, kValue, k, o)) {
return kValue;
}
// e. Increase k by 1.
k++;
}
// 7. Return undefined.
return undefined;
},
configurable: true,
writable: true
});
}
如果你想支持不支持Object.defineProperty的过时的JavaScript引擎，最好完全不要polyfill Array.prototype，因为你不能让它成为非枚举的。
浏览器支持
| 特点 | 基本支持 |
|---|---|
| 浏览器 | 45 |
| 边缘 | 有 |
| 火狐 | 25 |
| Internet Explorer | 没有 |
| 浏览器 | 32 |
| Safari | 8 |
| 安卓WebView | 是的 |
| 安卓版Chrome浏览器 | 是 |
| 边缘手机 | 是 |
| 安卓版火狐浏览器 | 4 |
| 安卓版Opera | 是 |
| iOS Safari | 8 |
