在 ES11 中，新增了 Array.prototype.at 方法，该方法可以通过下标访问数组中指定位置的元素，解决了 JavaScript 数组随机访问问题。在实际开发中，我们经常需要根据下标访问数组中的元素，以便进行操作或展示。而使用传统的下标访问方式或其他方法去完成这个操作，都不够方便和简洁。而使用 Array.prototype.at 方法，可以快速、简单的实现这个过程。
Array.prototype.at 方法的基本用法
Array.prototype.at 方法是 ES11 新增的方法之一，该方法可以用于获取数组中指定位置的元素。语法如下所示：
array.at(index)
其中，array 表示数组对象，index 表示需要访问的下标位置，该位置从 0 开始计数。
以下是使用 Array.prototype.at 方法获取数组中指定位置元素的示例代码：
const arr = [1, 2, 3, 4, 5]; console.log(arr.at(0)); // 1 console.log(arr.at(2)); // 3 console.log(arr.at(-1)); // 5
在上面的示例中，我们使用 arr.at(0) 获取数组 arr 中第一个元素的值，使用 arr.at(2) 获取数组 arr 中第三个元素的值，使用 arr.at(-1) 获取数组 arr 中倒数第一个元素的值。
Array.prototype.at 方法的特殊情况
在使用 Array.prototype.at 方法时，需要注意一些特殊情况。如果访问的下标位置超出了数组的范围，该方法会返回 undefined。如果访问的下标位置是负数，会从数组的末尾开始往前计数，也就是说，-1 表示倒数第一个元素。
以下是使用 Array.prototype.at 方法时特殊情况的示例代码：
const arr = [1, 2, 3, 4, 5]; console.log(arr.at(10)); // undefined console.log(arr.at(-10)); // undefined console.log(arr.at(2.2)); // 3 console.log(arr.at(-2.2)); // 4 console.log(arr.at(NaN)); // 1
在上面的示例中，我们在数组 arr 的范围之外访问了元素，包括正数和负数。此外，我们还尝试访问小数、NaN 等非整数的位置，这些情况下，会根据下标的值自动向上或向下取整。
Array.prototype.at 方法的应用场景
使用 Array.prototype.at 方法可以快速、简便的获取数组中指定位置的元素。该方法适用于开发中的许多场景，如：
- 根据数组中某个元素的值，快速定位所在的下标位置；
- 实现分页功能时，获取某个页面显示的数据；
- 数组中元素动态增加或减少，但需要访问固定位置的元素。
以下是使用 Array.prototype.at 方法实现分页功能的示例代码：
const data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; const pageSize = 3; const pageNum = 2; // 获取第二页的数据 const startIndex = (pageNum - 1) * pageSize; const endIndex = pageNum * pageSize; const pageData = data.slice(startIndex, endIndex); console.log(pageData); // [4,5,6]
在上面的示例代码中，我们使用 Array.prototype.at 方法获取指定页的数据，首先计算出该页数据在数组中的起始下标和结束下标，然后使用 slice 方法获取指定范围的数据。
总结
Array.prototype.at 方法是 ES11 中新增的方法之一，可以方便、快速地定位数组中指定位置的元素。在实际开发中，我们可以使用这个方法完成许多操作，如实现分页功能、定位数据位置等。但需要注意的是，该方法不支持所有的浏览器，需要兼容性考虑。可以通过判断浏览器的版本，使用该方法或其他方法来实现下标访问的功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6492bb9e48841e9894088c95