在 ES10 中，新增了一个 Array 方法，叫做 at()。它能够让我们在数组中以可读的方式访问到特定索引位置的元素，同时不必使用非常晦涩难懂的语法。
在这篇文章中，我们将为大家深度解析 Array.at() 方法，包括其工作方式、使用案例和最佳实践。最后，我们还将通过一些简单的示例代码来演示如何使用 Array.at() 方法。
Array.at() 方法简介
Array.at() 方法是用来访问数组中某个特定元素的方法，它接收一个索引值（取值范围从 0 到数组长度 - 1）作为参数，返回该位置的元素。如果索引值无效，则返回 undefined。
在之前，我们想要获取数组某个特定位置的元素，需要用下标访问。但是，如果我们试图访问的值超出数组范围会得到一个 undefined 的值，这可能会引起很多潜在的问题，并且程序员必须小心谨慎地检查索引边界。
ES10 引入了 Array.at() 方法，如下示例，通过传递索引值作为参数，可以更加方便地访问数组特定位置的元素：
const fruits = ['apple', 'banana', 'orange', 'kiwi']; console.log(fruits.at(2)); // orange
Array.at() 的工作方式
Array.at() 方法的工作方式与传统的下标访问非常类似。当我们传递一个有效的正整数索引值给 at() 方法时，它会返回该位置上的元素值。例如，如果我们试图访问上面例子中的 fruits 数组的第三个元素，我们需要传递索引值 2：
const fruits = ['apple', 'banana', 'orange', 'kiwi']; console.log(fruits.at(2)); // orange
与此类似，如果我们传递一个超出数组长度范围的索引值，at() 将返回 undefined：
const fruits = ['apple', 'banana', 'orange', 'kiwi']; console.log(fruits.at(4)); // undefined
Array.at() 的使用案例
Array.at() 方法主要用于在数组中访问特定位置的元素，特别是需要访问数组长度之外的元素时。它可以被用于访问无限长的数组，例如生成斐波那契数列：
const fibonacci = [0, 1];
for (let i = 2; i < Number.POSITIVE_INFINITY; i++) {
fibonacci.push(fibonacci.at(i - 1) + fibonacci.at(i - 2));
if (i > 20) break;
}
console.log(fibonacci); // [0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233, 377, 610, 987, 1597, 2584, 4181, 6765]在上面的示例中，我们使用 at() 方法生成了长度无限制的斐波那契数列的前 20 个数字。
Array.at() 的最佳实践
在使用 Array.at() 方法时，我们应该注意以下几点：
1. 避免使用无效的索引值
使用 at() 方法时，需要注意不要传递无效的索引值。如果传递太大或者负数的索引值，会得到一个 undefined 值。
const fruits = ['apple', 'banana', 'orange', 'kiwi']; console.log(fruits.at(-1)); // undefined console.log(fruits.at(5)); // undefined
2. 不要完全依赖 at() 方法来处理数组
虽然 at() 方法可以让我们更方便地访问数组中特定位置的元素，但是我们不应该完全依赖它来处理数组。比方说，在需要迭代整个数组时，我们应该使用传统的 for 循环或者 Array.forEach() 方法。
3. 合理使用 at() 方法
尽管 at() 方法可以在某些情况下让代码更清晰易读，但是我们应该避免在一个小数组中使用过多的 at() 方法。因为 at() 方法需要在执行时检查索引值是否有效，当处理时间复杂度大的数组时，这会导致性能问题。
示例代码
下面是一些使用 Array.at() 方法的示例代码：
-- -------------------- ---- ------- ----- --- - --- -- -- -- --- -- -------- ------------------------ -- - -- -- ---- ---- --- ---- - - -- - - ----------- ---- - ----------------------- - -- ----------- ------------------------ -- --------- -- --------- ----- ------- ------- ------ - ---- ------------------ ------- ------- -- - - -
总结
在这篇文章中，我们学习了 ES10 中新增的 Array.at() 方法，它可以让我们更方便地访问数组中的特定位置的元素。我们深入了解了 at() 方法的工作方式、使用案例和最佳实践。同时，我们还提供了一些简单的示例代码来演示如何使用 Array.at() 方法。了解 at() 方法的使用，有助于我们在写代码过程中避免常见错误，并确保我们的代码更加准确和高效。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64cc8cb85ad90b6d04295575