如何通过 Array.prototype.at() 优雅处理由后端返回的变长数组末尾元素读取

老芳大大_1272

老芳大大_1272

2026-05-13

475人浏览

原创

array.prototype.at()是es2022引入的安全访问数组任意位置(含负索引)的方法,支持空数组、无需手动计算长度、可与可选链和空值合并操作符结合使用,提升代码简洁性与健壮性。

如何通过 array.prototype.at() 优雅处理由后端返回的变长数组末尾元素读取

Array.prototype.at() 是 ES2022 引入的原生方法,专为安全、简洁地访问数组任意位置(包括负索引)而设计。相比 arr[arr.length - 1] 或 arr.slice(-1)[0],它天然支持负数索引,无需手动计算长度,代码更直观,也避免了空数组导致的 undefined 访问异常(虽然仍返回 undefined,但语义清晰、无报错)。

直接读取末尾元素(含空数组安全)

后端返回的数组长度不确定时,用 .at(-1) 可以一步到位获取最后一个元素,无论数组长度是 0、1 还是多个:

  • []?.at(-1) → undefined(可选链确保不报错)
  • [42]?.at(-1) → 42
  • [1, 2, 3, 4]?.at(-1) → 4

读取倒数第 N 个元素(替代繁琐下标计算)

比如需要取“最新一条日志”或“上一次操作结果”,而接口可能返回 0~3 条记录。传统写法需判断长度:

❌ 不推荐:

const prev = arr.length >= 2 ? arr[arr.length - 2] : undefined;

✅ 推荐:

const prev = arr?.at(-2); // 负索引自动处理边界,超界返回 undefined

Tome
Tome

Tome是一款面向叙事型页面和演示内容创作的 AI storytelling 工具。

下载

与解构/默认值结合,提升可读性与健壮性

配合空值合并操作符(??),可优雅提供兜底逻辑:

  • const lastId = response.data?.items?.at(-1)?.id ?? 0;
  • const latestStatus = (data?.logs || []).at(-1)?.status ?? 'idle';

无需提前 if (!arr || arr.length === 0) 判断,链式调用 + 可选链 + at() 已覆盖常见边界场景。

注意兼容性与降级方案

若需支持旧版浏览器(如 IE 或低于 Chrome 92 的版本),可添加轻量 polyfill:

if (!Array.prototype.at) { Array.prototype.at = function(n) { const len = this.length; return n >= 0 ? this[n] : this[len + n]; }; }

或者使用 Babel + @babel/preset-env 自动按目标环境注入补丁。现代项目中,只要编译配置合理,.at() 可放心使用。

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
python是前端还是后端
python是前端还是后端

Python属于前端也属于后端,其灵活性和丰富的生态系统使得开发人员能够在不同的领域中灵活运用。本专题为大家提供python相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.11

2503

5

前端和后端的区别
前端和后端的区别

前端关注的是用户界面的设计和交互,而后端则注重数据处理和逻辑控制。想了解更多前端后端的相关内容,可以阅读本专题下面的文章。

2024.03.19

6430

13

后端的主要工作内容介绍
后端的主要工作内容介绍

后端是应用程序的服务端部分,负责核心任务,如数据库交互、业务逻辑处理和响应客户端请求。想了解更多后端的相关内容,可以阅读本专题下面的文章。

2024.03.19

5826

10

js获取数组长度的方法
js获取数组长度的方法

在js中,可以利用array对象的length属性来获取数组长度,该属性可设置或返回数组中元素的数目,只需要使用“array.length”语句即可返回表示数组对象的元素个数的数值,也就是长度值。php中文网还提供JavaScript数组的相关下载、相关课程等内容,供大家免费下载使用。

2023.06.20

4926

5

js刷新当前页面
js刷新当前页面

js刷新当前页面的方法:1、reload方法,该方法强迫浏览器刷新当前页面,语法为“location.reload([bForceGet]) ”;2、replace方法,该方法通过指定URL替换当前缓存在历史里(客户端)的项目,因此当使用replace方法之后,不能通过“前进”和“后退”来访问已经被替换的URL,语法为“location.replace(URL) ”。php中文网为大家带来了js刷新当前页面的相关知识、以及相关文章等内容

2023.07.04

1229

3

js四舍五入
js四舍五入

js四舍五入的方法:1、tofixed方法,可把 Number 四舍五入为指定小数位数的数字;2、round() 方法,可把一个数字舍入为最接近的整数。php中文网为大家带来了js四舍五入的相关知识、以及相关文章等内容

2023.07.04

4864

6

js删除节点的方法
js删除节点的方法

js删除节点的方法有:1、removeChild()方法,用于从父节点中移除指定的子节点,它需要两个参数,第一个参数是要删除的子节点,第二个参数是父节点;2、parentNode.removeChild()方法,可以直接通过父节点调用来删除子节点;3、remove()方法,可以直接删除节点,而无需指定父节点;4、innerHTML属性,用于删除节点的内容。

2023.09.01

960

4

JavaScript转义字符
JavaScript转义字符

JavaScript中的转义字符是反斜杠和引号,可以在字符串中表示特殊字符或改变字符的含义。本专题为大家提供转义字符相关的文章、下载、课程内容,供大家免费下载体验。

2023.09.04

1876

5

js生成随机数的方法
js生成随机数的方法

js生成随机数的方法有:1、使用random函数生成0-1之间的随机数;2、使用random函数和特定范围来生成随机整数;3、使用random函数和round函数生成0-99之间的随机整数;4、使用random函数和其他函数生成更复杂的随机数;5、使用random函数和其他函数生成范围内的随机小数;6、使用random函数和其他函数生成范围内的随机整数或小数。

2023.09.04

3485

4

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
LLVM官方文档
LLVM官方文档

共0课时 | 0人学习