ES7 中的 Array.prototype.at 方法及其使用场景

在 JavaScript 中，数组是一个十分常见的数据结构。ES7 中新增了 Array.prototype.at 方法，用于获取数组中指定位置的元素。本文将介绍 Array.prototype.at 方法的详细用法和常见的使用场景。

Array.prototype.at 方法

Array.prototype.at 方法的语法如下：

array.at(index)

其中，index 表示要获取的元素的索引值。注意，如果 index 为负数，则表示从数组末尾开始倒数的第几个元素。如果 index 超出了数组的索引范围，则返回 undefined。

该方法返回指定位置的元素，如果该位置不存在对应的元素，则返回 undefined。

使用场景

获取数组靠后的元素

在编写代码时，有时候需要从数组的末尾开始获取元素。对于这种情况，通常需要将数组反转后再取对应位置的元素。而使用 Array.prototype.at 方法则可以轻松地实现这个功能。

const arr = [0, 1, 2, 3, 4];
const lastElement = arr.at(-1);
console.log(lastElement); // 4

给数组元素编号

有些情况下，需要对数组元素进行编号，例如需要生成一组带编号的 DOM 元素。此时，可以使用 Array.prototype.at 方法来获取对应编号的元素。

const arr = ['apple', 'banana', 'orange'];
const domList = arr.map((fruit, index) => {
  const li = document.createElement('li');
  li.innerText = `#${index+1} ${fruit}`;
  return li;
});

精准判断数组中元素是否存在

对于一些特定的场景，需要精确地判断数组中是否存在某个元素。使用 Array.prototype.indexOf 方法可以实现该功能，但是该方法只能返回所匹配元素的索引，无法判断是出现在数组的哪个位置。此时，使用 Array.prototype.at 方法可以更加方便地判断出元素的准确位置。

const arr = [0, 1, NaN, undefined, null];
console.log(arr.indexOf(NaN)); // -1
console.log(arr.at(2)); // NaN

总结

本文介绍了 ES7 中新增的 Array.prototype.at 方法，并讲解了该方法的详细语法及使用场景。在处理数组时，使用 Array.prototype.at 方法可以帮助开发者更加便捷地操作和处理数组。

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