JavaScript获取数组最后一个元素的3种方法以及性能

 更新时间:2023年06月12日 15:11:43   作者:Web_boom  
在开发过程中,我们常常需要得到js数组的最后一个数组元素,下面这篇文章主要给大家介绍了关于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获取数组最后一个元素内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 浅谈webpack 四个核心概念之Entry

    浅谈webpack 四个核心概念之Entry

    这篇文章主要介绍了浅谈webpack 四个核心概念之Entry,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-06-06
  • 全面解析JavaScript中offsetLeft、offsetTop的用法

    全面解析JavaScript中offsetLeft、offsetTop的用法

    本文主要介绍了全面解析JavaScript中offsetLeft、offsetTop的用法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-04-04
  • JavaScript可否多线程? 深入理解JavaScript定时机制

    JavaScript可否多线程? 深入理解JavaScript定时机制

    JavaScript的setTimeout与setInterval是两个很容易欺骗别人感情的方法,因为我们开始常常以为调用了就会按既定的方式执行, 我想不少人都深有同感
    2012-05-05
  • JavaScript

    JavaScript"模拟事件"的注意要点详解

    今天小编就为大家分享一篇关于JavaScript"模拟事件"的注意要点详解,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
    2019-02-02
  • 用JavaScript操作WinRar

    用JavaScript操作WinRar

    Blog的插入HTML功能有誤。 原來在blueidea.com上看到了用ASP執行解壓縮動作的文章,一直沒有去用心看,前日,趁老大不在,爽了一把,把它改成了用JavaScript操作的了。
    2008-04-04
  • Flutter实现仿微信底部菜单栏功能

    Flutter实现仿微信底部菜单栏功能

    这篇文章主要介绍了Flutter实现仿微信底部菜单栏,需要的朋友可以参考下
    2019-09-09
  • layui导航栏二级菜单不显示问题及解决

    layui导航栏二级菜单不显示问题及解决

    这篇文章主要介绍了layui导航栏二级菜单不显示问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-05-05
  • JavaScript中常见加密解密方法总结

    JavaScript中常见加密解密方法总结

    这篇文章主要为大家详细介绍了JavaScript中常见加密解密方法的实现,文中的示例代码讲解详细,具有一定的学习价值,感兴趣的小伙伴可以了解一下
    2023-03-03
  • JS实现图片横向滚动效果示例代码

    JS实现图片横向滚动效果示例代码

    图片横向滚动效果,大家可能都已经很熟悉了,本文为大家介绍下使用js实现横向滚动效果,喜欢的朋友可以参考下,希望对大家有所帮助
    2013-09-09
  • JS 组件系列之Bootstrap Table的冻结列功能彻底解决高度问题

    JS 组件系列之Bootstrap Table的冻结列功能彻底解决高度问题

    这篇文章主要介绍了JS 组件系列之Bootstrap Table的冻结列功能彻底解决高度问题,需要的朋友可以参考下
    2017-06-06

最新评论