作为一个前端工程师,数据的处理能力必然是很重要的。对于常见的数组,想要获取其中的第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); 

获取数组第N个元素的方法相关推荐

  1. js使用slice方法获取数组中某段元素

    js使用slice方法获取数组中某段元素 slice() 方法可从已有的数组中返回选定的元素. 语法:arrayObj.slice(start, [end]) 参数: start:必需.规定从何处开始 ...

  2. php获取数组的最后一个元素

    php获取数组的最后一个元素的方法.使用php内置函数end(). end() 函数将数组内部指针指向最后一个元素,并返回该元素的值(如果成功).例如: $args=Array('www','phpe ...

  3. php 数组重复最多,PHP获取数组中重复最多元素的简单示例

    这篇文章主要为大家详细介绍了PHP获取数组中重复最多元素的简单示例,具有一定的参考价值,可以用来参考一下. 感兴趣的小伙伴,下面一起跟随512笔记的小玲来看看吧! 本文实例讲述了PHP获取数组中重复最 ...

  4. shell unset之后数组元素个数为_PHP删除数组中指定值的元素的方法

    PHP编程中,有时候需要对数组中指定的元素进行删除操作.这篇文章就说几种php语言中如何对数组中指定值的元素进行删除的方法. PHP unset() 函数 PHP删除数组中的元素需要用到函数 unse ...

  5. python获取数组中最多的元素

    获取数组中数量最多的元素,也就是最频繁的那个元素,方法有很多,下面是3种最简单的: 1.用max函数 sample = [1,2,3,3,3,4,5,5] max(set(sample), key=s ...

  6. JavaScript 数组 array.at() 获取数组中最后一个元素

    志在巅峰的攀登者,不会陶醉在沿途的某个脚印之中,在码农的世界里,优美的应用体验,来源于程序员对细节的处理以及自我要求的境界,年轻人也是忙忙碌碌的码农中一员,每天.每周,都会留下一些脚印,就是这些创作的 ...

  7. 8种在JavaScript数组中查找指定元素的方法(用于开发中数据的处理)

    1.Array.prototype.includes() includes() 方法用来判断一个数组是否包含一个指定的值,如果包含则返回 true,否则返回 false. 该方法支持两个参数value ...

  8. 8种在JavaScript数组中查找指定元素的方法

    来源 | https://www.fly63.com 前言 有时候我们想以某种条件来查找一个数组中是否有满足改条件的元素,然后返回该元素,或者该元素的索引值. JavaScript 给我们提供了多种方 ...

  9. java数组包含某个元素_java中判断数组是否包含某元素的方法

    有两种方法可以判断数组是否包含元素: 方法1, 将数组转换为list,然后使用list的contains方法来判断:Arrays.asList(...).contains(...) java.lang ...

最新文章

  1. 让手机跑SOTA模型快8倍!Facebook AI开源最强全栈视频库:PyTorchVideo!
  2. 软件需求开发的18般武艺
  3. C#自定义工业控件开发
  4. 操作系统的进程状态变迁图_1.操作系统是干什么的?
  5. 理解 iOS 和 macOS 的内存管理
  6. coordinatorlayout 设置不可滑动_滑动关闭App损害iPhone电池寿命,我们需要“改掉强迫症”吗?...
  7. python 显示数据库数据tk_如何使用python显示从Mysql表获取的Tkinter treeview中的数据...
  8. 【资源】媲美搜索神器everything,超过1秒出结果算我输!
  9. tiny4412--linux驱动学习(2)
  10. 设计模式的分类和六大设计原则
  11. jzoj5698-[gdoi2018day1]密码锁【贪心,差分】
  12. 在斯坦福,做 Manning 的 phd 要有多强?
  13. Spring中监听器的详解
  14. 【转】你真的懂select Socket模型吗?
  15. jmeter获取毫秒时间戳
  16. 新手平面设计师如何在网上接单赚钱?
  17. Java经典问题算法大全
  18. hadoop hdfs记录踩到的坑
  19. python时间序列分析包_python关于时间序列的分析
  20. 如何写一封稍微像样的求职邮件

热门文章

  1. 17岁读大学,25岁博士毕业,高颜值医生爆红网络,却坦言只是普通人
  2. K-近邻算法之案例:鸢尾花种类预测--数据集介绍
  3. 爬虫之requests模块发送带header的请求
  4. 收藏 | 多目标跟踪(MOT)入门
  5. 收藏 | 机器学习最全知识点汇总(万字长文)
  6. Flutter控件--Switch 和 SwitchListTile
  7. 任何社区,只要能影响他人成长的人,都可以成为敏捷个人的荣誉会员
  8. caffe这个c++工程的目录结构
  9. asp.net core 创建允许跨域请求的api, cors.
  10. 去掉chrome记住密码后自动填充表单的黄色背景