在 JS 中查找第一个匹配条件的数组元素

作者

目录

Find the First Array Element matching a Condition in JS

  1. 在 JavaScript 中查找匹配条件的第一个数组元素
  2. 查找第一个匹配条件的数组元素for...of
  3. 查找第一个匹配条件的数组元素for

在 JavaScript 中找到匹配条件的第一个数组元素

查找第一个符合条件的数组元素：

  1. 使用该Array.find()方法遍历数组。
  2. 检查每个值是否符合条件。
  3. 该find()方法返回满足条件的第一个数组元素。
索引.js
const arr = [1, 2, 3, 4, 5];

const result = arr.find(element => {
  return element > 2;
});

console.log(result); // 👉️ 3

我们传递给
Array.find()
方法的函数会针对数组中的每个元素进行调用，直到它返回真值或遍历整个数组。

JavaScript 中的假值是：false, null, undefined, 0, ""
（空字符串），NaN（不是数字）。

所有其他值都是真实的。

如果我们传递给该Array.find()方法的函数至少返回一次真值，则该find()方法会短路并返回相应的数组元素。

在示例中，我们检查当前数组元素是否大于2。

数组中第一个大于的元素2是3。

索引.js
const arr = [1, 2, 3, 4, 5];

const result = arr.find(element => {
  return element > 2;
});

console.log(result); // 👉️ 3

一旦满足条件，该find()方法就会短路并返回值。

这是有效的，因为我们不必在找到项目后不必要地继续遍历数组。

如果该函数从不返回真值，则该find()方法将不得不遍历整个数组并返回undefined。

索引.js
const arr = [1, 2, 3, 4, 5];

const result = arr.find(element => {
  return element > 100;
});

console.log(result); // 👉️ undefined

永远不会满足实现的条件，因此该find()方法遍历整个数组并最终返回undefined。

使用 时，您还可以访问当前迭代的索引
Array.find()。

索引.js
const arr = [1, 2, 3, 4, 5];

const result = arr.find((element, index) => {
  console.log(index); // 👉️ 0, 1, 2, 3, 4

  return element > 100;
});

console.log(result); // 👉️ undefined

使用元素、当前索引和正在迭代的数组调用回调函数。

使用条件找到第一个匹配条件的数组元素for...of

这是一个三步过程：

  1. 使用for...of循环遍历数组。
  2. 检查每个元素是否满足条件。
  3. 如果满足条件，则将元素分配给变量并跳出循环。
索引.js
const arr = [1, 2, 3, 4, 5];

let result;

for (const element of arr) {
  if (element > 2) {
    result = element;
    break;
  }
}

console.log(result); // 👉️ 3

Notice that we declared the result variable using let.

Variables declared using const cannot be reassigned.

The for…of statement is
used to loop over iterable objects like arrays, strings, Map, Set and
NodeList objects and generators.

On each iteration, we check if the current element meets a condition.

If the condition is met, we assign the element to a variable and exit the
for...of loop.

The
break
statement enables us to break out of the loop to avoid iterating needlessly
after we’ve found the matching element.

You can also use a basic for loop to find the first array element that meets a
condition.

# Find the First Array Element matching a Condition using for

This is a three-step process:

  1. Use a for loop to iterate over the array.
  2. Check if each element meets the condition.
  3. Assign the matching element to a variable.
index.js
const arr = [1, 2, 3, 4, 5];

let result;

for (let index = 0; index < arr.length; index++) {
  if (arr[index] > 2) {
    result = arr[index];
    break;
  }
}

console.log(result); // 👉️ 3

Instead of using a for...of loop this solution uses a basic for loop to find
the first matching element.

If no element meets the condition, the result variable remains set to
undefined.

Which approach you pick is a matter of personal preference. I’d use the
Array.find() method because I find it more direct and intuitive.

# Additional Resources

You can learn more about the related topics by checking out the following
tutorials: