javascript中怎么快速获取数组指定位置的元素
今天小编给大家分享一下javascript中怎么快速获取数组指定位置的元素的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。
前言
在 JavaScript 中如果我们需要获取一个数组指定位置的元素,通常情况下,我们一般采用以下方法:
1.通过下标直接获取指定元素:arr[index], index 为非负数。
let arr = [1, 4, 5, 8, 10]
// 获取数组的第一个元素
let num1 = arr[0]
// 获取数组的最后一个元素
let num2 = arr[arr.length - 1]
// 获取数组的倒数第二个元素
let num3 = arr[arr.length - 2]
console.log(num1, num2, num3); // 1 10 8
根据正序位置获取指定的元素比较方便,但是根据逆序位置(倒数第几个)获取指定的元素稍微繁琐(需要计算出正序位置)。
正序时 index 为正整数或0,逆序时 index 为负整数。
那么获取对应位置元素的表达式可以表示为:
index 为正数或0:arr[index]
index 为负数: arr[arr.length + index]
2.通过 slice 方法获取
let arr = [2, 4, 6, 8, 10]
// 获取数组的第一个元素
let num4 = arr.slice(0, 1)
// 获取数组的最后一个元素
let num5 = arr.slice(-1)
// 获取数组的倒数第二个元素
let num6 = arr.slice(-2, -1)
console.log(num4[0], num5[0], num6[0]); // 2 10 8
其实在其他语言中比如 python 如果你想要获取倒数第几个元素是可以通过 arr[index] 直接获取(如arr[-1]获取倒数第一个元素), 但是在 JavaScript 中是不支持这样获取的。
为了更方便获取数组指定位置的元素(无论时正序还是逆序位置),数组提供了一个内置方法 at() 可以通过元素下标直接获取指定位置的数组元素
数组的 at() 方法
我们使用 at 方法实现以上案例:
let arr2 = [2, 4, 6, 8, 10]
// 获取数组的第一个元素
let num4 = arr2.at(0)
// 获取数组的最后一个元素
let num5 = arr2.at(-1)
// 获取数组的倒数第二个元素
let num6 = arr2.at(-2)
console.log(num4, num5, num6); // 2 10 8
语法:at(index), index 是整数,其中包括负整数表示从左往右数第几个元素。
获取指定位置不存在的元素返回 undefined
let arr = [2, 4, 6, 8, 10]
console.log(arr[5]); // undefined
获取类数组指定位置元素
let likeArr = {
length: 2,
0: 'vue',
1: 'react'
}
let lang = Array.prototype.at.call(likeArr, 0)
console.log(lang); // vue
对比
方法 | 参数范围 | 简易程度 |
---|---|---|
arr[index] | 非负整数 | 逆序获取元素时需要进行计算,相对繁琐 |
slice(startIndex, endIndex) | 整数 | 一般需要一到两个下标,相对繁琐 |
at(index) | 整数 | 只需一个下标 index ,相对简单 |
相关内容
这些是最新的
热门排行
- THINKPHP5+GatewayWorker+Workerman 开发在线客服系统
- 在手机浏览器网页中点击链接跳转到微信界面的方法
- 尊云网站目录系统 ThinkPHP5网站分类目录程序 v2.2.221011
- CentOS 7安装shadowsock(一键安装脚本)
- AdminTemplate 基于LayUI 2.4.5实现的网站后台管理模板
- 用NW.js(node-webkit)开发多平台的桌面客户端
- PHP生成随机昵称/用户名
- THINKPHP5网站分类目录程序 尊云网站目录系统
- 织梦(DEDECMS)微信支付接口 微信插件
- 基于LayUI开发的 网站后台管理模板 BeginnerAdmin
- 响应式后台网站模板 - AMA.ADMIN
- layuiAdmin后台管理模板 Iframe版
- LayUI 1.0.9 升级 至 LayUI 2.1.4 方法
- 简洁清爽的会员中心模板
- jQuery幸运大转盘抽奖活动代码