你会喜欢的新数组方法:array.at(index)

川长思鸟来 2022-10-29 03:19 128阅读 0赞

> 作者：dmitripavlutin  
> 译者：前端小智  
> 来源：dmitripavlutin

最近开源了一个 Vue 组件，还不够完善，欢迎大家来一起完善它，也希望大家能给个 star 支持一下，谢谢各位了。

**github 地址：[https://github.com/qq449245884/vue-okr-tree][https_github.com_qq449245884_vue-okr-tree]**

除了普通对象之外，数组是 JavaScript 中广泛使用的数据结构，而数组中常用操作是按索引访问元素。在本文中，我们介绍新的数组方法`array.at(index)`。

## 1.方括号语法的局限性 ##

通过索引访问数组元素一般使用方括号`array[index]`：

const fruits = ['orange', 'apple', 'banana', 'grape'];
    
    const item = fruits[1];
    item; // => 'apple'

表达式`array[index]`求值为位于`index`的数组项，这种方式也叫属性访问器。

在大多数情况下，方括号语法是通过正索引(`>= 0`)访问项的好方法，它的语法简单且可读。

但有时我们希望从末尾访问元素，而不是从开始访问元素。例如，访问数组的最后一个元素：

const fruits = ['orange', 'apple', 'banana', 'grape'];
    
    const lastItem = fruits[fruits.length - 1];
    lastItem; // => 'grape'

`fruits[fruits.length - 1]`是访问数组最后一个元素的方式，其中`fruits.length - 1`是最后一个元素的索引。

问题在于方括号访问器不允许直接从数组末尾访问项，也不接受负下标。

幸运的是，一个新的提议（截至2021年1月的第3阶段）将`at()`方法引入了数组（以及类型化的数组和字符串），并解决了方括号访问器的诸多限制。

## 2.array.at() 方法 ##

简单来说，`array.at(index)`访问`index`参数处的元素。

如果`index`参数是一个正整数`>= 0`，该方法返回该索引处的项目。

const fruits = ['orange', 'apple', 'banana', 'grape'];
    
    const item = fruits.at(1);
    item; // => 'apple'

如果`index`参数大于或等于数组长度，则与常规访问器一样，该方法返回`undefined`：

const fruits = ['orange', 'apple', 'banana', 'grape'];
    
    const item = fruits.at(999);
    item; // => undefined

真正神奇的是，当你对`array.at()`方法使用负下标时，将从数组的末尾访问元素。

const lastItem = fruits.at(-1);
    lastItem; // => 'grape'

下面是更详细的`array.at()`方法示例：

const vegetables = ['potatoe', 'tomatoe', 'onion'];
    
    vegetables.at(0); // => 'potatoe'
    vegetables.at(1); // => 'tomatoe'
    vegetables.at(2); // => 'onion'
    vegetables.at(3); // => undefined
    
    vegetables.at(-1); // => 'onion'
    vegetables.at(-2); // => 'tomatoe'
    vegetables.at(-3); // => 'potatoe'
    vegetables.at(-4); // => undefined

示例地址：https://codesandbox.io/s/array-at-method-2xr74?file=/src/index.js

如果`negIndex`小于`0`，则`array.at(negIndex)`访问的元素也是`array.length + negIndex`所在的元素，如下所示：

const fruits = ['orange', 'apple', 'banana', 'grape'];
    
    const negIndex = -2;
    
    fruits.at(negIndex);              // => 'banana'
    fruits[fruits.length + negIndex]; // => 'banana'

## 3. 总结 ##

JS 中的方括号语法是通过索引访问项的常用且好的方法。只需将索引表达式放入方括号`array[index]`中，并获取该索引处的数组项。

然而，使用常规访问器从末尾访问项并不方便，因为它不接受负索引。因此，例如，要访问数组的最后一个元素，必须使用一个变通表达式

const lastItem = array[array.length - 1];

幸运的是，新的数组方法`array.at(index)`允许我们以常规访问器的方式通过索引访问数组元素。而且，`array.at(index)`接受负索引，在这种情况下，该方法从末尾取元素：

const lastItem = array.at(-1);

只需将[array.prototype.at polyfill][]引入到我们的应用程序中，就可以使用 `array.at()` 方法了。

完~ 我是小智，我要去刷碗了，我们下期见~

--------------------

**代码部署后可能存在的BUG没法实时知道，事后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给大家推荐一个好用的BUG监控工具 [Fundebug][]。**

原文：https://dmitripavlutin.com/javascript-array-at/

### 交流 ###

文章每周持续更新，可以微信搜索「 大迁世界 」第一时间阅读和催更（比博客早一到两篇哟），本文 GitHub [https://github.com/qq449245884/xiaozhi][https_github.com_qq449245884_xiaozhi] 已经收录，整理了很多我的文档，欢迎Star和完善，大家面试可以参照考点复习，另外关注公众号，后台回复**福利**，即可看到福利，你懂的。

[https_github.com_qq449245884_vue-okr-tree]: https://github.com/qq449245884/vue-okr-tree
[array.prototype.at polyfill]: https://github.com/es-shims/Array.prototype.at
[Fundebug]: https://www.fundebug.com/?utm_source=xiaozhi
[https_github.com_qq449245884_xiaozhi]: https://github.com/qq449245884/xiaozhi