JavaScript：at()方法遇到的问题并解决

目录

第一章 前言

第二章 使用at方法

第三章 分析原因并解决问题

---

第一章 前言

最近上线了一个项目，测试过程中并没有什么问题，但是上线后使用的用户多了，结果出现了这么一个问题：.at方法对低版本手机的浏览器不兼容问题；说实话，小编都没想到是这个方法的问题，因为是沿用的公共方法，但是问题出现了，还好同事也有一个低版本的苹果手机，从而让小编没有花费特别长时间解决这个bug。下面小编详细说明一下这个方法的使用以及如何兼容低版本。

代码：

const prefix = url.split('/').at(-2)
const fileName = url.split('/').at(-1)

低版本手机报错：

Uncaught TypeError: url.split('/').at is not a function

第二章 使用at方法

• 针对于最原始数组时，我们通常通过数组下标获取获取数据的，例如——

unUseAt() {
      const arr = ['❆LO', 'LO', 'VE', 'LOVE', 'VE❆']
      console.log(arr[0], arr[arr.length - 1])
},

注意：这里下标值通常是指大于等于0的正整数，而在我们从数组后面访问的时候一般是使用length - 1的方式。其实不是不可以用，只是或多或少代码长度在这，也许会有一点点不方便。

• 随着at()方法引入，数组获取数据的方式又变多了，可以通过at获取数组的值，索引值也可以是负数了(当下标是负数的时候从后面开始依次访问)，例如——

useAt() {
      const arr = ['❆LO', 'LO', 'VE', 'LOVE', 'VE❆']
      console.log(arr.at(1), arr.at(-1))
},

注意： 由于at()方法是后续引入的新方法，那毕竟也会又版本兼容的问题，接下来小编在开发的项目中说明 

JavaScript at() 方法 | 菜鸟教程 

第三章 分析原因并解决问题

报错：Uncaught TypeError: url.split('/').at is not a function

经过了解后发现问题：是因为用户的手机浏览器的版本比较低，不支持该方法，所以才会出现该错误(要不是正巧有个同事的手机版本也低可以连本地项目调试，还真挺难发现)，其实我们现在的手机浏览器都是没有问题的(这也是测试的时候没测出问题的原因)，当然我也不能强制用户再买个手机；后面是解决方法：

• 回归最原始的方法——（这种方法不唯一，能实现即可）

export const getAssetsFile = (url = '@/assets/images/witsz/ceshi.png') => {
    const urlArr = String(url).split('/') // 分割成输出
    const prefix = urlArr.slice(-2)[0] // 获取原数组的最后两个值后拿到第一个值
    const fileName = urlArr.slice(-1)[0] // 获取原数组的最后一个值后拿到第一个值
    return new URL(`../assets/images/${prefix}/${fileName}`, import.meta.url).href
}

• 小编找遍官方文档并没有找到官网给出at()兼容低版本的方法；如果大家找到可以在评论区留下 
• 最后小编还有个思路就是自己写一个at方法从而实现兼容的问题，同时我们也能继续沿用at方法了。(但是小编这个方法是封装在工具里的，用到的地方就只有一个地方，就没花时间写了)