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

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

获取数组第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 < array.length; index++) { if (index === 2) { result = array[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); 

http://lihuaxi.xjx100.cn/news/283900.html

相关文章

【MySQL】MySQL表的增删改查(进阶-下)

目录&#x1f4a8;1.自连接1.1 创建案列表&#xff1a;2.子查询3.合并查询4. MySQL表的增删改查内容重点总结1.自连接 自连接是指在同一张表连接自身进行查询。是把自己和自己进行笛卡尔积&#xff0c;属于SQL中的一种技巧。 &#xff08;用的不多&#xff0c;只是用来处理一些…

明星企业内推+BAT面经,长三角的开发者联合起来!

“为什么公司宁愿花20K招新人&#xff0c;也不愿给老员工加到20K&#xff1f;”这个热门的微博话题戳起了很多人的痛处&#xff0c;但根据 CSDN &《程序员》杂志发布的「中国软件开发者薪资调查报告」&#xff0c;有32.98%的开发者在过去曾换过工作&#xff0c;其中有72.5%…

请马上卸载Notepad++...!

文末有干货 “视学算法”&#xff0c;马上关注真爱&#xff0c;请置顶或星标转自&#xff1a;开发者技术前线作者&#xff1a;lucida链接&#xff1a;http://lucida.me/blog/sublime-text-complete-guide/# 摘要&#xff08;Abstract&#xff09;由于Notepad开发拥有者发表的不…

hadoop2 自定义OutputFormat场景杂记

为什么80%的码农都做不了架构师&#xff1f;>>> 提示&#xff1a;以下代码都是在 Hadoop2.7.x 最新API下进行。 场景1&#xff1a;自定义输出文件名前缀 示例&#xff1a;计算学生的平均分成绩&#xff0c;输出&#xff1a;学生姓名和平均分成绩&#xff1b;要求&a…

Mysql使用存储过程快速添加百万数据

这篇文章主要介绍了Mysql使用存储过程快速添加百万数据,本文通过实例代码给大家介绍的非常详细&#xff0c;对大家的学习或工作具有一定的参考借鉴价值&#xff0c;需要的朋友可以参考下 前言 为了体现不加索引和添加索引的区别&#xff0c;需要使用百万级的数据&#xff0c;但…

程序员拯救乐坛?OpenAI用“逆天”GPT2.0搞了个AI音乐生成器

作者 | 琥珀出品 | AI科技大本营&#xff08;id&#xff1a;rgznai100&#xff09;基于深度神经网络进行语音合成、音乐风格迁移&#xff0c;正成为不少致力于“让人人成为音乐家”的研究人员所追求的事情。像此前我们报道的微软小冰作词又作曲&#xff0c;AI帮清华博士写说唱歌…

【MySQL】MySQL的索引

目录索引1.1 概念1.2 作用1.3 使用场景1.4 使用1.5 索引最常用的数据结构索引 1.1 概念 索引是一种特殊的文件&#xff0c;包含着对数据表里所有记录的引用指针。可以对表中的一列或多列创建索引&#xff0c; 并指定索引的类型&#xff0c;各类索引有各自的数据结构实现。 1…

钉钉被小学生逼疯,拍片在线求饶哈哈哈哈

这已经是钉钉一星事件的第三次转折了。哈哈哈哈哈哈哈哈哈哈为什么哈哈哈哈哈或或或或或或或或或或或哈哈哈哈哈哈哈哈哈哈为什么哈哈哈真的一次比一次好笑我要是钉钉我真的欲哭无泪&#xff0c;谁能想到我一个这么强大的APP有一天被小学生逼得启动了危机公关。帮不了解全过程的…