獲取陣列第N個元素的方法
導讀 | 作為一個前端工程師,資料的處理能力必然是很重要的。對於常見的陣列,想要獲取其中的第N個元素,究竟有多少種方法呢? |
比如,我們要獲取陣列 array 的 第 3 個元素。
const array = [ { id: 1, name: 'Mario' }, { id: 2, name: 'Doom'}, { id: 3, name: 'Jack'}, { id: 4, name: 'Yvette'} ]
最簡單的當然是 for / forEach 迴圈啦。
let result; for (let index = 0; index < array.length; index++) { if (index === 2) { result = array[index]; } }
forEach 不用多介紹,相信大家都知道。這裡使用 forEach,而不選中 map 的原因很簡單,因為這裡不需要返回一個新的陣列,甚至也不需要返回值,而且 forEach 還可以中斷。如果是一個超級大大大陣列,優勢就出來了。
let result; array.forEach((item, index) => { if(index === 2) { result = item; return; } });
find 和 forEach 應該都是大家比較常用的方法了。find 返回的是陣列中第一個滿足條件的元素,用在這裡也合適。
const result = array.find((item,index) => index === 2);
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。
記這些東西真的好難,哈哈哈哈,尤記當年記 “上北下南,左西右東”時,前半句我一直沒有問題,後半句,我總是不分期是“左西右東”,還是“左東右西”,後來,我自己總結了下,封口的要對不封口的,不封口的要對封口的,“左”不封口,所以它要跟一個封口的“西”,“右”是封口的,所以它和“東”在一起,從此之後,我就再也沒有高混過了。
陣列原型新增的方法,個人認為這是最最最方便的方法了。和 slice 不同,它返回的就是第N個元素。
const result = array.at(2);
和 slice 類似,如果入參是負數的話,那麼將會從陣列的末尾開始。
例如,獲取最後一個元素:
const lastOne = array.at(-1);
獲取倒數第二個元素:
const lastSecond = array.at(-2);
用它用它用它。
如果你專案中使用了 lodash 的話,那麼 nth 當然也是一個很好的選擇。
import { nth } from 'lodash'; const result = nth(array, 2);
原文來自:
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69955379/viewspace-2791119/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- 【IDL】獲取n*n陣列的對角線元素的方法陣列
- JavaScript 獲取第n個li元素JavaScript
- 獲取一個陣列裡面第K大的元素陣列
- jQuery在元素集合中獲取第N個元素jQuery
- jquery獲取指定li元素後面的第n個li元素jQuery
- JavaScript獲取陣列最後一個元素JavaScript陣列
- css 獲取從第n個開始,之後的所有元素CSS
- JS陣列at函式(獲取最後一個元素的方法)介紹JS陣列函式
- js如何獲取兩個陣列共有的元素JS陣列
- js如何獲取指定元素在陣列中個數JS陣列
- JavaScript獲取元素在陣列中的位置JavaScript陣列
- js如何獲取指定陣列元素在陣列中的索引值JS陣列索引
- js獲取元素的方法(獲取html元素的方法)JSHTML
- 陣列中的第K個最大元素陣列
- php獲取並刪除陣列的第一個和最後一個元素PHP陣列
- javascript如何獲取指定元素在陣列中的數目JavaScript陣列
- jquery如何獲取li元素的前n個程式碼例項jQuery
- 陣列呼叫c#讀取陣列中獲取最大最小值方法陣列C#
- python如何獲取陣列元素的下標並輸出Python陣列
- 215. 陣列中的第K個最大元素陣列
- JS刪除陣列裡的某個元素方法JS陣列
- JavaScript獲取當前li元素是第幾個JavaScript
- 如何新增javascript陣列n乘以相同的元素JavaScript陣列
- 二維陣列的獲取陣列
- CSS 第N個子元素樣式CSS
- jQuery查詢第n個li元素jQuery
- asp.net 實現獲取一個集合陣列中出現次數最多的元素ASP.NET陣列
- JS 不使用 for forEach 獲取兩陣列中重複的元素JS陣列
- js獲取陣列元素中的最大值和最小值JS陣列
- 求無序陣列總第n大的數陣列
- 尋找陣列中第K大的元素陣列
- 查詢陣列中第K大的元素陣列
- PHP獲取陣列最後一個值PHP陣列
- 合併JavaScript陣列的N種方法JavaScript陣列
- 獲取倒數第幾個元素程式碼例項
- css如何匹配倒數第n個元素CSS
- js獲取陣列中元素出現的次數程式碼例項JS陣列
- 力扣-215. 陣列中的第K個最大元素力扣陣列