在 JavaScript 中，要访问数组的元素通常有两种方式：使用下标索引和使用迭代方法。使用下标索引时经常会出现数组越界的问题，如果我们访问的下标超过了数组的长度，就会出现错误。为了避免这种问题，ES12 引入了新的方法 Array.at，可以更加安全地访问数组元素。
Array.at 的用法
Array.at 方法接收一个下标参数，返回该下标对应的元素值。如果下标超出数组的长度，则返回 undefined。
const arr = ["a", "b", "c", "d"]; console.log(arr.at(0)); // a console.log(arr.at(-1)); // d console.log(arr.at(5)); // undefined
可以看到，数组中的下标是从 0 开始的，也可以使用负数表示从数组的末尾开始计算下标，-1 表示数组的最后一个元素。如果使用非整数或者不支持 ToInteger 方法的对象作为下标，则会自动转换为整数。
const arr = ["a", "b", "c", "d"];
console.log(arr.at("0")); // a
console.log(arr.at(2.2)); // c
console.log(arr.at({ valueOf: () => 1 })); // bArray.at 的优点
相对于使用下标索引访问数组元素，Array.at 方法有以下优点：
更加安全
使用 Array.at 方法访问数组元素时，不用担心数组越界的问题。如果访问的下标超过了数组的长度，则返回 undefined，而不是抛出错误。
const arr = ["a", "b", "c", "d"]; console.log(arr[5]); // undefined console.log(arr.at(5)); // undefined console.log(arr[-1]); // undefined console.log(arr.at(-1)); // d
可遍历性
Array.at 方法和迭代器协议紧密结合，可以访问所有可迭代的对象（如 Set、Map、字符串等）的元素。这样让访问这些对象的每个元素更加方便和可读性。
const set = new Set(["a", "b", "c"]); console.log(set.at(0)); // a console.log(set.at(1)); // b console.log(set.at(2)); // c
兼容性
虽然 Array.at 方法是 ES12 新引入的方法，但是它的兼容性非常好。在大多数现代浏览器中都已经实现，同时也可以使用 polyfill 库来实现兼容性。
应用实例
下面是一个使用 Array.at 方法的实例，用于搜索一个数组中是否存在指定元素。
-- -------------------- ---- ------- -------- ------------ ---- - ------ --------------- -- ---- --- ----- - -------- ---------------- ---- - ------ --------------------------- -- ---- --- ------ - ----- --- - ----- ---- ---- ----- ------------------------ ------ -- ---- ------------------------ ------ -- ----- ---------------------------- ------ -- - ---------------------------- ------ -- ---------
在这个例子中，我们首先使用 some 方法来查找数组中是否存在指定的元素。如果存在，则返回 true，否则返回 false。这种方法存在一定的风险，因为在 some 方法中返回 false 并不代表在数组中没有找到指定元素，而是表示搜索过程已经结束。
另外，我们可以使用 Array.findIndex 方法来查找指定元素的下标，然后使用 Array.at 方法来获取对应的元素值。这样比使用 some 方法更加安全，因为如果元素不存在，findIndex 方法会返回 -1，而不是返回 false。
总结
使用 ES12 的 Array.at 方法可以更加安全地访问数组元素，避免出现数组越界的问题。同时，Array.at 方法还具有可遍历性和兼容性的优点，非常适合在开发中使用。希望本文可以帮助大家更好地理解和应用这个方法，并有所收获。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648f5f1648841e9894da5597