本文介绍js中数组的at函数,属于比较简单的知识普及性文章,难度不大。

0x00

首先,我们可以思考如下一个问题,如果要获取一个数组的最后一个元素(这是很常用的操作),我们应该怎么做? 相信大部分人能够想到的代码是这样的:

let last = array[ array.length - 1];

嗯,这是最常用的获取数组最后一个元素的方式,依此类推获取倒数第二个,第三个的方式类似。 当然除了这种方式之外,还有其他的方式,比如:

let last = array.slice(-1)[0]

先通过slice获取后面一个元素的数组,然后通过下标0获取最后一个元素。

在比如通过pop获取最后一个元素:

let last = array.pop()

但是 通过pop的方式会改变数组本身,所以一般不建议用。

0x01

无论试用上面那种方式,都感觉很繁琐。 这就让人羡慕python里面的数组操作,可以通过负索引的方式获取最后一个元素,代码如下:

last = array[-1]

js里面不支持负索引的方式。 不过es6新增了一个at方法,可以获取数组的指定索引的元素,并且支持负索引。负索引从后往前计算,-1表示最后一个,-2 表示倒数第二个,依此类推。

因此试用此方法获取最后一个元素会变得简单很多。代码如下:

let last = array.at(-1)

0x02

如果浏览器还不支持这个方法,可以Polyfill:

function at(n) {
// ToInteger() abstract op
n = Math.trunc(n) || 0;
// Allow negative indexing from the end
if (n < 0) n += this.length;
// OOB access is guaranteed to return undefined
if (n < 0 || n >= this.length) return undefined;
// Otherwise, this is just normal property access
return this[n];
} const TypedArray = Reflect.getPrototypeOf(Int8Array);
for (const C of [Array, String, TypedArray]) {
Object.defineProperty(C.prototype, "at",
{ value: at,
writable: true,
enumerable: false,
configurable: true });
}

参考 https://github.com/tc39/proposal-relative-indexing-method#polyfill

0x03

如果对前端和可视化感兴趣,可以和我交流, 关注公号“ITMan彪叔” 可以获取作者微信号,及时收到更多有价值的文章。

JS数组at函数(获取最后一个元素的方法)介绍的更多相关文章

  1. js数组判断是否含有某一个元素

    arr.indexOf('a')如果有则返回的a的下标位置,否则返回false.

  2. js 获取任意一个元素的任意一个样式属性的值

    //谷歌,火狐支持console.log(window.getComputedStyle(my$("dv"),null).left);//IE8支持console.log(my$( ...

  3. js 数组处理函数

    本文转载自有有<js 数组处理函数> concat 将参数列表连接到原数组后面形成一个新的数组并返回,原有数组不受影响. var arr = ["a","b& ...

  4. [Jmeter]Xpath获取元素某个属性的值,以及获取最后一个元素某个属性的值

    XPath获取元素某个属性的值 XPath query:  clients/attribute::total XPath获取最后一个元素某个属性的值 XPath query:   /clients/c ...

  5. 求包含每个有序数组(共k个)至少一个元素的最小区间

    title: 求包含每个有序数组(共k个)至少一个元素的最小区间 toc: false date: 2018-09-22 21:03:22 categories: OJ tags: 归并 给定k个有序 ...

  6. js闭包(函数内部嵌套一个匿名函数:这个匿名函数可将所在函数的局部变量常驻内存)

    js闭包(函数内部嵌套一个匿名函数:这个匿名函数可将所在函数的局部变量常驻内存) 一.总结 1.闭包:就是在一个函数内部嵌套一个匿名函数,这个匿名函数可以访问这个函数的变量. 二.要点 闭包 闭包的相 ...

  7. js进阶 11-17 juqery如何查找一个元素的同级元素

    js进阶 11-17 juqery如何查找一个元素的同级元素 一.总结 一句话总结:三个方法,向前(prev()),向后(next())和兄弟(siblings()),而前面两个每个都对应三个,pre ...

  8. 【转载】C#中List集合使用Last方法获取最后一个元素

    在C#的List集合操作过程中,如果要获取List集合中的最后一个元素对象,则一般会先通过获取到list集合的个数Count属性,然后再使用索引的方式获取到该集合的最后一个位置的元素信息.其实在Lis ...

  9. Codeforces Round #283 (Div. 2) A. Minimum Difficulty【一个数组定义困难值是两个相邻元素之间差的最大值。 给一个数组,可以去掉任意一个元素,问剩余数列的困难值的最小值是多少】

    A. Minimum Difficulty time limit per test 2 seconds memory limit per test 256 megabytes input standa ...

随机推荐

  1. Java重载容易引发的错误—返回类型

    方法的签名仅仅与方法名和参数类型相关,而与访问控制符.返回类型无关,以及方法体中的内容都没有关系,下面用一个例子说明; 如果Student类两种签名,myStudent(int,int)返回int 类 ...

  2. 检查oracle是否是rac

    采样rac集群 [root@shfpdb02 disks]# cat /etc/redhat-release Red Hat Enterprise Linux Server release 6.4 ( ...

  3. 中文版Postman

    作为软件开发从业者,API 调试是必不可少的一项技能,在这方面 Postman 做的非常出色.但是在整个软件开发过程中,API 调试只是其中的一部分,还有很多事情 Postman 无法完成,或者无法高 ...

  4. JavaWeb学习第一阶段结束

    模仿狂神实现简单的用户增删改查,增加了前端登录时的密码验证 JavaWeb学习第一阶段结束,相较于第一阶段的一味学习,第二阶段想拿出更多的时间来阅读别人的源码以及跟着做简单的小项目,同时进一步深入学习 ...

  5. Vue 组件实战

    目录 Vue 组件 axios实现数据请求 计算属性 案例一:首字母大写 案例二:过滤案例 监听属性 局部组件 全局组件 组件通信之父传子 组件通信之子传父 ref属性(组件间通信) 普通标签使用 组 ...

  6. 08. 树莓派安装MySQL

    1. 配置国内源(如果之前设置过可跳过步骤1~步骤2) vim /etc/apt/sources.list.d/raspi.list 2. 添加源 ,文档内原先的内容在开头加#号注释掉,加上下面这个 ...

  7. Spring从入门到源码(一)

    Spring 1.什么是框架? 人话就是:方便干活,架子有了,直接拿来用就完事了. spring,springmvc,mybatis三大开框架 2.架构的演变过程 单一应用架构 垂直应用架构 分布式服 ...

  8. Linux_yum源仓库-本地-网络-练习实验

    1.本地光盘挂载使用yum源 实验环境centos8 系统版本CentOS-8.3.2011-x86_64-dvd1 1)配置前检查 1.1 虚拟机设置选择对应版本镜像文件 1.2 启动虚拟机后处于连 ...

  9. 1001-MySQL学习-第一节自习课

    MySQL学习(第一节自习课) 一. 软件下载.安装 下载地址:https://dev.mysql.com/downloads/installer/ 位置:mysql->installer-&g ...

  10. 1.2 Linux是什么,有哪些特点?

    与大家熟知的 Windows 操作系统软件一样,Linux 也是一个操作系统软件,其 logo 是一只企鹅(如图 1 所示).与 Windows 不同之处在于,Linux 是一套开放源代码程序的.可以 ...