学习熟练使用ES6-Array.find()

这是我参与11月更文挑战的第20天，活动详情查看：2021最后一次更文挑战

熟练使用 ES6 及更高版本对于我们在项目开发中可提高开发效率! 本文来学习 ES6 对数组的扩展方法: find() & findIndex()

前面文章学习了 JavaScript 中操作数组的一些方法(Array.splice()/slice()/map()/reduce()等高阶函数), JavaScript 并不完美但是不影响其运行, 这里学习其中的一些神奇"bug"直达列表

ES6 - find() & findIndex()

这两个方法是 ES6 对数组方法的扩展, 在 ECMAScript 6 规范中被加入

Array.prototype.find()

find() 数组实例的方法, 用于返回数组中满足提供的测试函数的第一个元素的值。

它的参数是一个回调函数，所有数组成员依次执行该回调函数，直到找出第一个返回值为 true 的成员，然后返回该元素。如果没有符合条件的成员，否则返回 undefined.

通过简单代码来了解::

const array = [12, 1, 8, 16, 2, 211 130, 66, 1000];

const findFirst = array.find(item => item > 13);

console.log(findFirst); // 找到了第一个 16 满足传递的参数(回调函数) 大于13.

上面方法用于找到第一个大于 13 的元素, 并返回.

find() 回调函数的参数

find 方法的回调函数可以接受三个参数，依次为当前的值、当前的位置和原数组. 如下

;[2, 1, 3, 10, 13].find(function (value, index, arr) {
  return value > 9
}) // 10

findIndex()

findIndex() 方法的用法与 find 方法非常类似, 但是它是返回数组中找到的元素的位置(索引)，而不是其值。

如果找不到就返回 -1. (是不是有点熟悉: indexOf)

;[2, 1, 3, 10, 13].findIndex(function (value, index, arr) {
  return value > 9
}) // 返回的是 10 的索引: 3

两者可识别 NaN 啦

上面提到的indexOf() 方法无法识别数组的 NaN, 所以 ES6 扩展的方法需要可以识别了吧! 故 find() 和 findIndex()都可以识别 NaN.

;[NaN]
  .indexOf(NaN) // -1

  [NaN].findIndex((item) => Object.is(NaN, item))
// 0

findIndex() 方法借助 Object.is 方法做到

学习熟练使用ES6-Array.find()

ES6 - find() & findIndex()

Array.prototype.find()

find() 回调函数的参数

findIndex()

两者可识别 NaN 啦

相关阅读文章列表

参考文档