如何访问数组最后一个元素

在JavaScript中，想要获取数组的最后一个元素并不是一件简单的事情，尤其是和一些其他编程语言相比。比如说，在Python里，我们可以通过负数索引轻松访问数组的最后一个元素。但是在JavaScript的世界里，负数索引这一招就不管用了，你必须使用数组长度减一的方式来定位最后一个元素。

比如说，我们有一个数组，里面装着一些流行的前端框架：

const frameworks = ['Nuxt', 'Remix', 'SvelteKit', 'Ember'];

如果我们尝试用负数索引去访问它：

frameworks[-1];// 这里是不会得到结果的

你会发现，这样做是行不通的，它不会返回任何东西。正确的做法是使用数组的长度减一来获取最后一个元素：

frameworks[frameworks.length - 1];// 这样就能拿到'Ember'了

at方法

为了让数组索引变得更加灵活，JavaScript引入了一个新方法——at。这个方法可以让你通过索引来获取数组中的元素，并且支持负数索引。

frameworks.at(-1);// 这样就能直接拿到'Ember'了

不过，需要注意的是，at方法只是一个访问器方法，它并不能用来改变数组的内容。如果你想要改变数组，还是得用传统的方括号方式。

// 这样是不行的
frameworks.at(-1) = 'React';

// 正确的改变数组的方法是这样的
frameworks[frameworks.length - 1] = 'React';

with方法

另外，如果你想要改变数组的元素并且得到一个新的数组，而不是改变原数组，JavaScript还提供了一个with方法。这个方法可以帮你做到这一点，但是它会返回一个新的数组，原数组不会被改变。

// 这样会返回一个新的数组，原数组不变
frameworks.with(-1, 'React');

但是从2023年7月开始，它已经在主流浏览器中得到了支持。Node.js从20.0.0版本开始也支持了这个方法。

使用with方法，你可以非常方便地修改数组中的元素，并且不用担心会影响到原始数组。这就好比是你在做饭的时候，想要尝尝味道，但又不想直接从锅里尝，于是你盛出一小碗来试味，锅里的菜还是原封不动的。

const updatedFrameworks = frameworks.with(-1, 'React');
// updatedFrameworks 就是 ['Nuxt', 'Remix', 'SvelteKit', 'React']
// 而 frameworks 仍然是原来的数组 ['Nuxt', 'Remix', 'SvelteKit', 'Ember']

兼容性

现在，我们来聊聊这两个方法在浏览器中的兼容性。at方法从2022年开始已经在主流浏览器中得到了支持，Node.js的当前所有长期支持版本也都支持这个方法。

如果你需要在老旧的浏览器上使用这些方法，别担心，core-js提供了相应的polyfill。

这样的设计思路，其实是在鼓励我们写出更加模块化和可维护的代码。你不需要担心因为修改了一个元素而影响到整个数组的状态，这对于编写清晰、可靠的代码是非常有帮助的。

如果你需要在一些比较老的浏览器上使用这些方法，你可能需要引入一个polyfill来填补浏览器的不足。core-js这个库就提供了这样的功能，它可以让你的代码在不同的环境中都能正常运行。

总结

总结一下，at方法和with方法为我们在JavaScript中操作数组提供了更多的便利。它们让我们可以用一种更加直观和灵活的方式来访问和修改数组，同时也保持了代码的清晰和模块化。虽然这些方法是近几年才逐渐被引入的，但是它们已经在现代浏览器中得到了很好的支持。如果你的项目需要在老旧的浏览器上运行，记得使用polyfill来确保你的代码能够正常工作。这样，无论是新手还是经验丰富的开发者，都能够轻松地利用这些新特性来提升我们的编程体验。

本文译自：https://blog.ignacemaes.com/the-easy-way-to-access-the-last-javascript-array-element/