从多个方面深入理解JS获取数组最后一个元素

GMPMI • 2025-04-23 18:08 • 编程

一、基础的方法

获取数组最后一个元素在JS中是一个非常简单的操作。我们可以使用数组的length属性来获取数组长度，然后直接通过索引获取最后一个元素。

    const arr = [1, 2, 3, 4, 5];
    const lastElement = arr[arr.length - 1];
    console.log(lastElement); // 5

这个方法在日常开发中非常常见，但是我们也需要注意它的缺点。使用这个方法需要在内存中额外创建一个变量，因为arr.length的获取需要遍历整个数组。此外，这种方式在处理数组为空的时候会报错。因此，我们需要使用if语句来进行判断，而这样会增加代码量。

ES6为我们提供了一些更高效的语法，让我们可以更加轻松地获取数组中的最后一个元素。其中一种方法是使用解构赋值的方式将数组中的最后一个元素赋值给新的变量。

    const arr = [1, 2, 3, 4, 5];
    const [ , , , , lastElement] = arr;
    console.log(lastElement); // 5

这种方式被称为数组解构，代码看起来更加简洁，但是需要注意解构赋值的方式必须要对数组的前几个元素进行赋值操作，因为我们需要使用逗号进行占位。

我们也可以使用Array的slice方法获取最后一个元素。这个方法将会返回一个新的数组。

    const arr = [1, 2, 3, 4, 5];
    const lastElement = arr.slice(-1)[0];
    console.log(lastElement); // 5

这种方法代码量比较少，而且效率也相对较高。但是在大多数情况下，我们只需要获取最后一个元素，这种方法有些浪费，因为它会返回一个新的数组。

使用pop方法将会直接修改原有的数组，返回删除的最后一个元素。

    const arr = [1, 2, 3, 4, 5];
    const lastElement = arr.pop();
    console.log(lastElement); // 5
    console.log(arr); // [1, 2, 3, 4]

这种方法代码极为简洁，可以直接获取并删除最后一个元素。但是如果我们不需要修改原有的数组，就不能使用pop方法。

在日常开发中，我们需要对比不同方法的性能并选择最适合的方法。

我们使用下面的代码和Chrome DevTools的工具来进行性能测试。

    const arr = new Array(1000000).fill("test");

测试结果如下：

我们可以看到，pop方法是所有方法中性能最好的，同时它也非常简洁。因此，在日常开发中我们可以优先考虑使用pop方法来获取数组最后一个元素。

本篇文章详细介绍了js获取数组最后一个元素的五种方式。每种方式都有其优劣，我们可以根据具体的情况选择最适合的方式。我们还使用性能测试的方式对这几种方式进行了对比，pop方法在性能方面是最优的，同时也非常简洁。

原创文章，作者：GMPMI，如若转载，请注明出处：https://www.506064.com/n/371754.html