JavaScript中array.prototype.at的使用及低版本浏览器的兼容方式

文章目录 一、使用方法二、低版本浏览器的兼容方法原因分析解决方案1.引入库2.在项目中使用 三、总结

---

一、使用方法

提示：传统访问数组的方式：

例如：通常我们访问数组元素的方式是通过数组的下标，如array[index]。

const animal = ['dog', 'cat', 'rat'];

animal[0]; // 'dog'

这里下标值通常是指大于等于0的正整数，而在我们从数组后面访问的时候一般是使用length-1的方式。这样多少是有点儿不方便。值得一提的是，一个新的提议（截至2021年1月的第3阶段）将at()方法引入了数组（以及类型化的数组和字符串），并解决了方括号访问器的诸多限制。

const animal = ['dog', 'cat', 'rat'];

animal.at(1); // 'dog'
animal.at(-1); // 'rat'

他支持顺序访问，当下标是负数的时候从后面开始依次访问。

---

二、低版本浏览器的兼容方法 原因分析

前一段是时间在项目中使用了at方法，在自己和测试电脑上运行无误，也就没有当回事，后来客户电脑出错才连夜来排查错误。错误也好找就是at的原因，报错结果如下：

Uncaught TypeError: animal.at is not a function

这里出现的原因是因为客户的浏览器的版本比较低，不支持该方法，所以才会出现该错误（为了复现我还特地降低了浏览器的版本），升级浏览器就可以解决，当然我也不能强制客户升级浏览器下面是解决方案。

解决方案 1.引入库

代码如下（示例）：

npm install --save array.prototype.at

2.在项目中使用

项目中引入，这里注意的是在shim方法调用的页面好使，我这里是在app.tsx中使用，保证整个项目在使用该方法时就都可以正确使用。

import * as at from 'array.prototype.at';

at.shim(); // 使用shim方法

---

三、总结

array.prototype.at的使用方法，参考链接如下：
MDN：array.prototype.at
NPM：npm.array.prototype.at