在JavaScript / HTML中，数组查找第一个符合要求元素

在 JavaScript 中，要从数组中找出第一个符合特定条件的元素，最简洁、现代的方法是使用数组的 find() 方法。

`Array.prototype.find()`

find() 方法对数组中的每个元素执行一次提供的回调函数，直到找到第一个使回调函数返回 true 的元素。然后返回该元素的值；如果没有符合条件的元素，则返回 undefined。

语法：

javascript 复制代码

const result = array.find((element, index, array) => {
  // 返回 true 表示当前元素符合要求
});

参数：

element：当前遍历到的元素。
index（可选）：当前元素的索引。
array（可选）：调用 find() 的数组本身。

返回值： 第一个满足条件的元素，否则 undefined。

示例

javascript 复制代码

const numbers = [5, 12, 8, 130, 44];

// 找出第一个大于10的元素
const firstLarge = numbers.find(num => num > 10);
console.log(firstLarge); // 12

// 找出第一个偶数
const firstEven = numbers.find(num => num % 2 === 0);
console.log(firstEven); // 12

// 如果没有符合要求的元素
const none = numbers.find(num => num > 200);
console.log(none); // undefined

手动实现（使用循环）

如果你需要兼容非常古老的浏览器（如 IE），或者想理解底层逻辑，也可以使用 for 循环手动实现：

javascript 复制代码

function findFirst(array, condition) {
  for (let i = 0; i < array.length; i++) {
    if (condition(array[i], i, array)) {
      return array[i];
    }
  }
  return undefined;
}

// 使用
const result = findFirst(numbers, num => num % 2 === 0);
console.log(result); // 12

注意事项

find() 在找到第一个匹配项后立即停止遍历，因此性能较好。
回调函数中返回 true（或任何真值）即表示匹配，返回 false（或假值）则继续搜索。
find() 是 ES6（ECMAScript 2015）引入的方法，现代浏览器和 Node.js 均支持。如果需要兼容旧环境，可以引入 polyfill（如 core-js）。

总之，find() 是解决"找出第一个符合要求的元素"最直接、最推荐的方式。

在JavaScript / HTML中，数组查找第一个符合要求元素

Array.prototype.find()

示例

手动实现（使用循环）

相关方法

注意事项

`Array.prototype.find()`