作为一个前端工程师, 数据的处理能力必然是很重要的. 对于常见的数组, 想要获取其中的第 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);
鸿蒙官方战略合作共建 --HarmonyOS 技术社区
来源: http://developer.51cto.com/art/202108/679256.htm