除了普通对象之外,数组是 JavaScript 中广泛使用的数据结构,而数组中常用操作是按索引访问元素。在本文中,我们介绍新的数组方法array.at(index)。
6 \$ \6 W+ E! k- _2 S1.方括号语法的局限性
9 \5 L+ F8 Z2 c! S0 l' S/ E 通过索引访问数组元素一般使用方括号array[index]:
& p2 | x$ P) C. u- g! y9 aconst fruits = ['orange', 'apple', 'banana', 'grape'];
const item = fruits[1];
item; // => 'apple' 表达式array[index]求值为位于index的数组项,这种方式也叫属性访问器。( y3 h/ P* o* J2 ~
在大多数情况下,方括号语法是通过正索引(>= 0)访问项的好方法,它的语法简单且可读。
3 `: h& o8 X8 ^& A* F 但有时我们希望从末尾访问元素,而不是从开始访问元素。例如,访问数组的最后一个元素:
+ z9 V4 }& K: D3 E3 ?4 T: Uconst fruits = ['orange', 'apple', 'banana', 'grape'];
const lastItem = fruits[fruits.length - 1];
lastItem; // => 'grape' fruits[fruits.length - 1]是访问数组最后一个元素的方式,其中fruits.length - 1是最后一个元素的索引。/ \: p2 ?: X( {
问题在于方括号访问器不允许直接从数组末尾访问项,也不接受负下标。* u4 {5 G( V/ l8 E7 _% [0 ^
幸运的是,一个新的提议(截至2021年1月的第3阶段)将at()方法引入了数组(以及类型化的数组和字符串),并解决了方括号访问器的诸多限制。7 D) e8 W6 ?+ n( W4 |( a
2.array.at() 方法
9 z. j% W7 b L! W 简单来说,array.at(index)访问index参数处的元素。
" z) Y c: o: P" [2 e$ L" G3 _ 如果index参数是一个正整数>= 0,该方法返回该索引处的项目。 _. @. m; O" h7 Y0 }8 @
const fruits = ['orange', 'apple', 'banana', 'grape'];
const item = fruits.at(1);
item; // => 'apple' 如果index参数大于或等于数组长度,则与常规访问器一样,该方法返回undefined:
% C: A' D# H4 g% e1 \const fruits = ['orange', 'apple', 'banana', 'grape'];
const item = fruits.at(999);
item; // => undefined 真正神奇的是,当你对array.at()方法使用负下标时,将从数组的末尾访问元素。
' m% _) {% \8 D% `3 T2 Z; ?- ]/ Kconst lastItem = fruits.at(-1);
lastItem; // => 'grape' 下面是更详细的array.at()方法示例:5 p5 @: Z2 L8 m2 {0 z3 l
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
& K9 {1 [$ s7 u$ H* d" h t6 ~ 如果negIndex小于0,则array.at(negIndex)访问的元素也是array.length + negIndex所在的元素,如下所示:5 U% g6 I$ C$ F& Q ]2 e4 y
const fruits = ['orange', 'apple', 'banana', 'grape'];
const negIndex = -2;
fruits.at(negIndex); // => 'banana'
fruits[fruits.length + negIndex]; // => 'banana' 3. 总结
$ t1 L& J4 o% m) `& [3 [, F JS 中的方括号语法是通过索引访问项的常用且好的方法。只需将索引表达式放入方括号array[index]中,并获取该索引处的数组项。
+ z! Z& C- B9 V3 o* Y# e7 \ 然而,使用常规访问器从末尾访问项并不方便,因为它不接受负索引。因此,例如,要访问数组的最后一个元素,必须使用一个变通表达式:& x+ e/ ` C1 T
const lastItem = array[array.length - 1]; 幸运的是,新的数组方法array.at(index)允许我们以常规访问器的方式通过索引访问数组元素。而且,array.at(index)接受负索引,在这种情况下,该方法从末尾取元素:
1 U$ y2 B. W) O7 K+ p; _const lastItem = array.at(-1); 只需将array.prototype.at polyfill引入到我们的应用程序中,就可以使用 array.at() 方法了。1 C; r% E& h, i5 R ?4 e" W* z
|