在日常的前端开发中，我们经常需要从数组中取出指定位置的元素。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
方法的示例代码
接下来，我们来看一个更实际的例子。在开发中，我们可能会需要对某个数组进行分页展示，当用户点击下一页时，我们需要获取下一页数组中的元素。我们可以通过以下方式完成：
-- -------------------- ---- ------- ----- --- - ----------------------- -- ---- - --- ----- ---- - -- -- ---- --- ----------- - -- -- ------- -------- ------------- - ----- ----- - ------------ - -- - ----- -------------- ------ ---------------- ----- - ------ - -- --------- -- -- --------------------------- -- --------- -- -- ---------------------------展开代码
其中，我们使用了 Array.prototype.slice() 方法获取指定范围内的元素，但是这个方法存在一定的缺陷。当我们需要获取指定索引位置的元素时，就不能很好地使用了。
-- -------------------- ---- ------- ----- ----------- - -- ----- ----- - ------------ - -- - ----- -- --------- - -- ------ --------- --------------------- - ---- -- ---- ------------------------ - ---- -- -- -展开代码
在这个例子中，我们通过计算获取了当前页数对应的起始位置，然后通过加上要获取的索引，从数组中取出对应的元素。但是当我们不小心计算错误或者不方便进行计算时，就会遇到问题。如果我们使用 Array.prototype.at() 方法，就可以更方便地获取指定位置的元素了。
方法的兼容性
虽然 Array.prototype.at() 是 ES11 中新增的方法，但是我们仍然需要考虑它的兼容性问题。在目前主流的浏览器中，只有 Chrome 和 Firefox 提供了支持。为了解决这个问题，我们可以使用 polyfill 提供的方法来兼容更多的浏览器。
-- -------------------- ---- ------- -- --------------------- - ------------------ - --------------- - ----- --- - ------------ ----- - ------------------ -- ------ - -- - ----- - ----- - ---- - -- ------ - - -- ----- -- ---- - ------ ---------- - ------ ------------ -- -展开代码
在这个 polyfill 中，我们判断了当前浏览器是否支持 Array.prototype.at() 方法，如果不支持则创建该方法。我们通过对索引进行校验来保证取值的合法性，最后返回对应的元素。
总结
在本文中，我们介绍了 ES11 中新增的 Array.prototype.at() 方法，该方法可以方便地获取指定索引位置的元素，解决了传统方法无法处理的取值范围问题。我们通过示例代码演示了如何使用该方法，同时也介绍了兼容性问题。在实际开发中，我们可以根据具体需求来选择使用该方法还是传统方法，以达到更好的效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6537737d7d4982a6ebff7383
