JavaScript：array.at(index)数组方法介绍及实例

除了普通对象之外，数组也是JavaScript中广泛使用的数据结构。而对数组的一个广泛使用的操作是通过索引来访问元素。

在这篇文章中，我将介绍新的数组方法array.at(index) 。

这个新方法的主要好处是使用负数的索引从数组的末端访问元素，而使用普通的方括号语法是不可能的array[index] 。

1.方括号语法的局限性

通过索引访问数组元素的通常方法是使用方括号array[index] 。

const fruits = ['orange', 'apple', 'banana', 'grape'];
const item = fruits[1];
item; // => 'apple'

表达式array[index] 评估为位于index 的数组项，并被命名为属性访问器。你可能已经知道，JavaScript中数组的索引是从0 开始的。

在大多数情况下，方括号语法是通过正数索引访问项的好方法(>= 0)。它的语法简单，可读性强。

但有时你想从末尾访问元素，而不是从开头。例如，让我们访问数组的最后一个元素。

const fruits = ['orange', 'apple', 'banana', 'grape'];
const lastItem = fruits[fruits.length - 1];
lastItem; // => 'grape'

fruits[fruits.length - 1] 是如何访问数组的最后一个元素的，其中 fruits.length - 1
是最后一个元素的索引。
困难的是，方括号访问器不允许以直接的方式从数组的末端访问项目，而且也不接受负的索引。

幸运的是，一个新的提议（从2021年1月起处于第三阶段）将该方法at() 到数组（以及类型化的数组和字符串），并解决了方括号访问器的许多限制。

2. array.at()方法

简单地说，array.at(index) ，访问index 参数处的元素。

如果index 参数是一个正整数>= 0 ，该方法返回该索引处的项目:

const fruits = ['orange', 'apple', 'banana', 'grape'];
const item = fruits.at(1);
item; // => 'apple'

如果index 参数大于或等于数组的长度，那么，像普通的访问器一样，该方法返回undefined:

const fruits = ['orange', 'apple', 'banana', 'grape'];
const item = fruits.at(999);
item; // => undefined

当你在array.at() 方法中使用一个负的索引时，真正神奇的事情发生了–那么这个元素就从数组的末端被访问。

例如，让我们使用索引-1 来访问数组的最后一个元素:

const fruits = ['orange', 'apple', 'banana', 'grape'];
const lastItem = fruits.at(-1);
lastItem; // => 'grape'

下面是一个更详细的例子，说明array.at() 方法如何访问元素。

const vegetables = ['potatoe', 'tomatoe', 'onion'];
vegetables.at(0); // => 'potatoe'
vegetables.at(1); // => 'tomatoe'
vegetables.at(2); // => 'onion'
vegetables.at(3); // => undefined
vegetables.at(-1); // => 'onion'
vegetables.at(-2); // => 'tomatoe'
vegetables.at(-3); // => 'potatoe'
vegetables.at(-4); // => undefined

如果negIndex 是一个负的索引< 0 ，那么array.at(negIndex) 就会访问索引array.length + negIndex 的元素。这里有一个例子:

const fruits = ['orange', 'apple', 'banana', 'grape'];
const negIndex = -2;
fruits.at(negIndex);              // => 'banana'
fruits[fruits.length + negIndex]; // => 'banana'

3.总结

JavaScript中的方括号语法是按索引访问项目的常用和好方法。只要把索引表达式放在方括号中array[index] ，就可以得到该索引处的数组项。

然而，使用常规访问器从尾部访问项目并不方便，因为它不接受负数的索引。所以，例如，要访问数组的最后一个元素，你必须使用一个变通的表达式。

const lastItem = array[array.length - 1];

幸运的是，新的数组方法array.at(index) 可以让你像普通访问器一样通过索引访问数组元素。此外，array.at(index) 接受负的索引，在这种情况下，该方法从尾部获取元素。

const lastItem = array.at(-1);

只要在你的应用程序中包含array.prototype.atpolyfill，今天就可以开始使用array.at()!