ES12：如何使用更好的 Array.prototype.at 方法？-JavaScript中文网-JavaScript教程资源分享门户

在最新的 ECMAScript 标准中，引入了一个新的方法：Array.prototype.at()，该方法提供了一种更灵活的方式来访问数组中的元素。本文将介绍如何使用 Array.prototype.at() 方法，并提供一些示例代码。

Array.prototype.at() 方法介绍

Array.prototype.at() 方法允许您访问数组中指定索引位置的元素。该方法的语法如下：

const element = array.at(index)

array：要访问的数组。
index：要访问的元素的索引。

如果指定的索引不存在，则该方法返回 undefined。此外，您还可以使用负数索引访问数组中的元素，如下所示：

const element = array.at(-index)

在此情况下，应该将负数索引视为从数组末尾开始的偏移量。也就是说，-1 等于数组倒数第一个元素。

Array.prototype.at() 方法的优点

Array.prototype.at() 方法与传统的访问数组元素的方法相比，有几个优点。

更好的负数索引支持

在传统的数组访问方式中，使用负数索引访问数组元素会得到一个错误或 null。但是，Array.prototype.at() 方法支持负数索引，让代码更方便，易于理解。

const arr = [1, 2, 3];
const lastElement = arr.at(-1); // 返回 3

避免访问不存在的元素

如果使用传统的数组访问方式，当您访问不存在的元素时，通常会返回 undefined 或抛出异常。Array.prototype.at() 方法会返回 undefined，从而避免了异常的情况。

const arr = [1, 2, 3];
const undefinedElement = arr[4]; // 返回 undefined
const nullElement = arr.at(4);  // 返回 undefined

更好的代码可读性

使用 Array.prototype.at() 方法可以使代码更具可读性。对于特别长的数组或需要深度嵌套的特定索引位置的访问代码，不再需要几行代码才能完成访问。

const arr = [
  [1, 2],
  [3, 4, [5, [6, 7]]]
];
const nestedElement = arr[1][2][1][0];  // 内嵌访问
const betterElement = arr.at(1).at(2).at(1).at(0); // 更好的访问

使用示例

以下是使用 Array.prototype.at() 方法的示例代码。

示例 1：使用正数索引

从数组中获取索引位置为 2 的元素：

const arr = [1, 2, 3];
const thirdElement = arr.at(2); // 返回 3

示例 2：使用负数索引

从数组中获取倒数第二个元素：

const arr = [1, 2, 3];
const secondLastElement = arr.at(-2); // 返回 2

示例 3：使用默认值

如果你想为没有的元素设置默认值，你可以这么做：

const arr = [1, 2, 3];
const defaultElement = arr.at(3) || 'default'; // 返回 "default"

示例 4：与浏览器插件一起使用

您可以使用 Array.prototype.at() 方法在浏览器插件中选择特定的 DOM 元素。例如，以下代码将从特定的表格行中选择单元格：

const tr = document.querySelector('table tr');
const selectedTd = tr.cells.at(2);

结论

Array.prototype.at() 方法提供了一种更灵活的方式来访问数组中的元素，并提高了代码的可读性。该方法还支持负数索引，避免了访问不存在的元素和异常情况。在您的项目中使用 Array.prototype.at() 方法，将帮助您更快地编写干净、优美的代码。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67492b01a1ce0063544453a6

ES12：如何使用更好的 Array.prototype.at 方法？