在前端开发的日常工作中，处理数组是最常见的任务之一。而在 ECMAScript 2021（ES12）中，Array 对象中新增了 at() 方法，可以更方便地访问数组的特定位置。在这篇文章中，我们将讨论 at() 方法的用法，以及如何利用它来简化代码。
at() 方法
at() 方法返回数组指定索引位置的元素。它接受一个必需的参数：索引值。如果传递给 at() 方法的参数不是整数，则该参数首先被转换为整数。如果索引值是负数，则从右侧开始计算索引值，-1 表示数组的最后一个元素，-2 表示倒数第二个元素以此类推。如果索引值超出了数组的范围，则返回 undefined。
以下是 at() 方法的基本用法：
array.at(index);
以下是一个示例：
let arr = ['a', 'b', 'c']; console.log(arr.at(0)); // a console.log(arr.at(-1)); // c console.log(arr.at(3)); // undefined
at() 方法的好处
原生 JavaScript 可以访问数组元素的方法有两种：基于数组下标的访问和使用数组方法。然而，基于下标的访问仅适用于整数下标，并且不提供越界检查。使用数组方法可以避免这些限制，但语法更为繁琐。at() 方法提供了一种简单方便的方法来访问数组元素。
以下是一个常见的示例，使用 for 循环和数组下标访问元素：
let arr = ['a', 'b', 'c'];
for (let i = 0; i < arr.length; i++) {
console.log(arr[i]);
}以下是使用 forEach 方法的示例：
let arr = ['a', 'b', 'c'];
arr.forEach(function(value) {
console.log(value);
});这两种语法都有一些缺点。第一个例子的语法繁琐，而第二个示例中的函数声明也增加了代码量。同时，这两种方法都不提供用于访问特定索引位置的单个元素的简单方法。
at() 方法提供了一个解决方案，可以轻松访问数组元素，而不需要使用 for 循环或 forEach 方法。以下是使用 at() 方法的示例：
let arr = ['a', 'b', 'c']; console.log(arr.at(0)); // a console.log(arr.at(1)); // b console.log(arr.at(-1)); // c console.log(arr.at(3)); // undefined
at() 方法提供了比使用下标和数组方法更简单和优雅的方法。
使用 at() 方法的其他示例
以下是使用 at() 方法的其他示例：
1. 获取第一个元素
let arr = ['a', 'b', 'c']; console.log(arr.at(0)); // a
2. 获取最后一个元素
let arr = ['a', 'b', 'c']; console.log(arr.at(-1)); // c
3. 访问指定索引位置的元素
let arr = ['a', 'b', 'c']; console.log(arr.at(1)); // b
4. 遍历数组并访问单个元素
let arr = ['a', 'b', 'c'];
arr.forEach(function(value) {
console.log(arr.at(value));
});结论
at() 方法为 JavaScript 数组提供了一种更灵活，更易于使用的方法来访问特定索引的元素。此方法可以减少代码的复杂性和冗余，并提高程序的可读性和可维护性。由于 at() 方法是标准的 ES12 方法，它应该得到 JavaScript 引擎的广泛支持，并且是一种可靠的方式来访问数组元素。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6728a6a62e7021665e2102b7