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

作者:天行无忌 时间:2024-06-07 15:25:25 

当需要从 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 属性的方法是最慢的,属于是获取数组最后一个元素的最常用方法。

来源:https://blog.51cto.com/devpoint/6038512

标签:JavaScript,数组
0
投稿

猜你喜欢

  • MYSQL教程:MySQL Show命令

    2009-12-20 17:54:00
  • Golang异常处理之defer,panic,recover的使用详解

    2023-08-06 14:20:09
  • 详细分析Python可变对象和不可变对象

    2021-03-10 22:50:10
  • Mootools常用方法扩展(四)

    2009-02-21 11:12:00
  • python数据库编程 Mysql实现通讯录

    2024-01-24 17:53:11
  • python列表与列表算法详解

    2022-09-20 20:36:51
  • Python selenium爬取微信公众号文章代码详解

    2023-12-10 19:43:18
  • Python中字符串对象语法分享

    2022-04-19 14:48:34
  • 教你在SQL Server数据库中导入导出数据

    2008-12-09 14:42:00
  • sqoop如何指定pg库的模式(方法详解)

    2022-09-30 02:52:47
  • 当设计师遭遇HTML5

    2011-08-05 18:59:53
  • ASP中3种分页显示的性能比较

    2007-08-15 13:37:00
  • Python 海象运算符( :=)的三种用法

    2023-08-25 02:46:08
  • python自动化发送邮件实例讲解

    2023-11-11 16:01:41
  • Python 中导入csv数据的三种方法

    2022-02-24 10:12:10
  • 用C#对ADO.NET数据库完成简单操作的方法

    2024-01-15 09:12:58
  • 10个超实用jQuery插件资源

    2009-07-17 18:54:00
  • 一个奇怪的CSS现象

    2010-02-10 12:28:00
  • Oracle中的translate函数和replace函数的用法详解

    2024-01-16 15:46:29
  • MySQL InnoDB 二级索引的排序示例详解

    2024-01-15 17:11:53
  • asp之家 网络编程 m.aspxhome.com