JavaScript获取数组最后一个元素的3种方法及性能对比
本文介绍JavaScript中获取数组最后一个元素的三种常用方法:利用length属性、slice()方法和pop()方法。通过实际代码对比发现,pop()执行速度最快(约0.033ms),slice()次之(约0.038ms),而通过length计算索引的方式最慢(约6.38ms)。文章详细解析了各方法的原理、对原数组的影响及适用场景,帮助开发者根据是否需要修改原数组及性能需求选择最优方案。
前言
在JavaScript开发中,若需提取数组的最后一个元素,存在多种实现路径。本文将详细阐述三种可行的技术手段。
1. 利用数组 length 属性
length 属性返回数组中元素的数量。从数组的长度中减去 1 得到数组最后一个元素的索引,使用它可以访问最后一个元素。从长度中减去 1 的原因是,在 JavaScript 中,数组索引编号从 0 开始。即第一个元素的索引将为 0。因此,最后一个元素的索引将为数组的 length-1。
const arrayTest = ["第一个元素", "第二个元素", "最后一个元素"];
const length = arrayTest.length;
const lastValue = arrayTest[length - 1];
console.log(lastValue); // 最后一个元素 2. 利用数组 slice 方法
slice() 方法用于从原数组中截取指定范围的元素,并返回一个包含这些元素的新数组对象。该操作不会改变原始数组。slice() 方法支持负数索引,当传入负值时,索引位置从数组末尾向前计算。结合数组解构赋值语法,可直接从 slice() 返回的新数组中提取出最后一个元素。
const arrayTest = ["第一个元素", "第二个元素", "最后一个元素"];
const length = arrayTest.length;
const [lastValue] = arrayTest.slice(-1);
console.log(lastValue); // 最后一个元素 3. 利用数组 pop 方法
pop() 方法用于移除数组的最后一个元素,并将其作为返回值返回。需要注意的是,此操作会直接修改原始数组。若原数组为空,该方法将返回 undefined,且不对数组进行任何修改。
const arrayTest = ["第一个元素", "第二个元素", "最后一个元素"];
const length = arrayTest.length;
const lastValue = arrayTest.pop();
console.log(lastValue); // 最后一个元素
console.log(arrayTest); // [ '第一个元素', '第二个元素' ] 性能比较
接下来对上述三种获取最后一个元素的方法进行性能基准测试。
const arrayTest = ["第一个元素", "第二个元素", "最后一个元素"];
console.time("==> length");
const length = arrayTest.length;
let lastValue = arrayTest[length - 1];
console.log(lastValue);
console.timeEnd("==> length");
console.time("====> slice");
let [lastValue1] = arrayTest.slice(-1);
console.log(lastValue1);
console.timeEnd("====> slice");
console.time("======> pop");
let lastValue2 = arrayTest.pop();
console.log(lastValue2);
console.timeEnd("======> pop");
测试结果数据如下:
最后一个元素 ==> length: 6.38ms 最后一个元素 ====> slice: 0.038ms 最后一个元素 ======> pop: 0.033ms
总结
从性能测试结果来看,pop() 方法的执行效率最高。如果业务场景允许修改原数组,推荐优先使用该方法。若要求保持原数组不变,则应选用 slice() 方法。相比之下,利用数组 length 属性计算索引的方式执行耗时最长,尽管其逻辑直观且为常见用法,但在对性能敏感的场景下需谨慎使用。
本文关于JavaScript获取数组最后一个元素的三种方法及其性能对比的介绍到此结束。如需了解更多JS获取数组最后一个元素的相关内容,欢迎查阅本站历史文章或继续浏览后续教程,感谢大家的支持!
JS处理特殊字符时怎么安全生成JSON
2026-11-05 15:44:51
内部脚本与外部js文件的区别及优缺点对比
2026-11-05 14:42:19
JavaScript前端性能优化指南:提升页面加载速度与渲染效率
2026-11-05 13:48:26
主流JS反混淆工具对比:de4js、unminify与AST还原方案评测
2026-11-05 12:00:56
Nuxt.js 性能优化技巧:代码分割与组件懒加载
2026-11-03 23:32:56
