QQ登录

只需要一步,快速开始

APP扫码登录

只需要一步,快速开始

查看: 2934|回复: 0

[HTML/CSS/JS] 你会喜欢的新数组方法:array.at(index)

[复制链接]

等级头衔

积分成就    金币 : 2861
   泡泡 : 1516
   精华 : 6
   在线时间 : 1322 小时
   最后登录 : 2026-1-12

丰功伟绩

优秀达人突出贡献荣誉管理论坛元老活跃会员

联系方式
发表于 2021-2-13 11:51:34 | 显示全部楼层 |阅读模式
       除了普通对象之外,数组是 JavaScript 中广泛使用的数据结构,而数组中常用操作是按索引访问元素。在本文中,我们介绍新的数组方法array.at(index)。
' t/ D" N8 ~8 Q. o  ]1.方括号语法的局限性
3 S) e& f; Y- G7 K+ L  C1 ]2 }2 q% s) R       通过索引访问数组元素一般使用方括号array[index]:4 n' e" V8 e4 J& L4 @
const fruits = ['orange', 'apple', 'banana', 'grape'];

const item = fruits[1];
item; // => 'apple'
      表达式array[index]求值为位于index的数组项,这种方式也叫属性访问器。$ t. }6 e! _: ]3 V/ I8 D, e8 s4 L
       在大多数情况下,方括号语法是通过正索引(>= 0)访问项的好方法,它的语法简单且可读。1 x6 H$ N& Z$ ?: i. P8 M0 G: I% z
       但有时我们希望从末尾访问元素,而不是从开始访问元素。例如,访问数组的最后一个元素:7 k$ v( T! Q: n5 o% [$ [; Y/ v+ v
const fruits = ['orange', 'apple', 'banana', 'grape'];

const lastItem = fruits[fruits.length - 1];
lastItem; // => 'grape'
      fruits[fruits.length - 1]是访问数组最后一个元素的方式,其中fruits.length - 1是最后一个元素的索引。" |' G: i* E6 z8 u: x) H9 G
       问题在于方括号访问器不允许直接从数组末尾访问项,也不接受负下标。
8 _6 t7 C* K$ o$ `/ W: U/ t       幸运的是,一个新的提议(截至2021年1月的第3阶段)将at()方法引入了数组(以及类型化的数组和字符串),并解决了方括号访问器的诸多限制。7 m! P- q* L2 r8 j3 Q4 _: A6 y
2.array.at() 方法
) @- ~/ P* g; ~1 m2 O       简单来说,array.at(index)访问index参数处的元素。
  w9 N% o8 m) [# s$ |: K" S       如果index参数是一个正整数>= 0,该方法返回该索引处的项目。; f9 E7 H5 ~  Y5 |6 F1 F
const fruits = ['orange', 'apple', 'banana', 'grape'];

const item = fruits.at(1);
item; // => 'apple'
      如果index参数大于或等于数组长度,则与常规访问器一样,该方法返回undefined:8 y9 g$ u8 ]. e$ w) I. S5 a
const fruits = ['orange', 'apple', 'banana', 'grape'];

const item = fruits.at(999);
item; // => undefined
      真正神奇的是,当你对array.at()方法使用负下标时,将从数组的末尾访问元素。+ _0 b& h! B, V8 C9 Q7 c: `
const lastItem = fruits.at(-1);
lastItem; // => 'grape'
      下面是更详细的array.at()方法示例:
5 L/ C1 ^' U3 q. _4 h4 R: V
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
: o( b6 u9 w; G7 T* R4 w       如果negIndex小于0,则array.at(negIndex)访问的元素也是array.length + negIndex所在的元素,如下所示:
% \0 u0 ~! `( a* H( G+ k! f- h
const fruits = ['orange', 'apple', 'banana', 'grape'];

const negIndex = -2;

fruits.at(negIndex);              // => 'banana'
fruits[fruits.length + negIndex]; // => 'banana'
3. 总结
% z# n9 i( z$ e       JS 中的方括号语法是通过索引访问项的常用且好的方法。只需将索引表达式放入方括号array[index]中,并获取该索引处的数组项。( B+ c$ }0 t& L5 V5 D$ c5 t
       然而,使用常规访问器从末尾访问项并不方便,因为它不接受负索引。因此,例如,要访问数组的最后一个元素,必须使用一个变通表达式:4 H  E* v& p$ ~3 T. ^, T3 J# A
const lastItem = array[array.length - 1];
      幸运的是,新的数组方法array.at(index)允许我们以常规访问器的方式通过索引访问数组元素。而且,array.at(index)接受负索引,在这种情况下,该方法从末尾取元素:
( Q& O& q! K& N+ j
const lastItem = array.at(-1);
      只需将array.prototype.at polyfill引入到我们的应用程序中,就可以使用 array.at() 方法了。4 G3 e( s. o  k, J5 f
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|手机版|小黑屋|paopaomj.COM ( 渝ICP备18007172号|渝公网安备50010502503914号 )

GMT+8, 2026-2-28 03:53

Powered by paopaomj X3.5 © 2016-2025 sitemap

快速回复 返回顶部 返回列表