使用 ES12 中的 Array.prototype.at 方法和 Array.prototype.lastIndexOf 方法更灵活地访问数组元素-JavaScript中文网-JavaScript教程资源分享门户

前言

在前端技术中，处理数组是必不可少的一部分。ES6 为我们提供了诸多方便操作数组的新 API。而在 ES12 中，又推出了两个新的数组 API，分别是 Array.prototype.at 和 Array.prototype.lastIndexOf。本文将为大家介绍这两个新的 API，并为大家提供示例代码来巩固学习。

一、Array.prototype.at

在过去，我们在访问数组某一特定的元素时，通常使用索引 [] 的方法，例如 array[0]。但是这种方式存在一些缺陷。首先，如果访问的索引越界了会返回 undefined。其次，索引只能是整数，无法使用负数索引或者小数索引。

而在 ES12 中，我们可以使用 Array.prototype.at 方法来解决这些问题。该方法可以接受整数、负数或者小数作为索引，如果索引越界了则会返回 undefined。同时，如果我们使用非整数作为索引，也可以将其四舍五入得到最接近的整数索引。

下面是一个使用 Array.prototype.at 的示例代码：

const fruits = ["apple", "banana", "grape"];

console.log(fruits.at(0)); // "apple"
console.log(fruits.at(1.4)); // "banana"
console.log(fruits.at(-1)); // "grape"
console.log(fruits.at(3)); // undefined

在上面的示例代码中，我们利用了 Array.prototype.at 可以接受小数和负数作为索引的特点来访问数组中的元素。同时，当传入的索引值越界时，会返回 undefined。

二、Array.prototype.lastIndexOf

在处理数组时，经常需要查找数组中特定元素的最后一个位置。在 ES6 中，我们可以使用 Array.prototype.indexOf 方法来找到某个元素在数组中的位置。该方法返回值为元素的下标，如果不存在则返回 -1。但是，该方法仅返回第一个匹配的元素的位置。

而在 ES12 中，我们可以使用 Array.prototype.lastIndexOf 方法来查找数组中特定元素的最后一个位置。该方法与 Array.prototype.indexOf 方法类似，但是是从数组的尾部开始查找，找到最后一个匹配的元素的位置。

下面是一个使用 Array.prototype.lastIndexOf 的示例代码：

const fruits = ["apple", "banana", "grape", "banana"];

console.log(fruits.lastIndexOf("banana")); // 3
console.log(fruits.lastIndexOf("orange")); // -1

在上面的示例代码中，我们利用了 Array.prototype.lastIndexOf 方法的特点，从尾部开始查找数组中最后一个匹配的元素的位置。

总结

本文介绍了 ES12 中的 Array.prototype.at 和 Array.prototype.lastIndexOf 方法，前者可以更灵活地访问数组元素，后者可以查找数组中特定元素的最后一个位置。同时，本文也提供了相应的示例代码，帮助大家加深理解并实践。

在实际开发中，我们可以根据具体的场景灵活运用这些数组操作的新 API，提高工作效率。

参考资料

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

使用 ES12 中的 Array.prototype.at 方法和 Array.prototype.lastIndexOf 方法更灵活地访问数组元素

纠错反馈