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

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

前端小智

发布于 12 分钟前

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

github 地址:https://github.com/qq44924588...

除了普通对象之外,数组是 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/arra...

如果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/ja...

交流

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

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

javascript前端vue.js

阅读 24发布于 12 分钟前

本作品系原创,采用《署名-非商业性使用-禁止演绎 4.0 国际》许可协议


终身学习者

我要先坚持分享20年,大家来一起见证吧。

avatar

前端小智

前端开发工程师

我不是什么大牛,我其实想做的就是一个传播者。内容可能过于基础,但对于刚入门的人来说或许是一个窗口,一个解惑之窗。我要先坚持分享20年,大家来一起见证吧。

55.9k 声望

9.6k 粉丝

0 条评论

得票时间

avatar

前端小智

前端开发工程师

我不是什么大牛,我其实想做的就是一个传播者。内容可能过于基础,但对于刚入门的人来说或许是一个窗口,一个解惑之窗。我要先坚持分享20年,大家来一起见证吧。

55.9k 声望

9.6k 粉丝

宣传栏

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

github 地址:https://github.com/qq44924588...

除了普通对象之外,数组是 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/arra...

如果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/ja...

交流

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

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

以上是 【JS】你会喜欢的新数组方法:array.at(index) 的全部内容, 来源链接: www.h5w3.com/114022.html

回到顶部