JavaScript 获取数组最后一个元素的三种方法及性能对比
本文汇总了JavaScript中获取数组最后一个元素的三种常用方法:利用length属性、slice方法以及pop方法。文章详细解析了各方法的原理与适用场景,并通过实际代码测试对比了它们的执行性能。结果显示pop()和slice(-1)效率远高于直接通过length索引访问,且pop会修改原数组,开发者可根据是否允许修改数组来选择合适方案。
在 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 中获取数组最后一个元素的各种方法汇总。如需了解更多相关技术内容,欢迎查阅本站往期文章或继续浏览后续章节。感谢大家的支持!
crypto-js 处理 Base64 和 Hex 编码转换的正确姿势
2026-11-05 16:39:11
ammo.js 内存管理:避免 Wasm 环境下的内存泄漏技巧
2026-11-05 10:21:09
JS几种补零方法的性能对比与选择建议
2026-11-04 21:17:50
JS数组去重最佳实践:Set、filter与reduce实现方案
2026-11-04 10:57:15
基准元素选择策略对 JavaScript 快速排序性能的影响
2026-11-03 22:37:29
