ES8 的 Array.prototype.findIndex() 方法使用教程-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，通常会遇到需要在数组中查找某个元素的情况。在 ES5 中，为了解决这个问题，我们可以使用 Array.prototype.indexOf() 方法；而在 ES6 中，我们可以使用 Array.prototype.find() 方法。但是，ES8 引入的 Array.prototype.findIndex() 方法，提供了更为简洁高效的解决方案。

方法介绍

Array.prototype.findIndex() 方法用于查找数组中满足条件的元素，并返回它的索引值。如果没有找到，返回 -1。

该方法接受一个回调函数作为参数，用于定义查找条件。回调函数接受三个参数：当前遍历的元素，元素索引和数组本身。函数返回值应该是一个布尔值，以指示是否满足查找条件。

使用教程

下面介绍如何使用 Array.prototype.findIndex() 方法来处理数组中找元素的问题。

基本用法

首先，我们来看一个基本的示例：

const arr = [2, 4, 6, 8];
const index = arr.findIndex(item => item === 6);
console.log(index); // 2

上述代码中，我们定义了一个数组 arr，并使用 findIndex() 方法查找元素 6 的索引。回调函数 item => item === 6 表示如果当前遍历的元素等于 6，就返回 true；否则返回 false。

由于 6 存在于数组的第 3 个位置，因此最终输出结果为 2。

处理对象数组

在实际开发中，我们通常会遇到对象数组的情况。Array.prototype.findIndex() 方法同样适用于处理对象数组。

const arr = [
  { id: 1, name: '张三' },
  { id: 2, name: '李四' },
  { id: 3, name: '王五' }
];

const index = arr.findIndex(item => item.id === 2);
console.log(index); // 1

上述代码中，我们定义了一个对象数组 arr，并使用 findIndex() 方法查找 id 为 2 的元素的索引。回调函数 item => item.id === 2 表示如果当前遍历的元素的id值等于 2，就返回 true；否则返回 false。

由于对象数组中的每个元素都是一个对象，因此我们可以使用对象的属性来作为查找条件。

处理空值

在处理数组时，可能会遇到元素为空的情况。我们可以使用默认值来处理这种情况。

const arr = [1, , 2, 3, 4, , 5];
const index = arr.findIndex(item => Number.isNaN(item));
console.log(index); // -1

上述代码中，我们定义了一个数组 arr，其中存在两个空元素。我们使用 findIndex() 方法查找数组中是否存在 NaN，但发现查找结果为 -1。这是因为空元素不是一个值，而是一个不存在的“位置”，因此 Number.isNaN() 方法无法对其进行计算。

因此，在使用 findIndex() 方法时，我们需要注意空元素的处理。

处理重复元素

在数组中可能会有重复的元素，那么我们应该如何处理这种情况呢？

const arr = [1, 2, 3, 4, 4, 5];
const index = arr.findIndex((item, index, arr) => arr.indexOf(item) !== index);
console.log(index); // 3

上述代码中，我们定义了一个数组 arr，其中存在重复的元素 4。我们使用 findIndex() 方法查找第一个重复元素的索引。

回调函数 (item, index, arr) => arr.indexOf(item) !== index 表示如果当前遍历的元素在数组中的索引不等于它的位置索引，就返回 true；否则返回 false。

由于重复元素 4 出现在数组的第 4 个和第 5 个位置，因此最终输出结果为 3（即第一个重复元素的索引）。

处理不可变数组

在处理不可变数组时，我们需要使用原始数组的副本来操作。可以使用 spread operator（展开运算符）来创建数组的副本。

const originalArr = [1, 2, 3, 4];
const arr = [...originalArr];

const index = arr.findIndex(item => item === 3);
console.log(index); // 2

上述代码中，我们创建了一个原始数组 originalArr，并使用展开运算符来创建副本数组 arr。我们使用 findIndex() 方法查找元素 3 的索引。在此过程中，原始数组 originalArr 保持不变。

总结

通过 ES8 的 Array.prototype.findIndex() 方法，我们可以更为简洁高效地在数组中查找元素。在使用该方法时，需要注意空元素和重复元素的处理，以及在处理不可变数组时需要创建副本。

通过本文的介绍，相信读者已经掌握了 Array.prototype.findIndex() 方法的使用方法，希望本文可以对读者的前端开发工作有所帮助。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/64cd94d41519ea946c162df8

ES8 的 Array.prototype.findIndex() 方法使用教程