在 ES12（也就是 ECMAScript 2022）中，新增了一个 Array.prototype.at() 方法。这个方法可以用于获取数组中指定位置的元素，用法类似于普通数组下标访问。不过，它支持负数索引和超出数组长度的索引，同时还能处理稀疏数组的情况。在本文中，我们将详细介绍这个方法的使用和一些案例。
语法
Array.prototype.at(index)
参数：
- index：要访问的元素的索引。可以是一个整数或一个字符串，如果是字符串，则会尝试将其转换为整数。支持负数索引和超出数组长度的索引。
返回值：数组中指定位置的元素。如果索引超出数组范围，则返回 undefined。
示例
1. 普通数组下标访问
我们先来看一下最简单的用法，就是获取数组中某一个位置的元素：
const arr = [1, 2, 3, 4, 5]; console.log(arr.at(2)); // 输出 3 console.log(arr.at(-1)); // 输出 5 console.log(arr.at(10)); // 输出 undefined
在上面的代码中，我们分别用了一个正常的索引、一个负数索引和一个超出数组范围的索引来访问数组。可以看到，at() 方法能够正确地返回我们期望的结果。
2. 处理稀疏数组
稀疏数组是指其中包含有空洞（即 undefined）的数组。在这种情况下，普通的数组下标访问会出现一些问题。具体地说，如果数组中存在空洞，则下标访问的结果可能会不连续、不一致或者返回 undefined。
at() 方法则可以很好地处理这种情况。我们来看一个例子：
const arr = [1, 2, , , 5]; // 这是一个含有两个空洞的稀疏数组 console.log(arr[2]); // 输出 undefined console.log(arr[3]); // 输出 undefined console.log(arr.at(2)); // 输出 undefined console.log(arr.at(3)); // 输出 undefined
在上面的代码中，我们定义了一个含有两个空洞的稀疏数组。然后我们用普通数组下标访问和 at() 方法来访问这个数组中的元素。可以看到，普通的访问方式会返回 undefined，而 at() 方法则能够正确地返回我们期望的结果。
3. 处理类数组对象
在 JavaScript 中，有时候会出现一些非数组类型的对象，但是它们具有数组的一些性质，比如可以通过下标来访问其中的元素。这样的对象被称为类数组对象。at() 方法也可以用来处理类数组对象。我们来看一个例子：
const obj = {
0: 'foo',
1: 'bar',
2: 'baz',
length: 3
};
console.log(Array.prototype.slice.call(obj, 1)); // 输出 ["bar", "baz"]
console.log(obj.at(1)); // 输出 "bar"在上面的代码中，我们定义了一个类数组对象 obj，并且手动设置了它的 length 属性。然后我们分别用 slice() 方法和 at() 方法来访问 obj 中的元素。可以看到，这两种方法都能够正确地返回我们期望的结果。
总结
在本文中，我们详细介绍了 ES12 中新增的 Array.prototype.at() 方法。这个方法可以用于获取数组中指定位置的元素，支持负数索引和超出数组长度的索引，同时还能处理稀疏数组和类数组对象的情况。它的使用相对简单，但是却能够帮助我们解决一些数组访问的问题。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/654a060d7d4982a6eb43ca37