JavaScript 中获取数组最后一个元素方法汇总

更新时间：2023年02月06日 08:18:57 作者：天行无忌

在JavaScript中，获取数组最后一个元素的方法有很多种。今天我们就来汇总一下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); // [ '第一个元素', '第二个元素' ]

性能比较

让按性能比较这 3 种方法。

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 中获取数组最后一个元素方法汇总的文章就介绍到这了,更多相关JavaScript获取数组最后一个元素内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

javascript ES6中箭头函数注意细节小结
这篇文章主要给大家总结了关于javascript ES6中箭头函数注意细节的相关资料，文中介绍的比较详细，需要的朋友可以参考借鉴，下面来一起看看吧。
2017-02-02
微信小程序开发之选项卡(窗口底部TabBar)页面切换
本文主要介绍了微信小程序开发之选项卡(窗口底部TabBar)页面切换的相关知识。具有很好的参考价值。下面跟着小编一起来看下吧
2017-04-04
JavaScript 拖拉缩放效果
拖拉缩放效果，实现通过鼠标拖动来调整层的面积（宽高）大小。例如选框效果。
2008-12-12
如何基于js判断浏览器版本
这篇文章主要介绍了如何基于js判断浏览器版本,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-02-02
js实现防止被iframe的方法
这篇文章主要介绍了js实现防止被iframe的方法,实例分析了两种比较常用的javascript防止页面被iframe的技巧,非常简单实用,需要的朋友可以参考下
2015-07-07
推荐4个原生javascript常用的函数
这篇文章主要介绍了推荐4个原生javascript常用的函数,需要的朋友可以参考下
2015-01-01
详解JavaScript前端如何有效处理本地存储和缓存
前端本地存储和缓存的处理是一种重要的技术,它可以帮助改善应用程序的性能和用户体验,下面是小编整理的一些处理前端本地存储和缓存的常用方法,希望对大家有所帮助
2023-11-11
一分钟学会JavaScript中的try-catch
这篇文章主要给大家介绍了关于如何通过一分钟学会JavaScript中try-catch的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-12-12
Web Uploader文件上传插件使用详解
WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主，FLASH为辅的现代文件上传组件。这篇文章主要为大家详细介绍了Web Uploader文件上传插件使用方法，感兴趣的小伙伴们可以参考一下
2016-05-05
javascript格式化日期时间方法汇总
本文给大家汇总介绍了javascript格式化日期时间的五种常用方法，个人对第五种个性化输出时间比较有兴趣，基本上只要项目中能用到都是使用第五种，推荐给小伙伴们。
2015-06-06