npm 包 find-index 使用教程

find-index 是一个 JavaScript 工具库，它提供了一个函数 findIndex，可以帮助开发者在数组中查找指定元素，并返回其索引值。

安装

使用 npm 命令进行安装：

npm install find-index

使用方法

在 JavaScript 代码中引入 findIndex 方法：

const findIndex = require('find-index');

然后，你就可以使用 findIndex 方法来查找数组中的指定元素了。这个方法接受两个参数：待查找的数组和一个回调函数。

下面是一个简单的示例，使用 findIndex 查找数组中第一个大于等于 3 的元素的索引值：

const arr = [1, 2, 3, 4, 5];
const index = findIndex(arr, function (value) {
  return value >= 3;
});
console.log(index); // 2

这里，回调函数会被传入数组中的每一个元素，直到找到第一个满足条件的元素为止。一旦找到了符合条件的元素，findIndex 就会返回它的索引值。

如果数组中不存在符合条件的元素，findIndex 将返回 -1。

深度解析

回调函数的参数

回调函数可以接受三个参数：当前正在处理的元素、当前元素的索引和整个数组。例如：

const arr = [1, 2, 3, 4, 5];
const index = findIndex(arr, function (value, index, array) {
  console.log(`正在处理第 ${index} 个元素：${value}`);
  console.log(`整个数组为：${array}`);
  return value >= 3;
});
console.log(index); // 2

这里，我们新增了两行代码，用于在回调函数中输出当前正在处理的元素和整个数组。运行结果如下：

正在处理第 0 个元素：1
整个数组为：1,2,3,4,5
正在处理第 1 个元素：2
整个数组为：1,2,3,4,5
正在处理第 2 个元素：3
整个数组为：1,2,3,4,5
2

可以看到，findIndex 方法会将当前正在处理的元素、当前元素的索引和整个数组都传递给回调函数。

修改回调函数中的 this 指向

如果需要在回调函数中使用 this 关键字，可以使用 findIndex 方法的第三个参数来改变它的指向。例如：

-- -------------------- ---- -------
----- --- - -
  ---- --
  ------ -------- ------- -
    ------ ----- -- ---------
  -
--
----- --- - --- -- -- -- ---
----- ----- - -------------- ---------- -----
------------------- -- -

这里，我们定义了一个包含 num 属性和 check 方法的对象 obj，并将 check 方法作为回调函数传递给了 findIndex 方法。为了让 this 关键字在回调函数中指向 obj 对象，我们将 obj 对象作为第三个参数传递给了 findIndex 方法。

更改查找顺序

默认情况下，findIndex 方法会从数组的第一个元素开始查找，并返回第一个符合条件的元素的索引值。如果需要更改查找顺序，可以使用 reverse 参数来反转数组的顺序。例如：

const arr = [5, 4, 3, 2, 1];
const index = findIndex(arr, function (value) {
  return value >= 3;
}, null, true);
console.log(index); // 2

这里，我们定义了一个倒序排列的数组，并使用 true 参数来反转数组的查找顺序

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