在日常的前端开发中，我们经常需要从数组中取出指定位置的元素。ES6 中我们可以使用 Array.prototype.find()、Array.prototype.findIndex()、Array.prototype.slice() 以及传统的语法 arr[index]。但是在某些情况下，我们需要获取指定位置的元素，这些方法都不能完成我们的需求。
在 ES11 中，新增了 Array.prototype.at() 方法，该方法可以更方便地获取指定索引位置的元素，解决了以前的取值范围问题。
方法的语法
方法非常简单，只需要在数组对象的实例上调用 at() 方法，传入想要获取的索引即可。例如：
const arr = [1,2,3,4,5]; console.log(arr.at(2)); // 输出 3
方法的示例代码
接下来，我们来看一个更实际的例子。在开发中，我们可能会需要对某个数组进行分页展示，当用户点击下一页时，我们需要获取下一页数组中的元素。我们可以通过以下方式完成：
// javascriptcn.com 代码示例
const arr = [1,2,3,4,5,6,7,8,9,10];
// 每页显示 3 个元素
const page = 3;
// 当前页数
let currentPage = 1;
// 获取下一页数据
function getNextPage() {
const start = (currentPage - 1) * page;
currentPage++;
return arr.slice(start, start + page);
}
// 第一页数据：[1, 2, 3]
console.log(getNextPage());
// 第二页数据：[4, 5, 6]
console.log(getNextPage());其中，我们使用了 Array.prototype.slice() 方法获取指定范围内的元素，但是这个方法存在一定的缺陷。当我们需要获取指定索引位置的元素时，就不能很好地使用了。
// javascriptcn.com 代码示例 const currentPage = 2; const start = (currentPage - 1) * page; // 输出错误，期望输出 4 // 但是输出却是 undefined console.log(arr[start + 1]); // 正确输出 console.log(arr.at(start + 1)); // 输出 4
在这个例子中，我们通过计算获取了当前页数对应的起始位置，然后通过加上要获取的索引，从数组中取出对应的元素。但是当我们不小心计算错误或者不方便进行计算时，就会遇到问题。如果我们使用 Array.prototype.at() 方法，就可以更方便地获取指定位置的元素了。
方法的兼容性
虽然 Array.prototype.at() 是 ES11 中新增的方法，但是我们仍然需要考虑它的兼容性问题。在目前主流的浏览器中，只有 Chrome 和 Firefox 提供了支持。为了解决这个问题，我们可以使用 polyfill 提供的方法来兼容更多的浏览器。
// javascriptcn.com 代码示例
if (!Array.prototype.at) {
Array.prototype.at = function(index) {
const len = this.length;
index = Math.floor(index);
if (index < 0) {
index = index + len;
}
if (index < 0 || index >= len) {
return undefined;
}
return this[index];
};
}在这个 polyfill 中，我们判断了当前浏览器是否支持 Array.prototype.at() 方法，如果不支持则创建该方法。我们通过对索引进行校验来保证取值的合法性，最后返回对应的元素。
总结
在本文中，我们介绍了 ES11 中新增的 Array.prototype.at() 方法，该方法可以方便地获取指定索引位置的元素，解决了传统方法无法处理的取值范围问题。我们通过示例代码演示了如何使用该方法，同时也介绍了兼容性问题。在实际开发中，我们可以根据具体需求来选择使用该方法还是传统方法，以达到更好的效果。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6537737d7d4982a6ebff7383