ES7 中的 Array.prototype.find 和 Array.prototype.findIndex 方法详解
ES7 中新增了两个 Array.prototype 上的方法，分别是 Array.prototype.find 和 Array.prototype.findIndex，它们可以很方便地用来查找数组中符合条件的元素，本文将详细介绍这两个方法。
Array.prototype.find 方法
Array.prototype.find 方法用于找出符合条件的第一个元素，并返回该元素，如果没有找到，返回 undefined。它的语法为：
array.find(callback[, thisArg])
其中，callback 是一个用来测试数组中每个元素的函数，它可以接受三个参数：
element：表示当前处理的元素；index：表示当前处理的元素下标；array：表示原数组。
thisArg 是执行回调函数时使用的 this 值。
下面是一个查找数组中第一个大于 5 的元素的例子：
const arr = [2, 3, 4, 5, 6, 7, 8];
const result = arr.find((element, index, array) => {
return element > 5;
});
console.log(result); // 6Array.prototype.findIndex 方法
Array.prototype.findIndex 方法与 Array.prototype.find 方法类似，也是用于查找符合条件的元素，但是它返回的是符合条件的元素在数组中的下标，如果没有找到，返回 -1。它的语法为：
array.findIndex(callback[, thisArg])
其中，callback 和 thisArg 的含义与 Array.prototype.find 方法相同。
下面是一个查找数组中第一个大于 5 的元素的下标的例子：
const arr = [2, 3, 4, 5, 6, 7, 8];
const result = arr.findIndex((element, index, array) => {
return element > 5;
});
console.log(result); // 4实战应用
这两个方法可以用于很多实际场景中，下面介绍两个例子。
搜索
用 Array.prototype.find 方法实现搜索功能非常方便。例如，我们可以实现一个搜索框，在用户输入关键字后，在列表中查找符合条件的记录并展现出来。示例代码如下：
-- -------------------- ---- -------
------ ----------- ---------------- --
--- ----------
--------------
---------------
-------------
-------------------
-----
--------
----- ----------- - ---------------------------------------
----- ---- - -----------------------------------------------------------
------------------------------------- - -- -
----- ------- - ---------------
----------------------------- -- -
-- -------------------------------- --- --- -
-- ----------
------------------ - -------
- ---- -
-- ---------
------------------ - --------
-
---
---
---------删除
用 Array.prototype.findIndex 方法实现删除功能也非常方便。例如，我们可以实现一个 todoList，用户点击删除按钮时，删除对应的记录。示例代码如下：
-- -------------------- ---- -------
--- --------------
------ ---------- ------- -------------------------------
------ --- ------- -------------------------------
------ ---- ------- -------------------------------
-----
--------
----- -------- - ------------------------------------
---------------------------------- - -- -
-- ----------------- --- --------- -
----- ----- - -----------------------
----- ----- - ------------------------------------------------
----- ------ - ---------------------- -- -- -
------ - --- --------------
---
-- ------- --- --- -
------------------------------------
-
-
---
---------总结
Array.prototype.find 和 Array.prototype.findIndex 是两个非常实用的方法，它们能够很方便地查找符合条件的元素，简化了代码的编写。需要特别注意的是，这两个方法在旧版本的浏览器中可能不受支持，需要使用 polyfill 进行兼容性处理。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649ba6b148841e989486c845