阿里云-云小站(无限量代金券发放中)
【腾讯云】云服务器、云数据库、COS、CDN、短信等热卖云产品特惠抢购

获取数组第N个元素的方法

274次阅读
没有评论

共计 1522 个字符,预计需要花费 4 分钟才能阅读完成。

导读 作为一个前端工程师,数据的处理能力必然是很重要的。对于常见的数组,想要获取其中的第 N 个元素,究竟有多少种方法呢?

获取数组第 N 个元素的方法

比如,我们要获取数组 array 的 第 3 个元素。

const array = [{ id: 1, name: 'Mario'},  
  {id: 2, name: 'Doom'},  
  {id: 3, name: 'Jack'}, 
  {id: 4, name: 'Yvette'} 
]
1. for 循环

最简单的当然是 for / forEach 循环啦。

let result; 
for (let index = 0; index 
2. Array.prototype.forEach

forEach 不用多介绍,相信大家都知道。这里使用 forEach,而不选中 map 的原因很简单,因为这里不需要返回一个新的数组,甚至也不需要返回值,而且 forEach 还可以中断。如果是一个超级大大大数组,优势就出来了。

let result; 
array.forEach((item, index) => {if(index === 2) { 
    result = item; 
    return; 
  } 
});
3. Array.prototype.find

find 和 forEach 应该都是大家比较常用的方法了。find 返回的是数组中第一个满足条件的元素,用在这里也合适。

const result = array.find((item,index) => index === 2);
4. Array.prototype.slice

slice 于我而言,没有 find 和 forEach 用得频繁。最最最关键的是,每次用 slice 之前,我都会把 splice 在心里想一遍去确认,讨厌这种超级相近的单词。

slice 返回的是一个数组,slice(start, end),如果不传 end 的话,就返回从 start 一直到数组末尾。

const result = array.slice(2,3)[0];

如果 start 是负数的话,那么就会从数组的末尾开始,比如,获取数组的最后一个数:

const lastOne = array.slice(-1)[0];

获取数组的倒数第二个数:

const lastSecond = array.slice(-2, -1)[0];

如果有人跟我一样,对 slice 和 splice 这种超级单词超级像的方法会有点傻傻分不清的话,我是这样去区分的:

splice 比 slice 多个 p,而 splice 会改变原数组,一般会修改原数组的方法都不是我的首选,所以这个多出来的这个 p 真的就是个 P。

记这些东西真的好难,哈哈哈哈,尤记当年记“上北下南,左西右东”时,前半句我一直没有问题,后半句,我总是不分期是“左西右东”,还是“左东右西”,后来,我自己总结了下,封口的要对不封口的,不封口的要对封口的,“左”不封口,所以它要跟一个封口的“西”,“右”是封口的,所以它和“东”在一起,从此之后,我就再也没有高混过了。

5. Array.prototype.at

数组原型新增的方法,个人认为这是最最最方便的方法了。和 slice 不同,它返回的就是第 N 个元素。

const result = array.at(2);

和 slice 类似,如果入参是负数的话,那么将会从数组的末尾开始。

例如,获取最后一个元素:

const lastOne = array.at(-1);

获取倒数第二个元素:

const lastSecond = array.at(-2);

用它用它用它。

6. lodash 的 nth

如果你项目中使用了 lodash 的话,那么 nth 当然也是一个很好的选择。

import {nth} from 'lodash'; 
const result = nth(array, 2);

阿里云 2 核 2G 服务器 3M 带宽 61 元 1 年,有高配

腾讯云新客低至 82 元 / 年,老客户 99 元 / 年

代金券:在阿里云专用满减优惠券

正文完
星哥玩云-微信公众号
post-qrcode
 0
星锅
版权声明:本站原创文章,由 星锅 于2024-07-25发表,共计1522字。
转载说明:除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。
【腾讯云】推广者专属福利,新客户无门槛领取总价值高达2860元代金券,每种代金券限量500张,先到先得。
阿里云-最新活动爆款每日限量供应
评论(没有评论)
验证码
【腾讯云】云服务器、云数据库、COS、CDN、短信等云产品特惠热卖中

星哥玩云

星哥玩云
星哥玩云
分享互联网知识
用户数
4
文章数
19348
评论数
4
阅读量
7803300
文章搜索
热门文章
开发者必备神器:阿里云 Qoder CLI 全面解析与上手指南

开发者必备神器:阿里云 Qoder CLI 全面解析与上手指南

开发者必备神器:阿里云 Qoder CLI 全面解析与上手指南 大家好,我是星哥。之前介绍了腾讯云的 Code...
星哥带你玩飞牛NAS-6:抖音视频同步工具,视频下载自动下载保存

星哥带你玩飞牛NAS-6:抖音视频同步工具,视频下载自动下载保存

星哥带你玩飞牛 NAS-6:抖音视频同步工具,视频下载自动下载保存 前言 各位玩 NAS 的朋友好,我是星哥!...
云服务器部署服务器面板1Panel:小白轻松构建Web服务与面板加固指南

云服务器部署服务器面板1Panel:小白轻松构建Web服务与面板加固指南

云服务器部署服务器面板 1Panel:小白轻松构建 Web 服务与面板加固指南 哈喽,我是星哥,经常有人问我不...
我把用了20年的360安全卫士卸载了

我把用了20年的360安全卫士卸载了

我把用了 20 年的 360 安全卫士卸载了 是的,正如标题你看到的。 原因 偷摸安装自家的软件 莫名其妙安装...
星哥带你玩飞牛NAS-3:安装飞牛NAS后的很有必要的操作

星哥带你玩飞牛NAS-3:安装飞牛NAS后的很有必要的操作

星哥带你玩飞牛 NAS-3:安装飞牛 NAS 后的很有必要的操作 前言 如果你已经有了飞牛 NAS 系统,之前...
阿里云CDN
阿里云CDN-提高用户访问的响应速度和成功率
随机文章
再见zabbix!轻量级自建服务器监控神器在Linux 的完整部署指南

再见zabbix!轻量级自建服务器监控神器在Linux 的完整部署指南

再见 zabbix!轻量级自建服务器监控神器在 Linux 的完整部署指南 在日常运维中,服务器监控是绕不开的...
告别Notion焦虑!这款全平台开源加密笔记神器,让你的隐私真正“上锁”

告别Notion焦虑!这款全平台开源加密笔记神器,让你的隐私真正“上锁”

  告别 Notion 焦虑!这款全平台开源加密笔记神器,让你的隐私真正“上锁” 引言 在数字笔记工...
使用1Panel面板搭建属于你的AI项目环境

使用1Panel面板搭建属于你的AI项目环境

使用 1Panel 面板搭建属于你的 AI 项目环境 在 AI 项目越来越火的今天,很多朋友都想自己动手搭建一...
恶意团伙利用 PHP-FPM 未授权访问漏洞发起大规模攻击

恶意团伙利用 PHP-FPM 未授权访问漏洞发起大规模攻击

恶意团伙利用 PHP-FPM 未授权访问漏洞发起大规模攻击 PHP-FPM(FastCGl Process M...
终于收到了以女儿为原型打印的3D玩偶了

终于收到了以女儿为原型打印的3D玩偶了

终于收到了以女儿为原型打印的 3D 玩偶了 前些日子参加某网站活动,获得一次实物 3D 打印的机会,于是从众多...

免费图片视频管理工具让灵感库告别混乱

一言一句话
-「
手气不错
星哥带你玩飞牛NAS-11:咪咕视频订阅部署全攻略

星哥带你玩飞牛NAS-11:咪咕视频订阅部署全攻略

星哥带你玩飞牛 NAS-11:咪咕视频订阅部署全攻略 前言 在家庭影音系统里,NAS 不仅是存储中心,更是内容...
每天一个好玩的网站-手机博物馆-CHAZ 3D Experience

每天一个好玩的网站-手机博物馆-CHAZ 3D Experience

每天一个好玩的网站 - 手机博物馆 -CHAZ 3D Experience 一句话介绍:一个用 3D 方式重温...
星哥带你玩飞牛NAS硬件03:五盘位+N5105+双网口的成品NAS值得入手吗

星哥带你玩飞牛NAS硬件03:五盘位+N5105+双网口的成品NAS值得入手吗

星哥带你玩飞牛 NAS 硬件 03:五盘位 +N5105+ 双网口的成品 NAS 值得入手吗 前言 大家好,我...
零成本上线!用 Hugging Face免费服务器+Docker 快速部署HertzBeat 监控平台

零成本上线!用 Hugging Face免费服务器+Docker 快速部署HertzBeat 监控平台

零成本上线!用 Hugging Face 免费服务器 +Docker 快速部署 HertzBeat 监控平台 ...
星哥带你玩飞牛NAS硬件 01:捡垃圾的最爱双盘,暴风二期矿渣为何成不老神话?

星哥带你玩飞牛NAS硬件 01:捡垃圾的最爱双盘,暴风二期矿渣为何成不老神话?

星哥带你玩飞牛 NAS 硬件 01:捡垃圾的最爱双盘,暴风二期矿渣为何成不老神话? 前言 在选择 NAS 用预...