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

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

[[381157]]

 本文已经过 dmitripavlutin 授权翻译!

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

1.方括号语法的局限性

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

  1. const fruits = ['orange''apple''banana''grape']; 
  2.  
  3. const item = fruits[1]; 
  4. item; // => 'apple' 

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

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

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

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

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

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

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

2.array.at() 方法

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

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

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

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

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

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

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

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

  1. const vegetables = ['potatoe''tomatoe''onion']; 
  2.  
  3. vegetables.at(0); // => 'potatoe' 
  4. vegetables.at(1); // => 'tomatoe' 
  5. vegetables.at(2); // => 'onion' 
  6. vegetables.at(3); // => undefined 
  7.  
  8. vegetables.at(-1); // => 'onion' 
  9. vegetables.at(-2); // => 'tomatoe' 
  10. vegetables.at(-3); // => 'potatoe' 
  11. vegetables.at(-4); // => undefined 

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

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

  1. const fruits = ['orange''apple''banana''grape']; 
  2.  
  3. const negIndex = -2; 
  4.  
  5. fruits.at(negIndex);              // => 'banana' 
  6. fruits[fruits.length + negIndex]; // => 'banana' 

3. 总结

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

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

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

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

  1. const lastItem = array.at(-1); 

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

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

作者:dmitripavlutin 译者:前端小智 来源:dmitripavlutin

本文转载自微信公众号「大迁世界」,作者大迁世界。转载本文请联系大迁世界公众号。

 

责任编辑:武晓燕 来源: 大迁世界
相关推荐

2022-04-28 08:41:53

JavaScript数组

2022-07-06 10:04:45

JavaScript数组前端

2022-11-13 15:33:30

JavaScript数组开发

2022-08-10 12:02:52

面试JavaScript

2011-12-19 10:33:27

手机博客蝴蝶应用达人

2019-07-25 10:08:05

JavaScript数组转换

2024-11-19 08:35:49

前端开发数组

2023-07-04 15:52:49

JavaScript数组

2023-02-01 08:31:48

2022-09-27 14:36:57

JavaScrip数组开发

2010-01-08 09:30:03

Java数组JVM

2023-11-24 17:13:50

WaveLinux

2016-10-08 21:25:36

Javascript数组Web

2021-07-09 14:26:11

KotlinLogo设计

2022-10-18 16:35:51

JavaScrip数组参数

2020-03-19 15:30:08

JavaScript数组字符串

2024-10-21 13:05:40

2022-11-23 16:12:57

JavaScript数据类型数组

2022-05-06 12:03:16

数组Javascript

2016-02-01 11:45:42

新ICT/IT技术
点赞
收藏

51CTO技术栈公众号