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

news2024/10/23 22:32:24

第一章前言

第二章使用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
}