前言

JavaScript developers are forever students. 今日前端早读课文章由 @迪鲁宾翻译分享。

前端早读课：与你分享“我”的技术视界

正文从这开始～～

https://twitter.com/codewithshripal/status/1646051993054584834

JavaScript .at() 方法是在 8 月发布的 ECMA 国际 TC39 的相对索引建议中引入的，允许开发者根据索引来抓取元素。

在 JavaScript 中选择元素是开发中经常发生的事情，但是，在引入.at() 方法之前，JavaScript 已经有了现有的方法和技术来从列表的开始或结尾或在字符串中选择元素或字符。

方括号符号 []，通常用来获取一个特定索引的元素。但是，这也有其缺点。例如，我们不能使用像 arr[-1] 这样的负数索引语法来访问列表中的最后一项，这在 Python 中已经变得很流行。

因此，开发者求助于使用 slice() 方法和 length 属性来抓取列表末端的项目。尽管如此，它们也有各自的缺点。

在本教程中，我们将看看 JavaScript 的.at() 方法，它的使用案例，以及与先前存在的方法相比，它如何改善开发者的体验。

可索引对象的原型

.at()，该方法位于 prototype 的可索引对象。

这些可以制定索引条目的对象，包括像 Array 、String 、TypedArray ，它们分别是 Array.prototype.at()、String.prototype.at()、%TypedArray%.prototype.at()。

正因为如此，我们可以直接对这些可索引对象执行.at() 方法。

现有的获取列表元素的方法

为了看到.at() 方法的好处，我们将快速浏览一些现有的方法以进行比较。这也可以作为初学者的复习。

让我们考虑一个名为 arr 的元素数组。

 const arr = [1, 2, "three", 4, 5, true, false];

通过在 arr 数组上使用括号符号 []，我们可以得到一个特定索引的元素。例如，arr[0] 返回第一个元素 1 ，以此类推。但是，为了从未知长度的末端获得一个项目，我们使用 length 属性或 slice() 方法。

使用 length 属性

length 属性的语法写法如下。

 arr[arr.length - N];

这里，N 等于从一个列表的末尾开始的第 n 个元素，通过使用该语法，我们可以从该列表的末尾抓取任何元素。

在下面的代码中，我们使用该语法来抓取 arr 数组的最后一个元素。

 const arr = [1, 2, "three", 4, 5, true, false];
 const lastItem = arr[arr.length - 1];
 console.log(lastItem);  // Expected Output: false

这样做很好，但是对于一个简单的任务来说，这种语法可能会很不方便，也很乏味。此外，在处理函数的返回值时，它的一个缺点是迫使我们在应用该语法之前先将返回值存储在一个变量中。

 function appendNumber(arr, N) {
   arr.push(N);
   return arr;
 }

 const tempArr = appendNumber([1, 2, "three", 4, 5, true, false], 6);
 console.log(tempArr[tempArr.length - 1]); // Expected Output: 6

在上面的代码中，在应用 length 属性之前，appendNumber() 函数的返回值首先被存储在 tempArr 变量中。

slice() 方法

开发人员还可以采用 slice() 方法，使用以下语法抓取列表中的最后一项。

 arr.slice(-1)[0]

这种语法允许使用负的索引，这一点你将在本教程后面的.at() 方法中看到。

这里的负索引表示从数组的末端开始的偏移。例如，slice(-1) 删除后面的最后一项，并返回一个新的数组；slice(-2) 删除最后两项，以此类推。

但是在这里，重点是最后一个项目，因此语法中的 slice(-1) 。然后，[0] 符号选择该索引处的项目。

使用该语法，我们可以像这样抓取 arr 数组的最后一个项目。

 const arr = [1, 2, "three", 4, 5, true, false];

 console.log(arr.slice(-1)[0]); // Expected Output: false

与上面的 length 属性不同，这个方法不强迫我们在使用该语法前存储函数的返回值。因此，使其更加灵活。

 function appendNumber(arr, N) {
   arr.push(N);
   return arr;
 }

 console.log(appendNumber([1, 2, "three", 4, 5, true, false], 6).slice(-1)[0]); // 6

尽管如此，这种语法看起来很奇怪，没有描绘出它的意图。当然，它也可能是不方便的。

为什么不用 arr[-1] 来访问数组的最后一个元素？

这个问题经常出现在 JavaScript 的初学者身上，特别是如果他们来自 Python 这样的编程语言。

JavaScript 中的 arr[-1] 符号是一个有效的对象属性。记住 JavaScript 中的一切，包括数组，都是对象。因此，无论何时我们使用括号符号，例如，arr [0] ，我们都会引用键值为 0 的对象属性。

通过用对象符号重写 arr 数组，我们可以得到这样的结果。

 const arr = {
   0: 1,
   1: 2,
   3: "three",
   // ...
 };

 console.log(arr[0]); // Expected Output: 1

