在 ES12 中，JavaScript 新增了 Array.prototype.at() 方法用于获取数组中指定索引位置的元素，这个新方法提供了一种非常便捷的方式来访问数组中指定位置的元素。但是，甚至在 Array.prototype.at() 的官方文档中也提供了一些注意事项和有关该方法的一些问题，本文将一一讨论并提供解决方案。
Array.prototype.at() 方法的功能
Array.prototype.at() 方法是一个新的实例方法，可以从数组中获取指定索引位置上的元素。 它的语法如下：
arr.at(index)
其中 index 参数为要访问的索引。
问题 1：Array.prototype.at() 可能会报错
当通过 Array.prototype.at() 方法访问不存在的索引时，它不会返回 undefined，而是会抛出 RangeError 异常。因此，如果试图访问索引超出范围或非数字类型的索引（例如字符串或空值），该函数将抛出错误。
var arr = [1, 2, 3]; arr.at(5) // RangeError: Invalid array index
解决方案
为了避免 RangeError 异常的抛出，可以使用可选的 fallback 值，它将在访问非法索引时返回。这种情况下，fallback 值通常会作为一个兜底的值或默认值返回。
const arr = ['apple', 'orange', 'banana']; console.log(arr.at(0)); // "apple" console.log(arr.at(5)); // undefined console.log(arr.at(5) || 'no value'); // "no value" console.log(arr.at(5) ?? 'no value'); // "no value"
在上面的示例代码中，如果索引5不在数组中，倒数第二行和最后一行代码将会输出 "no value"，这个值实际上就是fallback 值。
问题 2：Array.prototype.at() 无法访问对象属性
Array.prototype.at() 方法用于获取数组中指定位置的元素，但是如果数组元素是一个对象，该方法无法访问对象属性。也就是说，Array.prototype.at() 方法只能返回数组元素本身，并且不能进一步访问其属性。
const fruits = [{ name: 'apple' }, { name: 'banana' }, { name: 'orange' }];
console.log(fruits.at(0)); // { name: 'apple' }
console.log(fruits.at(0).name); // TypeError: fruits.at(0).name is not a function解决方案
为了访问数组元素的属性，可以使用 map() 或 forEach() 方法来实现。
const fruits = [{ name: 'apple' }, { name: 'banana' }, { name: 'orange' }];
console.log(fruits.map(fruit => fruit.name).at(0)); // "apple"
console.log(fruits[0].name); // "apple"在上面的示例代码中，map() 方法通过返回数组中每个对象的 name 属性来创建一个新数组。然后，我们可以使用 Array.prototype.at() 获取所需的元素。
问题 3：Array.prototype.at() 方法是一个相对较新的方法
由于 Array.prototype.at() 方法是一个相对较新的方法，因此不是所有的 JavaScript 引擎都支持该方法。如果您的目标是编写代码，能够在广泛的浏览器和运行环境上运行，你需要检查并实现兼容性。
-- -------------------- ---- -------
----- --- - --- -- ---
-- ---------- -------------------- --
-- ----- -- --- --- ------ -
------------------ - --------------- -
----- --- - -------------
----- --- - ---------- --- --
----- ------------- - ----- -- --
----- - - ------------- - - - --- - ------------- - --------------
------ - -- - -- - - --- - ------ - ----------
-
-在上面的代码段中，我们使用 Object() 方法来将 this 绑定到数组上，然后使用位运算符将索引值转换为整数。最后，我们使用条件语句来检查索引值是否在有效范围内，并返回对应的数组元素或 undefined。
总结
在 ES12 中，Array.prototype.at() 方法提供了一种快速访问数组中特定位置元素的方法。但是，在实际的开发过程中，可能会遇到 RangeError、无法访问对象属性的问题等。通过将 fallback 值传递给该方法，使用 map() 或 forEach() 来访问对象属性以及实现兼容性等方法，可以解决这些问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/654ce0467d4982a6eb633621