各位观众老爷，大家好！今天咱们来聊聊JavaScript里一个挺实用的小家伙——Array.prototype.at()，这玩意儿是ES2022才加入的，允许你用负索引来访问数组元素，是不是感觉有点意思？
一、 历史背景：为什么需要at()？
在at()出现之前，我们访问数组元素通常使用方括号[]，比如：
const arr = ['香蕉', '苹果', '梨子'];
console.log(arr[0]); // 输出：香蕉
console.log(arr[1]); // 输出：苹果
console.log(arr[2]); // 输出：梨子这没啥问题，简单直接。但是，如果我们想访问数组的最后一个元素，通常会这么写：
console.log(arr[arr.length - 1]); // 输出：梨子咋样，是不是有点笨重？每次都要arr.length - 1，稍微长一点的数组名，代码看起来就更难受了。而且，如果你搞错了，写成了arr[arr.length]，那就会得到undefined，因为这个索引超出了数组的范围。
更要命的是，JavaScript的方括号访问，在访问越界索引时，不会报错，而是返回undefined。这在一些情况下可能会隐藏错误，导致调试困难。
所以，为了更方便、更安全地访问数组元素，特别是最后一个或倒数第几个元素，ES2022引入了at()方法。
二、 at()的用法：告别arr.length - 1
at()方法接受一个整数作为参数，表示要访问的元素的索引。它可以是正数，也可以是负数。
- 正数索引： 就像方括号一样，从数组的开头开始计数，索引从0开始。
- 负数索引： 从数组的末尾开始计数，索引从-1开始。
-1表示最后一个元素，-2表示倒数第二个元素，以此类推。
让我们用at()来访问数组的最后一个元素：
const arr = ['香蕉', '苹果', '梨子'];
console.log(arr.at(-1)); // 输出：梨子是不是简洁多了？不需要再计算arr.length - 1了，直接-1搞定。
再来几个例子：
console.log(arr.at(0)); // 输出：香蕉 (第一个元素)
console.log(arr.at(1)); // 输出：苹果 (第二个元素)
console.log(arr.at(-2)); // 输出：苹果 (倒数第二个元素)
console.log(arr.at(-3)); // 输出：香蕉 (倒数第三个元素)三、 at()的优势：清晰、简洁、安全
- 清晰易懂：
at(-1)比arr[arr.length - 1]更直观，一看就知道你想访问最后一个元素。 - 简洁： 省去了计算
arr.length - 1的麻烦，代码更简洁。 - 安全： 虽然
at()和方括号在处理越界索引时都会返回undefined，但at()的出现，至少避免了因错误计算arr.length - 1而导致的潜在错误。
四、 at()与方括号[]的区别与联系
| 特性 | at() |
[] |
|---|---|---|
| 索引类型 | 整数 (包括正数和负数) | 整数或字符串 (当数组是对象时) |
| 访问越界 | 返回 undefined |
返回 undefined |
| 负索引支持 | 支持 | 不支持 |
| 用法 | arr.at(index) |
arr[index] |
从表格可以看出，at()最大的优势就是支持负索引。在其他方面，它们基本相同。
五、 at()的兼容性
at()是ES2022的新特性，因此需要较新的浏览器或Node.js版本才能支持。
- 浏览器： 现代浏览器（Chrome, Firefox, Safari, Edge）都支持
at()。 - Node.js： Node.js 16及以上版本支持
at()。
如果你需要在旧版本的浏览器或Node.js中使用at()，可以使用polyfill。一个简单的polyfill实现如下：
if (!Array.prototype.at) {
Array.prototype.at = function(n) {
// Convert the argument to an integer
n = Math.trunc(n) || 0;
// Handle negative indexes
if (n < 0) {
n += this.length;
}
// Out of bounds index check
if (n < 0 || n >= this.length) {
return undefined;
}
// Return the element at the calculated index
return this[n];
}
}这个polyfill会检查Array.prototype.at是否存在，如果不存在，就添加一个自定义的at()方法。这个方法会处理负索引，并返回正确的元素。
六、 at()的应用场景：让代码更优雅
at()在以下场景中特别有用：
- 访问数组的最后一个元素： 替代
arr[arr.length - 1]，代码更简洁易懂。 - 访问数组的倒数第n个元素： 比如，你想访问倒数第二个元素，可以直接用
arr.at(-2)。 - 函数式编程： 在函数式编程中，经常需要访问数组的特定位置的元素，
at()可以使代码更清晰。
例如，假设你有一个函数，需要返回数组的第一个和最后一个元素：
function getFirstAndLast(arr) {
return [arr.at(0), arr.at(-1)];
}
const myArr = [1, 2, 3, 4, 5];
const result = getFirstAndLast(myArr);
console.log(result); // 输出：[1, 5]使用at()，这个函数看起来更简洁明了。
七、 at()与字符串：同样适用
at()不仅可以用于数组，也可以用于字符串。字符串也有索引，也可以使用负索引访问字符。
const str = "Hello, world!";
console.log(str.at(0)); // 输出：H
console.log(str.at(-1)); // 输出：!
console.log(str.at(-2)); // 输出：d八、 深入理解：at()的实现原理
虽然我们使用了polyfill来模拟at()的行为，但了解at()的实际实现原理也很重要。实际上，at()的实现非常简单：
- 类型转换： 将传入的索引转换为整数。可以使用
Math.trunc()或parseInt()。 - 负索引处理： 如果索引是负数，将其加上数组的长度，得到正索引。
- 越界检查： 检查索引是否超出数组的范围。如果超出，返回
undefined。 - 返回元素： 返回指定索引的元素。
用伪代码表示如下：
function at(arr, index) {
index = toInteger(index); // 将index转换为整数
if (index < 0) {
index = index + arr.length; // 处理负索引
}
if (index < 0 || index >= arr.length) {
return undefined; // 越界检查
}
return arr[index]; // 返回元素
}九、 总结：at()，虽小但实用
Array.prototype.at()是一个小巧但实用的新特性。它允许你使用负索引访问数组元素，使代码更简洁、更易懂。虽然它不能解决所有问题，但在某些情况下，它可以显著提高你的开发效率。
| 优点 | 缺点 |
|---|---|
| 支持负索引，访问数组末尾元素更方便 | 兼容性需要考虑，旧版本浏览器可能不支持 |
| 代码更简洁易懂 | 访问越界索引时，仍然返回undefined |
避免了因错误计算arr.length - 1导致的错误 |
希望通过今天的讲解，大家对Array.prototype.at()有了更深入的了解。在实际开发中，可以根据具体情况选择使用at()或传统的方括号访问。记住，选择最适合你的工具，让你的代码更优雅、更高效！
十、 练习题：巩固你的知识
- 编写一个函数，接受一个数组和一个索引作为参数，使用
at()方法返回数组中指定索引的元素。如果索引越界，返回null。 - 编写一个函数，接受一个字符串作为参数，使用
at()方法返回字符串的第一个和最后一个字符。 - 使用
at()方法，将一个数组倒序排列。 - 假设你有一个数组
const data = [{name: 'Alice', age: 25}, {name: 'Bob', age: 30}, {name: 'Charlie', age: 35}];，如何使用at()方法访问最后一个对象的age属性？
希望这些练习题能帮助你更好地掌握at()方法。
好了，今天的讲座就到这里。感谢大家的观看！希望大家以后写代码都能思路清晰，bug越来越少！下次有机会再跟大家分享其他的JavaScript小技巧。祝大家编程愉快！