JS `Array.prototype.at()` (ES2022)：支持负索引的数组安全访问

嘿，各位编程界的弄潮儿们，早上/下午/晚上好！（取决于你看到这段文字的时间，程序员嘛，作息不规律很正常）。今天咱们来聊聊JavaScript里一个挺实用的小家伙，Array.prototype.at()，这玩意儿在ES2022里闪亮登场，专门解决了一个困扰我们多年的老问题：安全访问数组元素，特别是当你想用负索引的时候。

一、话说数组索引的那些事儿

先来回顾一下，在at()出现之前，我们是怎么访问数组元素的？最常用的当然是方括号[]：

const myArray = ['apple', 'banana', 'cherry'];

console.log(myArray[0]);   // 输出: apple
console.log(myArray[1]);   // 输出: banana
console.log(myArray[2]);   // 输出: cherry

这很直观，myArray[i]表示访问数组myArray中索引为i的元素。但是，当我们想从数组末尾开始访问呢？比如，最后一个元素？

传统的做法是：

const myArray = ['apple', 'banana', 'cherry'];

console.log(myArray[myArray.length - 1]); // 输出: cherry

这没毛病，但是……略显繁琐，对不对？每次都要写myArray.length - 1，如果访问倒数第二个元素，就要写myArray.length - 2，以此类推。一旦数组名特别长，或者嵌套层级很深，代码的可读性就会直线下降。

更糟糕的是，如果索引超出了数组的范围会发生什么？

const myArray = ['apple', 'banana', 'cherry'];

console.log(myArray[3]);  // 输出: undefined
console.log(myArray[-1]); // 输出: undefined  (注意这里！)

JavaScript不会报错，而是返回undefined。这看起来没什么大问题，但如果你的代码依赖于数组元素存在，undefined可能会导致意想不到的错误。而且，对于负索引，JavaScript的处理方式是直接返回undefined，这完全不符合我们的直觉。

二、at()：拯救世界的英雄登场

at()方法就是为了解决这些痛点而生的。它允许我们使用正数或负数索引来访问数组元素，并且当索引超出范围时，返回undefined，行为和传统的方括号访问保持一致。

const myArray = ['apple', 'banana', 'cherry'];

console.log(myArray.at(0));   // 输出: apple
console.log(myArray.at(1));   // 输出: banana
console.log(myArray.at(2));   // 输出: cherry

console.log(myArray.at(-1));  // 输出: cherry  (完美！)
console.log(myArray.at(-2));  // 输出: banana
console.log(myArray.at(-3));  // 输出: apple

console.log(myArray.at(3));   // 输出: undefined
console.log(myArray.at(-4));  // 输出: undefined

看到了吗？myArray.at(-1)直接返回了最后一个元素，myArray.at(-2)返回了倒数第二个元素，简直不要太方便！

三、at()的底层原理

at()的实现原理其实并不复杂，我们可以用一个简单的函数来模拟它的行为：

function at(array, index) {
  const n = array.length;
  index = Math.trunc(index) || 0; // 将index转换为整数，并处理NaN情况

  if (index < 0) {
    index += n;
  }

  if (index < 0 || index >= n) {
    return undefined;
  }

  return array[index];
}

const myArray = ['apple', 'banana', 'cherry'];

console.log(at(myArray, 0));   // 输出: apple
console.log(at(myArray, -1));  // 输出: cherry
console.log(at(myArray, -4));  // 输出: undefined

这个at函数做了以下几件事：

获取数组长度： 得到数组array的长度n。
处理索引： 使用Math.trunc(index) || 0将传入的索引index转换为整数。Math.trunc()会移除数字的小数部分，只保留整数部分。|| 0是为了处理index为NaN的情况，将其转换为0。
处理负索引： 如果index是负数，将其加上数组长度n，使其转换为正索引。
边界检查： 检查转换后的索引是否在数组范围内。如果超出范围，返回undefined。
返回元素： 如果索引有效，返回数组中对应索引的元素。

四、at()的优势与适用场景

更简洁： 访问数组末尾元素时，代码更简洁，避免了myArray.length - 1这种冗长的写法。
更易读： at(-1)比myArray[myArray.length - 1]更直观，更容易理解代码的意图。
更安全： 虽然at()和传统的方括号访问在越界时的行为一致（都返回undefined），但使用at()可以更清晰地表达你对数组边界的关注，降低出错的可能性。

at()特别适合以下场景：