在上面的代码中，我们没有一个键 - 1 。所以，arr[-1] ，返回值为 undefined 。如果对象属性有一个键 - 1 ，如下面的代码所示，arr[-1] 返回其相应的值。

 const arr = {
   "-1": "valid"
 };

 console.log(arr[-1]); // Expected Output: valid

这意味着我们不能使用 arr[-1] 来抓取最后一个元素，因为这已经是一个有效的语法。要使用负数索引语法从列表的末端返回一个元素，我们将使用.at() 方法。

.at() 语法

当使用.at() 语法时，它接收一个要返回的项目的索引。当传递一个负的索引时，它从列表或字符串的末端开始计数，并返回找到的项目或字符。否则，它返回 undefined 。

 at(index)

实践中的.at() 方法

如前所述，.at() 方法接收一个要返回的项目的索引。在本节中，我们将介绍其使用情况。

让我们重新审视一下 arr 数组，看看.at() 方法如何让我们无缝地返回一个索引元素。

 const arr = [1, 2, "three", 4, 5, true, false];

 console.log(arr.at(0)); // Expected Output: 1
 console.log(arr.at(2)); // Expected Output: "three"
 console.log(arr.at(-1)); // Expected Output: false
 console.log(arr.at(-3)); // Expected Output: 5

当一个正的索引传递给.at() 方法时，它返回该索引的元素。对于一个负的索引，它从列表中的最后一个元素往回数，并返回该元素。

在上面的代码中，at(-1) 从数组的末端开始计数，并返回 false ，这是找到的元素。同样地，at(-3) 从最后一个数开始数 3，然后返回 5 。

像数组一样，我们可以对字符串做同样的处理。

 const str = "The last alphabet is z";

 console.log(str.at(0)); // Expected Output: T
 console.log(str.at(-1)); // Expected Output: z

正如我们所看到的，这个方法很好用。只用.at(-1) ，我们就可以得到 str 字符串的最后一个字符。如果我们用 length 属性做同样的任务，我们会有一个较长的语法，像这样。

 console.log(str[str.length - 1]); // Expected Output: z

处理一个函数的返回值

.at() 方法与 length 属性不同，它并不强迫我们在使用函数之前将其返回值存储在一个变量中。

下面的代码输出了推送到数组中的最后一个元素。

 function appendNumber(arr, N) {
   arr.push(N);
   return arr;
 }

 console.log(appendNumber([1, 2, "three", 4, 5, true, false], 6).at(-1));
 // Expected Output: 6

在代码中，.at() 方法直接适用于返回值，而不需要先将该值存储在一个变量中。

.at() 方法接受带小数的数字

当一个带小数的数字传递给.at() 方法时，它考虑小数点之前的值，并返回该索引处的项目。

让我们看一下下面的代码。

 const arr = [1, 2, "three", 4, 5, true, false];
 console.log(arr.at(0.6)); // Expected Output: 1
 console.log(arr.at(-3.6)); // Expected Output: 5

在上面的代码中，第一个控制台输出 0 索引处的项目，而第二个控制台从数组的末端开始数三下，输出找到的项目。

当我们想随机选择一个索引元素时，这很有好处。这可以用一个石头剪子布游戏项目来证明。我们可以使用.at() 方法的语法来为计算机确定一个随机选择。

下面的代码说明了我们如何应用.at() 方法来随机选择计算机的选择。

 const computerOptions = ["rock", "paper", "scissors"];
 const randomIndex = Math.random() * computerOptions.length;

 console.log(computerOptions.at(randomIndex));

通过 Math.random()，我们得到一个介于 0 （包括）和数组长度之间的浮点数字。然后，当.at() 方法收到这个浮点数作为索引时，它会考虑小数点之前的值并返回该索引的元素。

使用方括号符号来完成同样的任务是不可能的，除非我们先将随机数下调（也就是说，将数字下调到最接近的整数），如下面的代码所示。

 const randomIndex = Math.floor(Math.random() * computerOptions.length);

 console.log(computerOptions[randomIndex]);

这是因为方括号符号对有小数的数字返回一个 undefined 。

 const arr = [1, 2, "three", 4, 5, true, false];
 console.log(arr[0.6]); // Expected Output: undefined

.at() 方法为我们省去了使用 Math.floor 来设置随机数底线的额外步骤。

浏览器支持

在编写本教程时，除了少数浏览器外，.at() 方法在现代流行的浏览器上运行得很好。请看这里的浏览器支持。

总结

正如我们在本教程中所看到的，.at() 方法在根据索引抓取项目时是令人愉快的。与现有的方法相比，它的使用也很简洁。

关于本文
译者：@迪鲁宾
译文：https://juejin.cn/post/7072407302459883534
作者：@Ibadehin Mojeed
原文：https://blog.logrocket.com/using-javascript-at-method/

这期前端早读课
对你有帮助，帮” 赞 “一下，
期待下一期，帮” 在看” 一下 。