建站
咨詢(xún)
售后
建站咨詢(xún)
新聞中心
作為一個(gè)前端工程師，數(shù)據(jù)的處理能力必然是很重要的。對(duì)于常見(jiàn)的數(shù)組，想要獲取其中的第N個(gè)元素，究竟有多少種方法呢?
創(chuàng)新互聯(lián)建站是一家業(yè)務(wù)范圍包括IDC托管業(yè)務(wù),虛擬空間、主機(jī)租用、主機(jī)托管，四川、重慶、廣東電信服務(wù)器租用,眉山聯(lián)通機(jī)房，成都網(wǎng)通服務(wù)器托管,成都服務(wù)器租用,業(yè)務(wù)范圍遍及中國(guó)大陸、港澳臺(tái)以及歐美等多個(gè)國(guó)家及地區(qū)的互聯(lián)網(wǎng)數(shù)據(jù)服務(wù)公司。
比如，我們要獲取數(shù)組 array 的 第 3 個(gè)元素。
- const array = [
- { id: 1, name: 'Mario' },
- { id: 2, name: 'Doom'},
- { id: 3, name: 'Jack'},
- { id: 4, name: 'Yvette'}
- ]
1. for 循環(huán)
最簡(jiǎn)單的當(dāng)然是 for / forEach 循環(huán)啦。
- let result;
- for (let index = 0; index < array.length; index++) {
- if (index === 2) {
- result = array[index];
- }
- }
2. Array.prototype.forEach
forEach 不用多介紹，相信大家都知道。這里使用 forEach，而不選中 map 的原因很簡(jiǎn)單，因?yàn)檫@里不需要返回一個(gè)新的數(shù)組，甚至也不需要返回值，而且 forEach 還可以中斷。如果是一個(gè)超級(jí)大大大數(shù)組，優(yōu)勢(shì)就出來(lái)了。
- let result;
- array.forEach((item, index) => {
- if(index === 2) {
- result = item;
- return;
- }
- });
3. Array.prototype.find
find 和 forEach 應(yīng)該都是大家比較常用的方法了。find 返回的是數(shù)組中第一個(gè)滿足條件的元素，用在這里也合適。
- const result = array.find((item,index) => index === 2);
4. Array.prototype.slice
slice 于我而言，沒(méi)有 find 和 forEach 用得頻繁。最最最關(guān)鍵的是，每次用 slice 之前，我都會(huì)把 splice 在心里想一遍去確認(rèn)，討厭這種超級(jí)相近的單詞。
slice 返回的是一個(gè)數(shù)組，slice(start, end)，如果不傳 end 的話，就返回從 start一直到數(shù)組末尾。
- const result = array.slice(2,3)[0];
如果 start 是負(fù)數(shù)的話，那么就會(huì)從數(shù)組的末尾開(kāi)始，比如，獲取數(shù)組的最后一個(gè)數(shù)：
- const lastOne = array.slice(-1)[0];
獲取數(shù)組的倒數(shù)第二個(gè)數(shù)：
- const lastSecond = array.slice(-2, -1)[0];
如果有人跟我一樣，對(duì) slice 和 splice 這種超級(jí)單詞超級(jí)像的方法會(huì)有點(diǎn)傻傻分不清的話，我是這樣去區(qū)分的：
splice 比 slice 多個(gè) p，而 splice 會(huì)改變?cè)瓟?shù)組，一般會(huì)修改原數(shù)組的方法都不是我的首選，所以這個(gè)多出來(lái)的這個(gè) p 真的就是個(gè) P。
記這些東西真的好難，哈哈哈哈，尤記當(dāng)年記 “上北下南，左西右東”時(shí)，前半句我一直沒(méi)有問(wèn)題，后半句，我總是不分期是“左西右東”，還是“左東右西”，后來(lái)，我自己總結(jié)了下，封口的要對(duì)不封口的，不封口的要對(duì)封口的，“左”不封口，所以它要跟一個(gè)封口的“西”，“右”是封口的，所以它和“東”在一起，從此之后，我就再也沒(méi)有高混過(guò)了。
5. Array.prototype.at
數(shù)組原型新增的方法，個(gè)人認(rèn)為這是最最最方便的方法了。和 slice 不同，它返回的就是第N個(gè)元素。
- const result = array.at(2);
和 slice 類(lèi)似，如果入?yún)⑹秦?fù)數(shù)的話，那么將會(huì)從數(shù)組的末尾開(kāi)始。
例如，獲取最后一個(gè)元素:
- const lastOne = array.at(-1);
獲取倒數(shù)第二個(gè)元素：
- const lastSecond = array.at(-2);
用它用它用它。
6. lodash 的 nth
如果你項(xiàng)目中使用了 lodash 的話，那么 nth 當(dāng)然也是一個(gè)很好的選擇。
- import { nth } from 'lodash';
- const result = nth(array, 2);
分享標(biāo)題：你能想到多少種獲取數(shù)組第N個(gè)元素的方法？
網(wǎng)站URL：http://m.5511xx.com/article/cocejho.html