访问数组末尾元素： 这是at()最典型的应用场景。
循环遍历数组： 当你需要根据当前索引访问数组前后元素时，at()可以简化代码。
处理不确定长度的数组： 当你不知道数组的长度，但需要访问特定位置的元素时，at()可以避免手动计算索引。

五、at()与其他数组访问方式的比较

访问方式	优点	缺点	适用场景
`myArray[index]`	简单直接，广泛支持	访问负索引时返回`undefined`，需要手动计算数组末尾元素的索引	访问已知索引的元素，对性能要求较高
`myArray.at(index)`	支持负索引，代码更简洁易读，边界检查更清晰	兼容性不如方括号访问（需要ES2022支持），性能略低于方括号访问	访问数组末尾元素，处理不确定长度的数组，需要更清晰的代码意图
`myArray.slice(index)`	可以提取数组的一部分，创建新的数组	需要创建新的数组，性能开销较大	需要提取数组的一部分，但不希望修改原始数组
`myArray.pop()`	可以删除数组的最后一个元素并返回该元素	会修改原始数组，不适用于只需要访问最后一个元素的情况	需要删除数组的最后一个元素，并使用该元素

六、at()的兼容性

at()是ES2022引入的新特性，因此需要确保你的运行环境支持ES2022。目前，主流的浏览器和Node.js版本都已经支持at()。

浏览器： Chrome 92+, Firefox 91+, Safari 15+, Edge 92+
Node.js： v16+

如果你的项目需要兼容旧版本的浏览器或Node.js，可以使用polyfill来提供at()的兼容性支持。一个简单的polyfill实现如下：

if (!Array.prototype.at) {
  Array.prototype.at = function(index) {
    const n = this.length;
    index = Math.trunc(index) || 0;

    if (index < 0) {
      index += n;
    }

    if (index < 0 || index >= n) {
      return undefined;
    }

    return this[index];
  };
}

这段代码首先检查Array.prototype.at是否存在，如果不存在，则定义一个at方法，其实现逻辑与我们前面模拟的at函数相同。

七、at()的性能考量

虽然at()在代码简洁性和可读性方面具有优势，但在性能方面，它可能略逊于传统的方括号访问。这是因为at()需要进行额外的索引计算和边界检查。

但是，在大多数情况下，这种性能差异可以忽略不计。除非你的代码对性能要求非常苛刻，并且需要频繁访问数组元素，否则at()的性能影响可以忽略不计。

八、一些更高级的用法和思考

结合解构赋值： at()可以和解构赋值结合使用，让代码更加简洁：

const myArray = ['apple', 'banana', 'cherry'];
const { 0: first, [myArray.length - 1]: last } = myArray; // 传统方式
console.log(first, last); // apple cherry

const { 0: first2, at: getElement } = myArray; // at作为属性
const last2 = getElement.call(myArray, -1);
console.log(first2, last2); // apple cherry

const first3 = myArray.at(0);
const last3 = myArray.at(-1);
console.log(first3, last3); // apple cherry

与函数式编程结合： at()可以更容易地在函数式编程风格中使用。例如，你可以创建一个函数来获取数组的倒数第n个元素：

const getNthFromLast = (array, n) => array.at(-n);

const myArray = ['apple', 'banana', 'cherry', 'date'];
console.log(getNthFromLast(myArray, 1)); // date
console.log(getNthFromLast(myArray, 2)); // cherry

Nullish Coalescing Operator (??) 的配合： 如果需要在数组越界时提供默认值，可以使用Nullish Coalescing Operator (??)：
```
const myArray = ['apple', 'banana'];
const element = myArray.at(5) ?? 'default value';
console.log(element); // 输出: default value
```

九、总结

Array.prototype.at()是一个小巧但实用的新特性，它让我们可以更方便、更安全地访问数组元素，特别是当我们需要访问数组末尾的元素时。虽然在性能方面可能略逊于传统的方括号访问，但在大多数情况下，这种差异可以忽略不计。

总而言之，at()是一个值得掌握的JavaScript新特性，它可以提高你的代码可读性和开发效率。下次你需要访问数组元素时，不妨考虑一下at()，它可能会给你带来惊喜！

好了，今天的讲座就到这里。希望大家有所收获，下次再见！记住，代码的世界没有绝对的对错，只有更优雅和更适合的解决方案。多尝试，多思考，你也能成为编程高手！

发表回复 取消回复

发表回复取消回复