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

原文链接:blog.ignacemaes.com/the-easy-wa...

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

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

jsx 复制代码
const frameworks = ['Nuxt', 'Remix', 'SvelteKit', 'Ember'];

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

jsx 复制代码
frameworks[-1];// 这里是不会得到结果的

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

jsx 复制代码
frameworks[frameworks.length - 1];// 这样就能拿到'Ember'了

at方法

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

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

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

jsx 复制代码
// 这样是不行的
frameworks.at(-1) = 'React';

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

with方法

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

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

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

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

jsx 复制代码
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来确保你的代码能够正常工作。这样,无论是新手还是经验丰富的开发者,都能够轻松地利用这些新特性来提升我们的编程体验。

相关推荐
某公司摸鱼前端3 小时前
uniapp socket 封装 (可拿去直接用)
前端·javascript·websocket·uni-app
要加油哦~3 小时前
vue | 插件 | 移动文件的插件 —— move-file-cli 插件 的安装与使用
前端·javascript·vue.js
wen's5 小时前
React Native 0.79.4 中 [RCTView setColor:] 崩溃问题完整解决方案
javascript·react native·react.js
vvilkim6 小时前
Electron 自动更新机制详解:实现无缝应用升级
前端·javascript·electron
vvilkim6 小时前
Electron 应用中的内容安全策略 (CSP) 全面指南
前端·javascript·electron
aha-凯心6 小时前
vben 之 axios 封装
前端·javascript·学习
漫谈网络6 小时前
WebSocket 在前后端的完整使用流程
javascript·python·websocket
失落的多巴胺8 小时前
使用deepseek制作“喝什么奶茶”随机抽签小网页
javascript·css·css3·html5
DataGear8 小时前
如何在DataGear 5.4.1 中快速制作SQL服务端分页的数据表格看板
javascript·数据库·sql·信息可视化·数据分析·echarts·数据可视化
影子信息8 小时前
vue 前端动态导入文件 import.meta.glob
前端·javascript·vue.js