ES7 新特性之 Array At 方法 -- 更快更改-JavaScript中文网-JavaScript教程资源分享门户

在 JavaScript 中，数组是一种非常常见的数据类型。在 ES6 中，我们已经看到了很多关于数组的新特性，如扩展运算符、解构赋值、Array.from 和 Array.of 等等。

而在 ES7 中，又新增了一个非常实用的数组方法，那就是 Array.prototype.at() 方法。这个方法可以更快更改数组元素，尤其是在处理大型数组时，可以显著提高性能。

Array.prototype.at() 方法的使用

Array.prototype.at() 方法接收一个参数，即要访问的数组元素的索引，返回该索引对应的元素值。如果索引为负数，则从数组末尾开始计算。

const arr = ['a', 'b', 'c', 'd'];
console.log(arr.at(2)); // 'c'
console.log(arr.at(-1)); // 'd'

需要注意的是，如果给定的索引超出了数组范围，会返回 undefined。

const arr = ['a', 'b', 'c', 'd'];
console.log(arr.at(10)); // undefined

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

相比于传统的数组访问方法 arr[index]，Array.prototype.at() 方法有以下几个优势：

处理大型数组时更快：在访问大型数组时，传统的数组访问方法需要遍历整个数组才能找到指定的元素，而 Array.prototype.at() 方法是直接跳到指定索引处，因此速度更快。
处理稀疏数组时更安全：在访问稀疏数组时，传统的数组访问方法会返回 undefined，而 Array.prototype.at() 方法会返回 undefined 或 null，因此更安全。
处理负数索引时更方便：传统的数组访问方法无法处理负数索引，而 Array.prototype.at() 方法可以直接传入负数索引，非常方便。

Array.prototype.at() 方法的兼容性

由于 Array.prototype.at() 方法是 ES7 中新增的特性，因此在一些旧的浏览器中可能不被支持。不过，我们可以通过使用 polyfill 来解决这个问题。

以下是一个简单的 polyfill 示例：

// javascriptcn.com 代码示例
if (!Array.prototype.at) {
  Array.prototype.at = function (index) {
    const length = this.length;
    index = parseInt(index, 10);
    if (index < 0) {
      index += length;
    }
    for (let i = 0; i < length; i++) {
      if (i === index) {
        return this[i];
      }
    }
    return undefined;
  }
}

总结

Array.prototype.at() 方法是 ES7 中新增的一个非常实用的数组方法，可以更快更改数组元素。尤其是在处理大型数组时，可以显著提高性能。同时，它还可以处理稀疏数组和负数索引，非常方便。不过，由于它是 ES7 中新增的特性，可能不被一些旧的浏览器支持，因此需要使用 polyfill 进行兼容处理。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/657727b4d2f5e1655d0b1f11