标签JavaScript | 前端开发 | ES6 | 面试题 前言在日常开发中我们经常需要获取数组的最后一个元素。比如获取最新的聊天记录、最新的股票价格、最新的订单信息等等。看似简单的需求其实有N 种实现方式今天就来总结一下 JS 中获取数组最后一个元素的所有方法从最老的语法到最新的 ES2022 特性一网打尽 方法一览序号方法兼容性推荐度代码量1arr[arr.length - 1]✅ IE6⭐⭐⭐⭐⭐1行2arr.at(-1)✅ ES2022⭐⭐⭐⭐⭐1行3arr.slice(-1)[0]✅ IE9⭐⭐⭐⭐1行4arr.pop()✅ IE4⭐⭐1行5arr.reverse()[0]✅ IE4⭐2行 方法详解✅ 方法1arr[arr.length - 1]⭐⭐⭐⭐⭐ 最经典这是最通用、最经典的方法兼容性最好从 IE6 就支持了constlist[1,2,3,4,5];constlastItemlist[list.length-1];console.log(lastItem);// 5优点✅ 兼容性极好IE6✅ 性能最优✅ 不会修改原数组缺点❌ 代码稍长✅ 方法2arr.at(-1)⭐⭐⭐⭐⭐ 最简洁ES2022ES2022 新增的方法支持负数索引-1就是最后一个constlist[1,2,3,4,5];constlastItemlist.at(-1);console.log(lastItem);// 5优点✅ 代码最简洁✅ 语义清晰-1就是倒数第一个✅ 不会修改原数组缺点❌ 需要 ES2022 环境Node.js 16、现代浏览器浏览器兼容性Chrome 92、Firefox 90、Safari 15.4、Edge 92✅ 方法3arr.slice(-1)[0]⭐⭐⭐⭐ 不修改原数组slice(-1)会返回一个包含最后一个元素的新数组再取[0]即可。constlist[1,2,3,4,5];constlastItemlist.slice(-1)[0];console.log(lastItem);// 5优点✅ 不会修改原数组✅ 代码简洁缺点❌ 会创建新数组性能略差❌ IE8 不支持负数索引⚠️ 方法4arr.pop()⭐⭐ 会删除元素pop()会删除并返回最后一个元素。constlist[1,2,3,4,5];constlastItemlist.pop();console.log(lastItem);// 5console.log(list);// [1, 2, 3, 4] ⚠️ 原数组被修改了优点✅ 代码最短缺点❌ ⚠️会修改原数组一般不推荐⚠️ 方法5arr.reverse()[0]⭐ 会反转数组先反转数组再取第一个元素。constlist[1,2,3,4,5];constlastItemlist.reverse()[0];console.log(lastItem);// 5console.log(list);// [5, 4, 3, 2, 1] ⚠️ 原数组被反转了优点✅ 代码短缺点❌ ⚠️会修改原数组千万别用 性能对比我用console.time做了个简单测试100万次循环方法耗时性能排名arr[arr.length - 1]~15ms 第1名arr.at(-1)~20ms 第2名arr.slice(-1)[0]~80ms 第3名arr.pop()~18ms第4名但会修改数组结论arr[arr.length - 1]性能最好arr.at(-1)紧随其后且代码最简洁️ 安全写法防止空数组如果数组可能为空直接取会返回undefined建议加个判断constlist[];// ❌ 不安全constlast1list[list.length-1];// undefined// ✅ 安全写法1三元运算constlast2list.length0?list[list.length-1]:null;// ✅ 安全写法2可选链 空值合并ES2020constlast3list.at(-1)??null;// ✅ 安全写法3默认值constlast4list[list.length-1]||默认值; 实战场景场景1获取最新消息constmessages[{id:1,text:你好},{id:2,text:在吗},{id:3,text:吃了吗}];constlastMsgmessages.at(-1);console.log(lastMsg.text);// 吃了吗场景2获取最新股价constprices[10.5,20.3,15.8,12.1,18.9];constlatestPriceprices[prices.length-1];console.log(最新价格${latestPrice});// 最新价格18.9场景3兼容老浏览器// 如果项目需要兼容 IE用这个functiongetLastItem(arr){returnarr.length0?arr[arr.length-1]:null;} 最终推荐场景推荐方法✅现代项目ES2022arr.at(-1)✅兼容老浏览器arr[arr.length - 1]✅不想修改原数组 简洁arr.slice(-1)[0]❌不推荐arr.pop()、arr.reverse()[0] 总结方法代码推荐指数arr[arr.length - 1]⭐⭐⭐⭐⭐兼容性之王arr.at(-1)⭐⭐⭐⭐⭐代码之王arr.slice(-1)[0]⭐⭐⭐⭐安全之选arr.pop()⭐⭐⚠️ 慎用arr.reverse()[0]⭐❌ 别用一句话总结现代项目用at(-1)兼容老项目用length - 1其他的看看就好觉得有用的话点个赞 收藏 ⭐ 吧有问题欢迎评论区讨论参考文档MDN - Array.prototype.at()MDN - Array.prototype.slice()
JS 获取列表最后一个元素的 N 种方法
发布时间：2026/5/22 16:45:16
标签JavaScript | 前端开发 | ES6 | 面试题 前言在日常开发中我们经常需要获取数组的最后一个元素。比如获取最新的聊天记录、最新的股票价格、最新的订单信息等等。看似简单的需求其实有N 种实现方式今天就来总结一下 JS 中获取数组最后一个元素的所有方法从最老的语法到最新的 ES2022 特性一网打尽 方法一览序号方法兼容性推荐度代码量1arr[arr.length - 1]✅ IE6⭐⭐⭐⭐⭐1行2arr.at(-1)✅ ES2022⭐⭐⭐⭐⭐1行3arr.slice(-1)[0]✅ IE9⭐⭐⭐⭐1行4arr.pop()✅ IE4⭐⭐1行5arr.reverse()[0]✅ IE4⭐2行 方法详解✅ 方法1arr[arr.length - 1]⭐⭐⭐⭐⭐ 最经典这是最通用、最经典的方法兼容性最好从 IE6 就支持了constlist[1,2,3,4,5];constlastItemlist[list.length-1];console.log(lastItem);// 5优点✅ 兼容性极好IE6✅ 性能最优✅ 不会修改原数组缺点❌ 代码稍长✅ 方法2arr.at(-1)⭐⭐⭐⭐⭐ 最简洁ES2022ES2022 新增的方法支持负数索引-1就是最后一个constlist[1,2,3,4,5];constlastItemlist.at(-1);console.log(lastItem);// 5优点✅ 代码最简洁✅ 语义清晰-1就是倒数第一个✅ 不会修改原数组缺点❌ 需要 ES2022 环境Node.js 16、现代浏览器浏览器兼容性Chrome 92、Firefox 90、Safari 15.4、Edge 92✅ 方法3arr.slice(-1)[0]⭐⭐⭐⭐ 不修改原数组slice(-1)会返回一个包含最后一个元素的新数组再取[0]即可。constlist[1,2,3,4,5];constlastItemlist.slice(-1)[0];console.log(lastItem);// 5优点✅ 不会修改原数组✅ 代码简洁缺点❌ 会创建新数组性能略差❌ IE8 不支持负数索引⚠️ 方法4arr.pop()⭐⭐ 会删除元素pop()会删除并返回最后一个元素。constlist[1,2,3,4,5];constlastItemlist.pop();console.log(lastItem);// 5console.log(list);// [1, 2, 3, 4] ⚠️ 原数组被修改了优点✅ 代码最短缺点❌ ⚠️会修改原数组一般不推荐⚠️ 方法5arr.reverse()[0]⭐ 会反转数组先反转数组再取第一个元素。constlist[1,2,3,4,5];constlastItemlist.reverse()[0];console.log(lastItem);// 5console.log(list);// [5, 4, 3, 2, 1] ⚠️ 原数组被反转了优点✅ 代码短缺点❌ ⚠️会修改原数组千万别用 性能对比我用console.time做了个简单测试100万次循环方法耗时性能排名arr[arr.length - 1]~15ms 第1名arr.at(-1)~20ms 第2名arr.slice(-1)[0]~80ms 第3名arr.pop()~18ms第4名但会修改数组结论arr[arr.length - 1]性能最好arr.at(-1)紧随其后且代码最简洁️ 安全写法防止空数组如果数组可能为空直接取会返回undefined建议加个判断constlist[];// ❌ 不安全constlast1list[list.length-1];// undefined// ✅ 安全写法1三元运算constlast2list.length0?list[list.length-1]:null;// ✅ 安全写法2可选链 空值合并ES2020constlast3list.at(-1)??null;// ✅ 安全写法3默认值constlast4list[list.length-1]||默认值; 实战场景场景1获取最新消息constmessages[{id:1,text:你好},{id:2,text:在吗},{id:3,text:吃了吗}];constlastMsgmessages.at(-1);console.log(lastMsg.text);// 吃了吗场景2获取最新股价constprices[10.5,20.3,15.8,12.1,18.9];constlatestPriceprices[prices.length-1];console.log(最新价格${latestPrice});// 最新价格18.9场景3兼容老浏览器// 如果项目需要兼容 IE用这个functiongetLastItem(arr){returnarr.length0?arr[arr.length-1]:null;} 最终推荐场景推荐方法✅现代项目ES2022arr.at(-1)✅兼容老浏览器arr[arr.length - 1]✅不想修改原数组 简洁arr.slice(-1)[0]❌不推荐arr.pop()、arr.reverse()[0] 总结方法代码推荐指数arr[arr.length - 1]⭐⭐⭐⭐⭐兼容性之王arr.at(-1)⭐⭐⭐⭐⭐代码之王arr.slice(-1)[0]⭐⭐⭐⭐安全之选arr.pop()⭐⭐⚠️ 慎用arr.reverse()[0]⭐❌ 别用一句话总结现代项目用at(-1)兼容老项目用length - 1其他的看看就好觉得有用的话点个赞 收藏 ⭐ 吧有问题欢迎评论区讨论参考文档MDN - Array.prototype.at()MDN - Array.prototype.slice()
