写 Node.js 的日常里数组越界是躲不掉的一种小毛病。取最后一个元素要写arr[arr.length - 1]取倒数第二个更绕一不小心就拿到undefined。后来 V8 引擎带来了Array.at()这一整套操作立刻清爽了。这篇文章把我使用at()的经验、踩过的坑、还有实战写法一次说清楚。不管你是刚装好 Node.js 准备写第一个脚本还是已经在线上服务里维护生产环境数组边界这种问题都会遇到。at()本身不复杂真正值钱的是理解它背后的设计思路以及知道在什么场景用它最划算。1. 数组越界的“老毛病”到底出在哪1.1 越界读取不报错所以问题更隐蔽先说一个很多人刚接触 JavaScript 时会懵的点普通数组越界读取语言本身是不报错的。const arr [10, 20, 30]; console.log(arr[3]); // undefined console.log(arr[-1]); // undefined console.log(arr[x]); // undefined这在不少语言里是不可想象的。别的语言可能直接抛异常JavaScript 却给你一个undefined然后继续往下跑。好处是程序不容易崩坏处是 bug 会藏得很深。比如你写了这样一段代码const last items[items.length - 1]; const value last.price * 0.8;如果items是空数组last就是undefinedlast.price直接抛TypeError报错信息说的是“Cannot read properties of undefined”你得顺着调用栈往回追才发现真正的问题是数组本来就是空的。如果数组恰好有内容但不够长读到的是undefined乘一下变成NaN那排查起来更痛苦。这里可以类比一下你按门牌号挨家挨户派传单如果某个门牌号不存在快递员不会拦着你而是塞给你一张写有undefined的回执。你拿着这张回执继续做后续的账目计算最后账对不上你根本不知道是哪个环节出了问题。1.2 传统写法到底别扭在哪取数组最后一个元素绝大多数人第一反应是arr[arr.length - 1]。这个写法没错但语义上很别扭因为它表达的是“长度减一”而不是“最后一个”。代码里出现一两次还行一旦出现十几次阅读者就得反复在脑内换算。我整理了一下传统写法在不同需求下的痛点需求传统写法潜在问题取最后一个arr[arr.length - 1]空数组时等价于arr[-1]读的是对象的属性而非数组元素取倒数第二个arr[arr.length - 2]数组长度不足 2 时读到负数下标取当前索引的上一个arr[(current - 1 len) % len]边界的取模逻辑容易算错判断某个位置是否存在typeof arr[i] ! undefined数组元素本身可能存undefined误判率很高其中最难受的是负数下标问题。arr[-1]在 JavaScript 里并不是“取最后一个”它会被当成普通对象属性访问返回undefined。很多从 Python 或 Ruby 转过来的开发者都在这上面吃过亏——负索引在原生态 JS 里根本不存在直到at()出现。1.3 我以前常用的绕法以及为什么都不够好在没有at()的日子里我试过好几种绕法各有各的毛病。第一种是三元判断const last arr.length ? arr[arr.length - 1] : null;能解决问题但空数组时的默认值你想用null还是undefined业务逻辑不同选择就不同这个判断会散落到各处。第二种是sliceconst last arr.slice(-1)[0];slice(-1)能正确取到最后一个元素空数组时返回空数组从而拿到undefined。但代价是每次都会新建一个数组在循环或高频调用的路径里会白白产生垃圾对象。第三种是展开后popconst last [...arr].pop();先拷贝整个数组再去pop时间复杂度也是 O(n)而且比slice(-1)更浪费内存。除非你要同时拿到最后一个元素并把它从数组里移除否则纯粹是为了读个值去拷贝一份太不划算了。这些方案都能用但都谈不上“干净”。后面我看到at()的提案时第一反应是这个 API 终于把负索引和越界安全这两个事儿从语言层面解决了。2. Array.at() 的语法、规范与设计动机2.1 基本语法与负索引Array.prototype.at()的用法非常简单arr.at(index)传入一个整数索引。正数从 0 开始计算负数从数组末尾往前数。-1是最后一个元素-2是倒数第二个以此类推。看几个例子const colors [red, green, blue]; console.log(colors.at(-1)); // blue console.log(colors.at(-2)); // green console.log(colors.at(0)); // red console.log(colors.at(2)); // blue console.log(colors.at(3)); // undefined越界安全返回 console.log(colors.at(-4)); // undefined超出倒数范围这个 API 的设计动机其实很直白补齐 JavaScript 在“相对索引”上的缺口。Python 的列表支持arr[-1]Ruby 也支持很多脚本语言都有这个能力唯独 JavaScript 的普通下标访问不支持负索引。at()就是把这个能力补上同时把“越界返回undefined”这个行为也定义清楚。2.2 为什么是返回 undefined 而不是抛错这是一个值得展开的设计决策。如果at()越界时抛错那使用场景就会窄很多——每次调用都得包try/catch写起来又回到老路子了。实际上 JavaScript 数组的普通下标访问越界时本来就不抛错会返回undefinedat()只是延续了这一套语义没有引入新的异常机制。但这并不意味着你可以完全扔掉边界检查。at()安全返回undefined只解决“读取时不炸”的问题不解决“业务上不允许为空”的问题。比如你从数据库查一批记录约定至少有一条结果查出来是空数组你用records.at(-1).id照样会抛错因为.at(-1)返回的是undefined接着访问.id还是要炸。所以正确的使用姿势是用at()拿值拿完之后该判空还是得判空。它的价值在于把“取不到值”这件事变得干净、统一而不是替你做业务校验。2.3 规范细节ToIntegerOrInfinityat()的索引参数不是简单地和 0、length比大小它要经过一个叫ToIntegerOrInfinity的抽象操作。看在正常整数之外的输入会怎样const arr [10, 20, 30]; arr.at(1); // 20字符串转成数字 1 arr.at(true); // 20true 转成 1 arr.at(null); // 10null 转成 0 arr.at(undefined); // 10undefined 转成 0 arr.at(-0); // 10-0 转成 0 arr.at(1.9); // 20小数直接截断不是四舍五入 arr.at(-1.9); // 30先截断成 -1再取倒数第一个 arr.at(NaN); // 10NaN 转成 0 arr.at(Infinity); // undefined超出范围 arr.at(-Infinity);// undefined超出范围这里最容易被忽略的是小数截断和-0的处理。先说小数。arr.at(1.9)返回的是第二个元素而不是第三个因为ToIntegerOrInfinity内部用的是类似Math.trunc()的截断逻辑直接把小数点之后丢掉。你不写小数就完全碰不到这个坑但如果你在循环里用at(i / 2)这种表达式就得小心了。再说-0。JavaScript 里的-0和0在严格相等比较时是相等的但如果你用Object.is(-0, 0)判断它们又不相等。at(-0)的结果是第一个元素说明规范在处理时把-0当成0来用了。你正常写代码不会传-0进去但如果你的变量经过某些运算变成了-0比如1 - 1并不会产生-0但-1 * 0会产生这时候arr.at(negativeZeroVariable)就不按负数处理了。这些细节平时用不到但排查诡异 bug 时能省很多时间。2.4 Node.js 版本支持情况at()属于 ES2022 规范的内容Node.js 从 16.6.0 开始完整支持因为对应的 V8 引擎升级到了 9.2。Node.js 18 之后的 LTS 版本自然没问题当前主流的 Node 20、22 都原生支持。我列了一张简表环境最低版本备注Node.js16.6.0低于此版本需要 polyfillChrome92桌面端与安卓一致Firefox90桌面端与安卓一致Safari15.4iOS Safari 同步支持TypeScript4.6需要配置 lib 为 ES2022如果你写的是 npm 库且声明支持 Node 14那就不能直接裸用at()否则用户的运行环境会当场报arr.at is not a function。这种情况要么加 polyfill要么用构建工具做降级处理。3. 实战把 at() 用到真实业务场景3.1 场景一轮播图、环形队列、循环切换轮播图是“下一个元素”逻辑的典型场景。传统写法是维护一个current指针每次点击“下一张”就自增到末尾时归零function getNextImage(images, current) { const next (current 1) % images.length; return images[next]; }这段代码在正常输入下没问题但它有两个隐患。第一个隐患是images.length为 0 时% 0的结果是NaNimages[NaN]返回undefined。你得在调用前先判断数组是否为空。第二个隐患是current可能被传成-1。比如你的业务里“上一张”的上一张要落在最后一张传统写法直接images[-1]就拿不到东西。用at()改写之后就顺畅很多function getNextImage(images, current) { if (images.length 0) return null; const next (current 1) % images.length; return images.at(next); } function getPrevImage(images, current) { if (images.length 0) return null; const prev (current - 1 images.length) % images.length; return images.at(prev); }如果你希望current直接支持负值语义甚至可以让current -1表示“从最后一张开始”images.at(current)直接就能取到值不用额外换算。这在做相册插件、消息轮询、跑马灯这类组件时非常顺手。3.2 场景二取倒数第 N 条数据服务端处理日志和消息队列时经常要拿最近几条数据。比如一个简单的日志文件读取const lines rawLog.trim().split(\n); const latest lines.at(-1); // 最近一条 const previous lines.at(-2); // 上一条传统写法是lines[lines.length - 1]和lines[lines.length - 2]。后者在日志只有一行时读的是lines[-1]看起来是在“取上一条”实际上拿到的是undefined而且你很难一眼看出问题在哪。换成at()之后lines.at(-2)的语义就是“从末尾往前数第二个”日志不够两条时返回undefined逻辑直观得多。再举个例子监控场景里维护一个价格数组const prices [100, 102, 101, 105]; const currentPrice prices.at(-1); // 当前最新价格 const previousPrice prices.at(-2); // 上一笔价格 const changeRate (currentPrice - previousPrice) / previousPrice;如果prices里不足两条数据previousPrice就是undefined计算changeRate会得到NaN。这时你仍然需要提前判断数组长度但至少at(-2)本身不会把索引算错。3.3 场景三分页与“是否还有下一页”分页数据通常用slice来切因为slice天然容忍越界超出范围只会返回空数组function getPage(items, page, pageSize) { const start (page - 1) * pageSize; const end page * pageSize; return items.slice(start, end); }这个写法本身没有问题。但“是否有下一页”的判断传统写法容易写得啰嗦function hasNext(items, page, pageSize) { const end page * pageSize; return end items.length; }用at()可以换一种思路直接探测当前页末尾的下一个位置是否存在。function hasNext(items, page, pageSize) { return items.at(page * pageSize) ! undefined; }page * pageSize刚好是下一页第一条数据的索引。如果这一位存在说明后面还有数据。这种写法把“边界计算”变成了“边界探测”语义更接近业务本身有没有下一个就看下一个位置站不站人。不过这里要提醒一下如果数组里可能存undefined作为有效值这种探测法会误判。比如[1, 2, undefined, 4]中.at(2) ! undefined是false但实际上下一条数据确实存在。在这种特殊数组上还是用end items.length更稳妥。3.4 场景四字符串也可以 at()at()不是数组专属字符串同样支持。String.prototype.at()和数组版本同属 ES2022语法和语义完全一致。处理文件名、URL、版本号这类字符串时负索引很好用const fileName report-2024.pdf; fileName.at(-1); // f最后一个字符 fileName.at(-4); // ., 倒数第四个字符是扩展名分隔符这里有个对比值得一提。老牌的charAt方法不支持负索引hello.charAt(-1); // 空字符串 hello.at(-1); // ocharAt内部会把负数转换成0所以hello.charAt(-1)返回的是第一个字符h吗实际不是规范里charAt对负数索引是先做ToInteger得到-1再和0比较如果小于0就当作0处理结果返回h。等等这里我说错了再仔细确认一下。charAt(pos)规范是Let position be ToIntegerOrInfinity(pos)如果 position 0则 position 0。所以hello.charAt(-1)返回h而不是空字符串。我一直记成返回空串这里要纠正。实际验证一下hello.charAt(-1)在浏览器控制台里返回的是h因为负数被钳制到 0。而hello.charAt(99)返回空字符串。这正好解释了为什么有人会用charAt取最后一个字符时觉得别扭——要么写str.charAt(str.length - 1)要么先转数组都很啰嗦。at()让这一切变得正常了hello.at(-1)直接返回o。还有一个细节字符串at()和数组一样是按 UTF-16 码元来索引的不是按 Unicode 码点。处理 emoji 这类由两个码元组成的字符时at(-1)取到的是半个 emoji显示出来是乱码。这不是at()的缺陷而是 JavaScript 字符串编码模型的老问题处理用户输入文案时要留意。4. 常见问题与避坑实录4.1 稀疏数组、空位和 undefined 的混淆JavaScript 数组允许有空位。比如const sparse [1, , 3];这中间的空位你用at(1)拿到的是undefined。但注意普通索引访问sparse[1]拿到的也是undefined二者行为一致。麻烦的是另一种情况数组元素本身存的就是undefined。const weird [1, undefined, 3]; weird.at(1); // undefined从结果上看at()不会帮你区分“这里没有人”和“这里有个人但是空的”。如果你用at()的结果判断元素是否存在可能会把“有效值为 undefined”和“索引越界”混为一谈。我写代码时有一条原则凡是数组元素可能合法地出现undefined就避免用at()做存在性判断改用index in arr或arr.length比较。反过来如果数组元素都是真实对象或原始值at()判断存在性非常顺手。4.2 传参类型转换的坑前面规范部分已经提过ToIntegerOrInfinity这里用一个速查表把它整理清楚传入值实际生效索引结果arr 为 [10, 20, 30]1120true120null010undefined010NaN010-00101.9120-1.9-130InfinityInfinityundefinedxNaN 转 010这里面x最阴间。字符串x转数字是NaNNaN再被规范转成0所以arr.at(x)居然返回第一个元素。如果你是从某个配置读取索引值没做类型校验就直接传给at()遇到这种脏数据时行为会非常诡异而且不好定位。我的建议是调用at()之前确保传入的是整数或能隐式转换成整数的值。如果数据来源不可控先Number(x)再Math.trunc()做一次显式规整比把脏数据直接丢给at()安全得多。4.3 性能实测at() 到底慢不慢有人担心at()是新增 API性能不如方括号访问。我专门跑了一个简单的基准测试用一百万元素的数组做累加const arr Array.from({ length: 1000000 }, (_, i) i); let sum1 0; console.time(bracket); for (let i 0; i arr.length; i) { sum1 arr[i]; } console.timeEnd(bracket); let sum2 0; console.time(at); for (let i 0; i arr.length; i) { sum2 arr.at(i); } console.timeEnd(at); console.log(sum1, sum2);在我本机上跑了几轮方括号访问大约 7msat()大约 9ms差距在毫秒级。这说明 V8 已经对at()做了足够好的内联优化在绝大多数业务场景里性能差异可以忽略。真正影响数组性能的是slice、concat、splice、展开运算符这类会产生新数组的操作而不是单纯的索引读取。如果你在做高频数值计算比如图像处理、音频采样那仍然建议用方括号访问。但如果是普通的业务逻辑、数据处理、接口开发放心用at()不需要焦虑。4.4 兼容性排查与 polyfill 方案如果你要兼容旧环境最省事的办法是加 polyfill。核心实现并不复杂if (!Array.prototype.at) { Array.prototype.at function (index) { const len this.length; const n Math.trunc(index) || 0; const k n 0 ? n : len n; return k 0 k len ? this[k] : undefined; }; }这个实现覆盖了整数、负数、小数、NaN、null、undefined等常见输入。Math.trunc(index) || 0这个表达式同时解决了两个问题Math.trunc处理小数截断|| 0把NaN兜底成0。如果项目里用了 TypeScript光加 polyfill 不够编译器也可能报错。Array.prototype.at的类型声明在 ES2022 的 lib 里你需要在tsconfig.json中把lib从ES2020改成ES2022或者显式加上ES2022.Array否则 TS 会提示Property at does not exist on type any[]。我见过好几个同事代码里已经用了at()运行时没问题CI 里的类型检查却挂了最后发现是tsconfig的lib版本太老。这里提个醒免得你踩同样的坑。另外字符串也有at()如果要兼容旧环境同样需要 polyfillString.prototype.at实现思路和数组版本完全一致只是注意别误伤其他库。工程上如果已经引入了core-js直接import core-js/modules/es.array.at.js和import core-js/modules/es.string.at.js就搞定了不用手写。4.5 别把 at() 当成所有下标访问的替代品最后这点可能有点反直觉但我觉得很重要。at()确实好用但我不会把所有arr[i]都改成arr.at(i)。普通正数索引、按顺序遍历数组方括号访问仍然是最自然的选择。at()最大的价值在两个地方一是需要负数索引二是需要“越界也能安全拿到undefined”的语义。在这两类场景之外强行用at()反而增加阅读负担。比如一个常用的 for 循环for (let i 0; i arr.length; i) { doSomething(arr[i]); }这里的arr[i]没必要换换成arr.at(i)反而让读者疑惑为什么要多绕一次是不是担心数组长度变化是不是 i 可能是负的代码的困惑度就是这么一点点堆起来的。再比如while (arr.length)循环里反复取出并移除头部元素你会用arr.shift()也不会用at(0)。所以我的习惯是按索引遍历用方括号取边缘值用at()。这个习惯让代码的意图更清楚也让 Code Review 更容易通过。最后说一点我自己的体会at()用了大半年最大的感受不是代码变短了而是读起来顺了。arr.at(-1)一看到就知道是“最后一个”不用再脑内换算arr.length - 1是多少arr.at(-2)也能一眼看出是“倒数第二个”。在处理日志、队列、轮播这类高频取边缘值的业务时收益尤其明显。但我也提醒自己at()不是万能药。空数组时它返回undefined不会替你解决问题数组里存undefined时它会误导存在性判断老环境里不加 polyfill 直接调用会炸。把这些边界搞清楚再用它才能发挥这个 API 真正的价值。总体来说这是个值得写进团队代码规范的小特性用对了会让代码干净不少。