Array.prototype.at() 方法可直接用负索引获取倒数元素,比传统计算索引更简洁安全,避免空数组或长度不足时的边界错误,适用于移动端下拉加载等场景。

Array.prototype.at() 能直接通过负索引获取倒数元素,比 arr[arr.length - 1] 或 arr.slice(-1)[0] 更简洁安全,特别适合移动端下拉加载中判断“是否到底部”“是否已加载最后一页”等场景。
精准获取倒数第 N 个元素,避免边界错误
传统方式需手动计算索引,容易在空数组或长度不足时出错:
❌ 不安全写法const lastItem = list[list.length - 1]; // list 为空时为 undefined,但不会报错,易埋隐患const secondLast = list[list.length - 2]; // 长度
const lastItem = list.at(-1); // 倒数第一个,空数组返回 undefinedconst secondLast = list.at(-2); // 倒数第二个,安全、直观、无副作用
判断是否触达“最后一页”数据边界
下拉加载中常需对比当前列表长度与后端返回的总条数(total),但更轻量的做法是:当新加载的数据项全部“已存在”于当前列表末尾时,说明无需再请求。
例如后端返回 { data: [...newItems], hasNext: false },前端可这样判定:
- 用
list.at(-newItems.length)拿到“本应重叠的起始位置”的元素(若存在) - 逐项比对
newItems是否已存在于列表尾部(适用于去重合并场景) - 或更常用:若
list.length && newItems.length && list.at(-1) === newItems.at(-1),说明最后一条没变 → 可能已到底
配合 loading 状态做防重复请求
用户快速滚动可能触发多次下拉,需结合最后请求状态和数据特征做节流。利用 at() 快速读取末尾标识字段,比深比较整个数组高效:
- 假设每项有唯一
id,记录上一次请求末尾的lastId = list.at(-1)?.id - 发起新请求前检查:
if (loading || !lastId) return; - 请求参数带上
cursor: lastId,服务端据此分页,前端无需维护 offset
兼容性提示与降级方案
at() 已在 Chrome 92+、Safari 15.4+、Firefox 90+ 原生支持;微信 WebView(X5 内核 v1.0+)也已支持。如需兼容老版本 iOS Safari(
if (!Array.prototype.at) {<br> Array.prototype.at = function(n) {<br> const len = this.length;<br> return n >= 0 ? this[n] : this[len + n];<br> };<br>}










