js获取数组最后一位元素的五种方法及执行效率对比

 更新时间:2023年08月06日 15:10:19   投稿:yin  
js获取数组最后一位元素的五种方法代码示例,使用console.time和console.timeEnd测量javascript脚本程序执行效率对比

js获取数组最后一位元素的五种方法代码示例,使用console.time和console.timeEnd测量javascript脚本程序执行效率对比。

数组最后一位元素的获取方法

const arrayTest = [11, 22, 33];//示例数组

一、 利用length

let lastValue0 = arrayTest[arrayTest.length - 1];
console.log(lastValue0);

二、 数组slice方法

返回值为包含最后一位元素的新数组

let lastValue1 = arrayTest.slice(-1);
console.log(lastValue1[0]);

三、 数组pop方法

pop() 方法用于删除并返回数组的最后一个元素 (会修改原数组)

let lastValue2 = arrayTest.pop();
console.log(lastValue2);

四、 数组at方法(ES2022新特性)

at() 方法用于接收一个整数值并返回该索引对应的元素,允许正数和负数。负整数从数组中的最后一个元素开始倒数。

let lastValue3 = arrayTest.at(-1);
console.log(lastValue3);

五、数组 reverse()方法

reverse()可以用于颠倒数组中元素的顺序,最前面的元素会变成最后面的元素。

let lastValue4 = arrayTest.reverse()[0];
console.log(lastValue4);

效率测试

代码如下

const arrayTest = [11, 22, 33];
console.time("===> length");
let lastValue0 = arrayTest[arrayTest.length - 1];
console.log(lastValue0);
console.timeEnd("===> length");
// ===> length: 0.120849609375 ms
console.log(arrayTest);
console.time("===> slice");
let lastValue1 = arrayTest.slice(-1);
console.log(lastValue1[0]);
console.timeEnd("===> slice");
// ===> slice: 0.053955078125 ms
console.log(arrayTest);
console.time("===> pop");
let lastValue2 = arrayTest.pop();
console.log(lastValue2);
console.timeEnd("===> pop");
// ===> pop: 0.048095703125 ms
console.log(arrayTest);
arrayTest.push(33);
console.time("===> atat");
let lastValue3 = arrayTest.at(-1);
console.log(lastValue3);
console.timeEnd("===> atat");
// ===> atat: 0.0439453125 ms
console.log(arrayTest);
console.time("===> reverse");
let lastValue4 = arrayTest.reverse()[0];
console.log(lastValue4);
console.timeEnd("===> reverse");
// ===> reverse: 0.072998046875 ms
console.log(arrayTest); 

测试结果表示,at() 方法速度最快,效率最高。

到此这篇关于js获取数组最后一位元素的五种方法及执行效率对比的文章就介绍到这了,更多相关js获取数组最后一位元素的方法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • JS实现随页面滚动显示/隐藏窗口固定位置元素

    JS实现随页面滚动显示/隐藏窗口固定位置元素

    窗口固定位置显示元素,当页面高度大于某高度,并且页面向下滚动时,显示该元素;当页面位置小于某高度,或者页面向上滚动时,隐藏该元素,下面通过本文给大家介绍JS实现随页面滚动显示/隐藏窗口固定位置元素,需要的朋友参考下吧
    2016-02-02
  • JavaScript canvas实现文字时钟

    JavaScript canvas实现文字时钟

    这篇文章主要为大家详细介绍了JavaScript canvas实现文字时钟,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-01-01
  • 深入理解JavaScript中为什么string可以拥有方法

    深入理解JavaScript中为什么string可以拥有方法

    下面小编就为大家带来一篇深入理解JavaScript中为什么string可以拥有方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05
  • 小程序卡片切换效果组件wxCardSwiper的实现

    小程序卡片切换效果组件wxCardSwiper的实现

    这篇文章主要介绍了小程序卡片切换效果组件wxCardSwiper的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-02-02
  • js showModalDialog弹出窗口实例详解

    js showModalDialog弹出窗口实例详解

    本篇文章主要是对js showModalDialog弹出窗口进行了详细的介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-01-01
  • 12306验证码破解思路分享

    12306验证码破解思路分享

    本文给大家分享的是个人对于12306的新的验证码系统的破解思路,仅仅是思路,还没进行实地验证,推荐给大家,抛砖引玉吧。
    2015-03-03
  • 基于JavaScript实现图片连播和联级菜单实例代码

    基于JavaScript实现图片连播和联级菜单实例代码

    这篇文章主要介绍了基于JavaScript实现图片连播和联级菜单实例代码,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2017-07-07
  • TypeScript装饰器与反射元数据实例详解

    TypeScript装饰器与反射元数据实例详解

    TypeScript的装饰器为我们提供了一种强大的工具,可以在运行时改变类的行为,通过理解装饰器的工作原理,我们可以创造更加强大、灵活且易于维护的应用,这篇文章主要介绍了TypeScript装饰器与反射元数据,需要的朋友可以参考下
    2023-09-09
  • 全面接触神奇的Bootstrap导航条实战篇

    全面接触神奇的Bootstrap导航条实战篇

    导航条(navbar)在Bootstrap中是一个独立组件,导航条(navbar)和导航(nav)在Bootstrap中是有明显区别的,本文全面接触神奇的Bootstrap导航条,感兴趣的小伙伴们可以参考一下
    2016-08-08
  • 基于javascript的无缝滚动动画1

    基于javascript的无缝滚动动画1

    这篇文章主要介绍了基于javascript的无缝滚动动画实现,文章通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-08-08

最新评论