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

简介: 笔记

image.png

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


相关文章
|
2天前
|
缓存 JavaScript 前端开发
Vue.js 路由时用于提高应用程序性能
Vue.js 路由时用于提高应用程序性能
|
2天前
|
存储 JavaScript 索引
js开发:请解释什么是ES6的Map和Set,以及它们与普通对象和数组的区别。
ES6引入了Map和Set数据结构。Map的键可以是任意类型且有序,与对象的字符串或符号键不同;Set存储唯一值,无重复。两者皆可迭代,支持for...of循环。Map有get、set、has、delete等方法,Set有add、delete、has方法。示例展示了Map和Set的基本操作。
16 3
|
7天前
|
算法
Swiper库和Glide.js库的性能有何区别
Swiper和Glide.js是两个流行的响应式轮播图库。Swiper功能强大且灵活,支持多方向滑动,拥有丰富的配置和切换效果,适合复杂需求,其高性能得益于优化的算法和惰性加载。Glide.js则轻量级、快速,专注于基础功能,适合简洁需求。两者各有侧重,选择应基于项目具体需求和性能考虑。
|
8天前
|
JavaScript 前端开发 Java
js 垃圾回收机制的方法
js 垃圾回收机制的方法
|
8天前
|
JavaScript 前端开发 索引
JavaScript 数组中的增、删、改、查
JavaScript 数组中的增、删、改、查
|
8天前
|
JavaScript 前端开发
js数据类型有几类?一共有几种?判断数据类型的方法是什么?
js数据类型有几类?一共有几种?判断数据类型的方法是什么?
|
9天前
|
JavaScript 前端开发
js绑定事件的方法
js绑定事件的方法
22 11
|
9天前
|
JavaScript 前端开发
js怎么删除html元素
js怎么删除html元素
23 10
|
9天前
|
JavaScript 前端开发
js添加、删除、替换或插入元素。
js添加、删除、替换或插入元素。
8 0
|
9天前
|
JavaScript
JS生成uuid的四种方法
JS生成uuid的四种方法
10 0