在 ES9 中了解 Array.prototype.findIndex() 和 Array.prototype.fill() 方法-JavaScript中文网-JavaScript教程资源分享门户

在 JavaScript 中，Array 类型是最基础也是最常用的数据类型之一。由于在实际开发中，很少有单纯对数组进行简单的读取和写入操作，在一些数据处理和算法实现中，数组元素的查找、填充等操作也同样是非常常见的需求。在 ES9 中，新增了两个数组方法：Array.prototype.findIndex() 和 Array.prototype.fill()，可以为我们的数组操作带来很大的便利。

Array.prototype.findIndex()

Array.prototype.findIndex() 方法用于找到数组中符合条件的元素的索引。它接收一个回调函数作为参数，回调函数的返回值为一个 boolean 类型，当回调函数返回 true 时，findIndex() 方法返回对应元素的索引，否则返回 -1。findIndex() 方法会遍历整个数组，返回最先匹配到的元素的索引。

语法

array.findIndex(callback(element[, index[, array]])[, thisArg])

参数

callback：要执行的回调函数，接收三个参数：
- element：数组中正在读取的当前元素。
- index：数组中正在读取的当前元素的索引。
- array：正在操作的数组。
thisArg：可选。执行回调函数时 this 的值。

返回值

如果找到符合条件的元素，则返回它的索引。
如果没有找到符合条件的元素，则返回 -1。

示例

在以下示例中，我们从数组中查找第一个大于等于 18 的成员，得到其在数组中的索引。

const ages = [15, 16, 18, 21, 19, 20];
const index = ages.findIndex((age) => age >= 18);
console.log(index); // 2

Array.prototype.fill()

Array.prototype.fill() 方法用于填充数组中的元素。它接收一个需要填充的值作为第一个参数，以及可选的开始索引和结束索引作为第二个和第三个参数。如果省略第二个和第三个参数，则填充整个数组。fill() 方法会将数组中的元素全部替换为指定值。

语法

array.fill(value[, start[, end]])

参数

value：必填。用于替换数组元素的值。
start：可选。开始替换的索引。默认值为 0。
end：可选。结束替换的索引。默认值为数组末尾即 array.length。

返回值

原数组。

示例

在以下示例中，我们使用 fill() 方法将数组中的所有值替换为 0。

const numbers = [1, 2, 3, 4, 5];
numbers.fill(0);
console.log(numbers); // [0, 0, 0, 0, 0]

在以下示例中，我们使用 fill() 方法将数组中从索引 1 开始的所有值替换为 -1。

const numbers = [1, 2, 3, 4, 5];
numbers.fill(-1, 1);
console.log(numbers); // [1, -1, -1, -1, -1]

在以下示例中，我们使用 fill() 方法将数组中从索引 1 到索引 3 的值替换为 -1。

const numbers = [1, 2, 3, 4, 5];
numbers.fill(-1, 1, 3);
console.log(numbers); // [1, -1, -1, 4, 5]

总结

在 ES9 中，新增了两个数组方法：Array.prototype.findIndex() 和 Array.prototype.fill()，这两个方法可以非常方便地实现数组元素的查找和填充操作。当我们需要对数组元素进行查找或者填充时，可以借助这两个方法大大简化编码，提高效率。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/652e49307d4982a6ebf54382