JavaScript获取数组最后一个元素的3种方法以及性能
前言
当需要从 JavaScript 中的数组中获取最后一个元素时，有多种选择，本文将提供 3 种可用方法。
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获取数组最后一个元素的3种方法以及性能的文章就介绍到这了,更多相关JS获取数组最后一个元素内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
uniapp中获取dom元素的方法及更改dom元素颜色踩坑记录
最近学到了一个比较好用的框架uni-app,可以做六端适配,学习一下,下面这篇文章主要给大家介绍了关于uniapp中获取dom元素的方法及更改dom元素颜色踩坑记录的相关资料,需要的朋友可以参考下2023-03-03
JavaScript es6中var、let以及const三者区别案例详解
这篇文章主要介绍了JavaScript es6中var、let以及const三者区别案例详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下2021-08-08
JavaScript结合Bootstrap仿微信后台多图文界面管理
这篇文章主要为大家详细介绍了js结合Bootstrap仿微信后台多图文界面管理，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-07-07
Nick Justice是GitHub开发者计划的一员。早在ES6语言标准发布之前，他就借助像Babel这样的转译器以及最新版本的浏览器在自己的项目中使用ES6特性。他认为，ES6的新特性将极大地改变JavaScript的编写方式2016-03-03
这篇文章主要介绍了JavaScript实现数组在指定位置插入若干元素的方法,涉及javascript中splice方法的使用技巧,非常具有实用价值,需要的朋友可以参考下2015-04-04
这篇文章主要介绍了Postman内建变量常用方法实例解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-07-07
一个父容器也是window的window下的comboBox在页面中点击无效，但是在控制台中查看它的store却是有值的，问题在于没有显示。下面小编给大家分享Extjs下拉框不显示的问题，需要的的朋友参考下吧2017-06-06
这篇文章主要介绍了javascript下拉列表菜单的实现方法，采用table来封装，我们知道table的每一行写满了之后，下一行会自动添加，文章末尾附有完整的代码，需要的朋友可以参考下2015-11-11
这篇文章主要介绍了js+html5实现canvas绘制简单矩形的方法,涉及html5图形绘制的基本技巧,需要的朋友可以参考下2015-06-06
这篇文章主要为大家详细介绍了微信小程序日期时分组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
最新评论