本文已经过 dmitripavlutin 授权翻译!
除了普通对象之外,数组是 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() 方法了。
完~ 我是小智,我要去刷碗了,我们下期见~
作者:dmitripavlutin 译者:前端小智 来源:dmitripavlutin
本文转载自微信公众号「大迁世界」,作者大迁世界。转载本文请联系大迁世界公众号。
创业与投资的本质,都是追寻一种能够穿越时空,抵达未来的高效方式。 德勤管理咨...
作者 | 楚奕 来源 | 阿里技术公众号 这篇文章主要从技术视角介绍下跨平台WebCanv...
1.百度是个大骗子,我抄了十几年的满分作文却从未得过满分。 2.学神在刷难题,...
前言 微服务成了互联网架构的标配模式,对微服务之间的调用的流量治理和管控就尤...
基于阿里巴巴的互联网架构、大数据技术,利用混合云架构打造全新的云化电子税 务...
1.在报名的路上,我看见远处的学校,轰!的一声没了。希望如此。 2.男:我一直...
本文转载自微信公众号「后端Q」,作者conan。转载本文请联系后端Q公众号。 概述 ...
1.某女生寝室门口贴着一个告示男生与饭盒不得入内,问何解?答曰两者都会搞大女...
3月24日,腾讯发布2020年Q4及全年财报,其中金融科技及企业服务第四季收入385亿...
背景 有时候我会碰到快速搭建测试服务的需求,比如像这样: 搭建一个 HTTP Servi...