在 JavaScript 中，访问数组的最后一个元素并不像在其他语言中那样直接。例如，在 Python 中，您可以使用负索引来访问数组的最后一个元素。然而，在 JavaScript 中，使用带有方括号 [] 的负索引是行不通的。相反，您必须使用数组长度减一的索引来访问最后一个元素。

const frameworks = ['Nuxt', 'Remix', 'SvelteKit', 'Ember'];
// ❌ 无法正常工作
frameworks[-1];
// undefined
// ✅ 可以正常工作
frameworks[frameworks.length - 1];
// 'Ember'

为了使数组索引更灵活，JavaScript 引入了 at 方法。at 方法允许您在数组中获取给定索引处的元素，并且支持负索引。

const frameworks = ['Nuxt', 'Remix', 'SvelteKit', 'Ember'];
// 🔥 支持负索引
frameworks.at(-1);
// 'Ember'

然而，at 方法只是一个访问器方法。这意味着您不能使用它来改变数组。如果您想要改变数组，您必须使用方括号表示法。

const frameworks = ['Nuxt', 'Remix', 'SvelteKit', 'Ember'];
// ❌ 无法正常工作
frameworks.at(-1) = 'React';
// Uncaught ReferenceError: Invalid left-hand side in assignment
// ✅ 可以正常工作
frameworks[frameworks.length - 1] = 'React';
// ['Nuxt', 'Remix', 'SvelteKit', 'React']

同样，也引入了一个支持负索引的用于改变数组的类似方法。with 方法允许您在数组中更改给定索引处元素的值。然而，它会返回一个带有更改的新数组，因为它不会改变原始数组。

const frameworks = ['Nuxt', 'Remix', 'SvelteKit', 'Ember'];
// ✅ 返回一个带有更改的副本
frameworks.with(-1, 'React');
// ['Nuxt', 'Remix', 'SvelteKit', 'React']

浏览器支持

at 函数从 2022 年开始具有基线 浏览器支持。Node 在所有当前的 LTS 版本中都提供支持。

如果您的目标是旧版浏览器，core-js 中有一个 polyfill 可供使用。

with 函数较新，自 2023 年 7 月起具有基线 浏览器支持。Node 从版本 20 开始支持。

幸运的是，core-js 中也有一个 polyfill 可供使用。

结论

本文介绍了 at 方法来访问数组中的元素。它支持负索引，在选择最后一个元素时非常方便。with 方法是一种新的语法，允许您更改数组中给定索引处元素的值。然而，它会返回一个带有更改的新数组，因为它不会改变原始数组。这两种方法在现代浏览器中受支持，但您可能需要为旧版浏览器使用一个 polyfill。