admin管理员组

文章数量:1565774

没用过或者不知道Array.prototype.at()的小伙伴们点击下面传送门去MDN看看哈↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓。

传送门

今天在项目中遇到一个小问题，就是在我电脑上运行没问题的代码在测试的电脑上运行却出问题。
我电脑上：

 测试电脑上：

 我一开始没看下面的报错，我就一直在想我自己的逻辑，不可能啊，我自己也测试过都没事，我还纳闷。问测试怎么触发的这个bug，差点和测试打起来。后面才注意看这个报错

这明显是说没有这个方法，然后我就怀疑是不是测试浏览器的问题，果然我问了之后测试说他在360浏览器(旧版本内核是86.xxx)运行的。不支持。


array.prototype.at()浏览器支持情况：

解决这个问题我想到三个方法：

1.全局捕捉这个错误，有这个错误的时候弹窗让用户去更新浏览器(不友好，用户不买单)。

2.我手动把整个项目的at()方法全部换成 array[array.length - 1] 的写法(不干，多处用到了，我懒得改)

3.手动实现at()方法，在数组原型上没有这个方法时候，挂载我自己实现的方法不就完事了。

这个方法好像还不错
说干就干

=========================================================================
第一步自己实现at()方法：


/**
 * 修复低版本浏览器不支持数组最新的语法问题
 */
type FixType = 'at' | 'all'
export const fixArray = (type:FixType) => {

  /* Array.prototype.at() */
  if (!Array.prototype.at && (type === 'at' || type === 'all')) {
    Array.prototype.at = function(index) {
      if (index >= 0) {
        return this[index]
      } else {
        return this[this.length + index]
      }
    }
  }
}

新建fixArray.ts文件丢入上面代码：
这里我传入一个type是为了这个方法可以以后添加多个修复数组的方法，传入对应的方法名就修复指定的方法，例如传入单个'at'则只修复数组的at() 方法,传入'all' 则修复所有里面写到的方法给以后拓展用(其实大概率没什么 卵用，大部分情况要修就修全部直接传'all')

 第二步，在入口文件main.ts引入方法，就完事。

 然后来看看效果吧：


 这样我就可以在项目中肆无忌惮地使用Array.prototype.at()方法了！！！！！
 

 

 上面思路也可解决其他因为浏览器版本低不支持新语法或者新方法的情况，
当然前提是你都能自己手动实现那些方法哈哈哈哈

本文标签： 不支持数组版本浏览器方法prototype

版权声明：本文标题：解决低版本浏览器不支持数组的Array.prototype.at()方法 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://www.elefans.com/xitong/1725801216a1043569.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。