在 ES11 中，新增了一个 Array.prototype.at 方法，它可以让我们更方便地访问数组中指定索引位置的元素。本文将介绍这个新方法的使用技巧，包括如何使用它来更好地操作数组元素，以及如何在不兼容该方法的环境中进行兼容处理。
Array.prototype.at 方法的用法
Array.prototype.at 方法接收一个参数，即要访问的索引位置，从而返回该位置上的元素。它与普通的数组取值方式 arr[index] 不同的是，在索引位置为负数或超出数组范围时，它会返回 undefined，而不是 null 或抛出异常。
const arr = ['a', 'b', 'c']; console.log(arr.at(0)); // a console.log(arr.at(-1)); // c console.log(arr.at(3)); // undefined
此外，Array.prototype.at 方法还支持使用负数索引，比如 -1 表示倒数第一个元素。
使用 Array.prototype.at 方法来操作数组元素
在我们使用数组时，有很多场景需要访问数组中某个指定位置的元素。在以往的 JavaScript 版本中，我们需要使用 if 判断语句或 try-catch 语句来避免访问不存在的元素时程序抛出异常，但现在有了 Array.prototype.at 方法，我们可以更加方便地操作数组元素。
举个例子，假设我们有一个存储了用户对象的数组，每个对象都包含了 name 和 age 属性，我们要访问第二个用户的姓名。
通过普通的数组取值方式，我们需要这样写：
const users = [
{ name: 'Alice', age: 18 },
{ name: 'Bob', age: 20 },
{ name: 'Charlie', age: 22 },
];
let name = null;
if (users[1]) {
name = users[1].name;
}而通过 Array.prototype.at 方法，我们可以更加简洁地实现：
const users = [
{ name: 'Alice', age: 18 },
{ name: 'Bob', age: 20 },
{ name: 'Charlie', age: 22 },
];
const name = users.at(1)?.name;这样不仅简洁易读，而且代码的安全性得到了保障。
在不兼容 Array.prototype.at 方法的环境中进行兼容处理
虽然 Array.prototype.at 方法已经是 ECMAScript 的正式规范了，但由于它是 ES11 新增的方法，可能不被一些旧版本的浏览器所支持。为了确保代码在不同环境下运行正常，我们可能需要进行兼容处理。
一个简单的兼容方法是手动实现 Array.prototype.at 方法：
if (!Array.prototype.at) {
Object.defineProperty(Array.prototype, 'at', {
value: function(index) {
const length = this.length;
const realIndex = index < 0 ? length + index : index;
if (realIndex >= 0 && realIndex < length) {
return this[realIndex];
} else {
return undefined;
}
}
});
}这段代码会判断当前环境是否支持 Array.prototype.at 方法，如果不支持，则手动定义该方法。在该方法的实现中，我们使用了 ES5 中引入的 Object.defineProperty 方法，该方法可以定义对象属性的特性。我们将 Array.prototype.at 方法定义为一个只读的属性。
总结
在本文中，我们介绍了 ES11 中新加的 Array.prototype.at 方法，并探讨了它的使用技巧。我们发现，使用 Array.prototype.at 方法既可以简化代码，又可以提高程序的健壮性。同时，我们也为不兼容该方法的环境提供了一个简单的兼容处理方法。希望这篇文章可以帮助读者更好地掌握 Array.prototype.at 方法的使用。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65a0ffd2add4f0e0ff928621