前言

最近和女友，咳咳...(說(shuō)出來(lái)可能會(huì)被打s)學(xué)習(xí)JS數(shù)組方法，用幾個(gè)字形容的話(huà)就是聽(tīng)說(shuō)過(guò)，實(shí)際使用、遇到的時(shí)候就分不清具體方法會(huì)得到怎樣的結(jié)果。

今天我將通過(guò)這篇文章好好整理一下關(guān)于JS數(shù)組的方法，讓大家通過(guò)這一篇文章 掌握 數(shù)組一系列操作，同時(shí)，在面試或者工作的時(shí)候也能寫(xiě)出簡(jiǎn)潔、優(yōu)雅、美觀、高效的代碼。其次，這篇寫(xiě)給女友，她看到會(huì)感動(dòng)到哭嘛？會(huì)嗎會(huì)嗎會(huì)嗎？

話(huà)說(shuō)我有女友嗎？

啊這，這...這重要嗎？

(手機(jī)端可能看不清)獲取高清PDF，請(qǐng)?jiān)谖⑿殴娞?hào)【小獅子前端Vue】回復(fù)【數(shù)組方法】

閱讀須知

開(kāi)門(mén)見(jiàn)山，我先介紹一下本文整體目錄結(jié)構(gòu)，介紹我將輸出的大概內(nèi)容。

顯然，數(shù)組的方法有很多很多，但是實(shí)際工作或者面試過(guò)程中有些用到的少之又少，因此，我不會(huì)將所有的方法都提出來(lái)，然后解析。那么，我會(huì)將重要程度比較高的方法盡量用詳細(xì)簡(jiǎn)潔的語(yǔ)言帶過(guò)，同時(shí)例舉幾個(gè)樣例，自測(cè)案例為你加深鞏固。

其次，本文還會(huì)提及面試?？紗?wèn)題，比如經(jīng)典「扁平化」問(wèn)題，數(shù)組「去重」、「合并」、排序、「改變?cè)瓟?shù)組的方法」、「不改變?cè)瓟?shù)組」的方法等等。

好了，讓我們進(jìn)入正文~

數(shù)組的遍歷

猶記得今年快手面試官就問(wèn)了一道經(jīng)典面試題：說(shuō)說(shuō)你所知道的數(shù)組的遍歷方法？

我想這個(gè)問(wèn)題小伙伴們面試時(shí)應(yīng)該也會(huì)遇到過(guò)吧，面試官問(wèn)這個(gè)問(wèn)題其一就是考察你對(duì)數(shù)組方法掌握程度，其二可以通過(guò)你說(shuō)的方法選擇其中一個(gè)繼續(xù)深度詢(xún)問(wèn)，比如 reduce、map使用等等，因此，我將 「數(shù)組遍歷」 作為第一個(gè)模塊來(lái)講解。

for 循環(huán)

let?arr?=?[1,?2,?3,?4,?5];
for?(let?i?=?0;?i???console.log(arr[i]);
}
//?1
//?2
//?3
//?4
//?5

for..of 循環(huán)

摘自MDN上一句話(huà)，for...of 語(yǔ)句遍歷「可迭代對(duì)象」定義要迭代的數(shù)據(jù)。簡(jiǎn)單來(lái)說(shuō)，for...of遍歷的就是 value。

let?arr?=?['Chocolate',?'zhlll',?'lionkk'];

for?(let?val?of?arr)?{
??console.log(val);
}
//?Chocolate
//?zhlll
//?lionkk

for...in 循環(huán)

摘自MDN上一句話(huà)，for...in 語(yǔ)句以任意順序迭代對(duì)象的「可枚舉屬性」。簡(jiǎn)單來(lái)說(shuō)，for...in遍歷的就是 key。對(duì)于數(shù)組，key對(duì)應(yīng)著的是數(shù)組的「下標(biāo)索引」。

let?arr?=?['Chocolate',?'zhlll',?'lionkk'];

for?(let?key?in?arr)?{
??console.log(key);
}
//?0
//?1
//?2

array.forEach() 方法

先來(lái)介紹語(yǔ)法：

array.forEach(callback(currentValue,?index,?arr),?thisArg)

callback:為數(shù)組中每個(gè)元素執(zhí)行的函數(shù)，該函數(shù)接收一至三個(gè)參數(shù) currentValue 數(shù)組中正在處理的當(dāng)前元素 index (可選) ?數(shù)組中正在處理的當(dāng)前元素的索引 arr (可選) ? ?forEach() 方法正在操作的數(shù)組 thisArg ? ? ?可選參數(shù),當(dāng)執(zhí)行回調(diào)函數(shù)callback,用作this值

簡(jiǎn)單例子：

let?arr?=?['Chocolate',?'zhlll',?'lionkk'];

arr.forEach(function?(cur,?index,?arr)?{
??console.log(cur,?index,?arr);
})

//?Chocolate?0?[?'Chocolate',?'zhlll',?'lionkk'?]
//?zhlll?1?[?'Chocolate',?'zhlll',?'lionkk'?]
//?lionkk?2?[?'Chocolate',?'zhlll',?'lionkk'?]

從上述例子中，了解到 forEach需要傳遞一個(gè)回調(diào)函數(shù)，而那三個(gè)參數(shù)，后面兩個(gè)是可選的，那么如何讓代碼更加優(yōu)雅美觀一點(diǎn)呢，同時(shí)，后面兩個(gè)參數(shù)按需添加即可：

let?arr?=?['Chocolate',?'zhlll',?'lionkk'];

arr.forEach((cur)?=>?{
??console.log(cur);
})
//?Chocolate
//?zhlll
//?lionkk

「疑難點(diǎn)」，我想小伙伴們，應(yīng)該對(duì)最后一個(gè) thisArg 有疑問(wèn)吧，現(xiàn)在就來(lái)解釋一下：

function?Foo()?{
??this.sum?=?0;
??this.cnt?=?0;
}
//?在原型上添加一個(gè)名為?doSth?方法
Foo.prototype.doSth?=?function?(arr)?{
??arr.forEach(function?(cur)?{
????this.sum?+=?cur;
????this.cnt++;
??},?this)?//?this?指向?qū)嵗龑?duì)象
}

let?foo?=?new?Foo();
let?arr?=?[1,?2,?3];
foo.doSth(arr);

console.log(foo.sum,?foo.cnt);
//?6?3
//?解釋：6 ===?(1+2+3)? 3 ===?(1+1+1)

注意：如果使用箭頭函數(shù)表達(dá)式來(lái)傳入函數(shù)參數(shù)， thisArg 參數(shù)會(huì)被忽略，因?yàn)榧^函數(shù)在詞法上綁定了 this 值。

因此，如果對(duì)于普通函數(shù)的話(huà)，可以看做是將 this 通過(guò)傳參的形式解決「無(wú)法繼承」 問(wèn)題，當(dāng)然，通過(guò)箭頭函數(shù)的方式是一個(gè)不錯(cuò)的選擇！

map 遍歷

定義：返回一個(gè)新數(shù)組，其結(jié)果是該數(shù)組中的每個(gè)元素是調(diào)用一次提供的回調(diào)函數(shù)后的返回值。

先來(lái)介紹語(yǔ)法：

let?newArray?=?array.map(function(currentValue,?index,?arr),?thisArg)

callback:為數(shù)組中每個(gè)元素執(zhí)行的函數(shù)，該函數(shù)接收一至三個(gè)參數(shù) currentValue 數(shù)組中正在處理的當(dāng)前元素 index (可選) ?數(shù)組中正在處理的當(dāng)前元素的索引 arr (可選) ? ?map() 方法正在操作的數(shù)組 thisArg ? ? ?可選參數(shù),當(dāng)執(zhí)行回調(diào)函數(shù)callback,用作this值

簡(jiǎn)單例子：

let?arr?=?['Chocolate',?'zhlll',?'lionkk'];

let?newArr?=?arr.map(function?(cur,?index,?arr)?{
??console.log(cur,?index,?arr);
??return?cur?+?index;
})
//?Chocolate?0?[?'Chocolate',?'zhlll',?'lionkk'?]
//?zhlll?1?[?'Chocolate',?'zhlll',?'lionkk'?]
//?lionkk?2?[?'Chocolate',?'zhlll',?'lionkk'?]

console.log(newArr)
//?[?'Chocolate0',?'zhlll1',?'lionkk2'?]

「疑難點(diǎn)」，我想小伙伴們，有了前置問(wèn)題了，這次理解 thisArg 應(yīng)該沒(méi)有太多問(wèn)題了吧，看看下面例子：

function?Foo()?{
??this.sum?=?0;
??this.cnt?=?0;
}
//?在原型上添加一個(gè)名為?doSth?方法
Foo.prototype.doSth?=?function?(arr)?{
??let?newArr?=?arr.map(function?(cur)?{
????this.sum?+=?cur;
????this.cnt++;
????return?cur?+?10;
??},?this)?//?this?指向?qū)嵗龑?duì)象
??return?newArr;
}

let?foo?=?new?Foo();
let?arr?=?[1,?2,?3];

console.log(foo.doSth(arr));?//?[?11,?12,?13?]
console.log(foo.sum);//?6
console.log(foo.cnt);//?3

「一些小操作」~

let?arr?=?[1,?4,?9,?16];
let?res?=?arr.map(Math.sqrt);?//?傳入Math中sqrt得到數(shù)組中每個(gè)元素的平方根
console.log(res);?//?[?1,?2,?3,?4?]

「總結(jié)」：

• map 不修改調(diào)用它的原數(shù)組本身(當(dāng)然可以在 callback 執(zhí)行時(shí)改變?cè)瓟?shù)組) 回調(diào)函數(shù)不返回值時(shí)，最后新數(shù)組的每個(gè)值都為undefined
• this 的值最終相對(duì)于 callback 函數(shù)的可觀察性是依據(jù)this規(guī)則，也就是 this 指向問(wèn)題
• map 會(huì)返回一個(gè)新數(shù)組

reduce 遍歷

定義：對(duì)數(shù)組中的每個(gè)元素執(zhí)行一個(gè)由您提供的 reducer 函數(shù)(升序執(zhí)行)，將其結(jié)果匯總為單個(gè)返回值。

先來(lái)介紹語(yǔ)法：

let?res=?array.reduce(callback(accumulator,?currentValue,?currentIndex,?array),?initialValue)

callback:為數(shù)組中每個(gè)元素執(zhí)行的函數(shù)，該函數(shù)接收一至4個(gè)參數(shù) accumulator 累計(jì)器 currentValue 當(dāng)前值 currentIndex 當(dāng)前索引 array 數(shù)組 initialValue 作為第一次調(diào)用 callback函數(shù)時(shí)的第一個(gè)參數(shù)的值。如果沒(méi)有提供初始值，則將使用數(shù)組中的第一個(gè)元素。在沒(méi)有初始值的空數(shù)組上調(diào)用 reduce 將報(bào)錯(cuò)。

簡(jiǎn)單例子：

let?arr?=?[3,?5,?7,?1,?2];
let?res?=?arr.reduce(function?(acc,?cur,?index,?arr)?{
??console.log(acc,?cur,?index,?arr);
??return?acc?+?cur;
},?0)
//?0?3?0?[?3,?5,?7,?1,?2?]
//?3?5?1?[?3,?5,?7,?1,?2?]
//?8?7?2?[?3,?5,?7,?1,?2?]
//?15?1?3?[?3,?5,?7,?1,?2?]
//?16?2?4?[?3,?5,?7,?1,?2?]
console.log(res);
//?18

看完上面代碼，你可能還是蒙的，怎么一下輸出這么多，結(jié)合下面 gif 動(dòng)圖再來(lái)理解一下吧：

「疑難點(diǎn)」，我想小伙伴們對(duì)于參數(shù)那么多應(yīng)該一下給看懵了，下面用一些小操作展示一下，并且提供一點(diǎn)自測(cè)題目加深鞏固~

let?arr?=?[1,?2,?3,?4,?5];
let?res?=?arr.reduce((acc,?cur)?=>?{
??return?acc?+?cur;
},?0)
console.log(res);//?15

自測(cè)題：看看下面輸出什么?

[1,?2,?3,?4].reduce((x,?y)?=>?console.log(x,?y));

• A: 1 2 and 3 3 and 6 4
• B: 1 2 and 2 3 and 3 4
• C: 1 undefined and 2 undefined and 3 undefined and 4 undefined
• D: 1 2 and undefined 3 and undefined 4

答案

函數(shù)接收4個(gè)參數(shù):

函數(shù)的返回值將會(huì)分配給累計(jì)器，該返回值在數(shù)組的每個(gè)迭代中被記住，并最后成為最終的單個(gè)結(jié)果值。

函數(shù)還有一個(gè)可選參數(shù), 該參數(shù)將作為第一次調(diào)用回調(diào)函數(shù)時(shí)的第一個(gè)參數(shù)的值。如果沒(méi)有提供，則將使用數(shù)組中的第一個(gè)元素。

在上述例子，方法接收的第一個(gè)參數(shù)(Accumulator)是, 第二個(gè)參數(shù)(Current Value)是。

在第一次調(diào)用時(shí)，累加器為，當(dāng)前值為，打印出累加器和當(dāng)前值：和。

例子中我們的回調(diào)函數(shù)沒(méi)有返回任何值，只是打印累加器的值和當(dāng)前值。如果函數(shù)沒(méi)有返回值，則默認(rèn)返回。在下一次調(diào)用時(shí)，累加器為，當(dāng)前值為“3”, 因此和被打印出。

在第四次調(diào)用時(shí)，回調(diào)函數(shù)依然沒(méi)有返回值。累加器再次為 ?，當(dāng)前值為“4”。和被打印出。

---

「總結(jié)」：

• 如果數(shù)組為空且沒(méi)有提供 initialValue，會(huì)拋出TypeError 。
• 如果沒(méi)有提供 initialValue，reduce 會(huì)從索引1的地方開(kāi)始執(zhí)行 callback 方法，跳過(guò)第一個(gè)索引。如果提供 initialValue ，從索引0開(kāi)始。
• acc為傳入函數(shù)的返回值，如果是 console.log，則返回默認(rèn)值 undefined

filter()

定義：創(chuàng)建一個(gè)新數(shù)組, 其包含通過(guò)所提供函數(shù)實(shí)現(xiàn)的測(cè)試的所有元素。

先來(lái)介紹語(yǔ)法：

let?newArray?=?array.filter(function(currentValue,?index,?arr),?thisArg)

callback:為數(shù)組中每個(gè)元素執(zhí)行的函數(shù)，該函數(shù)接收一至三個(gè)參數(shù) currentValue 數(shù)組中正在處理的當(dāng)前元素 index (可選) ?數(shù)組中正在處理的當(dāng)前元素的索引 arr (可選) ? ?filter() 方法正在操作的數(shù)組 thisArg(可選參數(shù)),當(dāng)執(zhí)行回調(diào)函數(shù)callback,用作this值

簡(jiǎn)單例子：

let?arr?=?[1,?2,?3,?4,?5];

let?newArr?=?arr.filter(function?(cur,?index)?{
??console.log(cur,?index);
??return?cur?%?2?==?0;
})
//?1?0
//?2?1
//?3?2
//?4?3
//?5?4
console.log(newArr);?//?[?2,?4?]

關(guān)于 thisArg 相關(guān)可以參考上文 array.forEach() 方法 部分。

簡(jiǎn)單來(lái)說(shuō)，就是返回滿(mǎn)足條件的結(jié)果。

every()

定義：測(cè)試一個(gè)數(shù)組內(nèi)的所有元素是否「都能通過(guò)」某個(gè)指定函數(shù)的測(cè)試，它返回的是一個(gè) Boolean 類(lèi)型的值。

先來(lái)介紹語(yǔ)法：

array.every(function(currentValue,?index,?arr),?thisArg)

callback:為數(shù)組中每個(gè)元素執(zhí)行的函數(shù)，該函數(shù)接收一至三個(gè)參數(shù) currentValue 數(shù)組中正在處理的當(dāng)前元素 index (可選) ?數(shù)組中正在處理的當(dāng)前元素的索引 arr (可選) ?every() 方法正在操作的數(shù)組 thisArg 可選參數(shù),當(dāng)執(zhí)行回調(diào)函數(shù)callback,用作this值

let?res1?=?[1,?2,?3,?4,?5].every(function?(cur)?{
??return?cur?>?10;
})
console.log(res1);?//?false

let?res2?=?[1,?2,?3,?4,?5].every(function?(cur)?{
??return?cur?>=?1;
})
console.log(res2);?//?true

關(guān)于 thisArg 相關(guān)可以參考上文 array.forEach() 方法 部分。

簡(jiǎn)單來(lái)說(shuō)，就是返回是否「都能滿(mǎn)足」特定條件的結(jié)果，用布爾值返回。

some()

定義：測(cè)試數(shù)組中是不是「至少有1個(gè)元素通過(guò)」了被提供的函數(shù)測(cè)試，它返回的是一個(gè) Boolean 類(lèi)型的值

先來(lái)介紹語(yǔ)法：

array.some(function(currentValue,?index,?arr),?thisArg)

callback:為數(shù)組中每個(gè)元素執(zhí)行的函數(shù)，該函數(shù)接收一至三個(gè)參數(shù) currentValue 數(shù)組中正在處理的當(dāng)前元素 index (可選) ?數(shù)組中正在處理的當(dāng)前元素的索引 arr (可選) ? ?some() 方法正在操作的數(shù)組 thisArg ? ? (可選參數(shù)),當(dāng)執(zhí)行回調(diào)函數(shù)callback,用作this值

let?res1?=?[1,?2,?3,?4,?5].some(function?(cur)?{
??return?cur?>?10;
})
console.log(res1);?//?false

let?res2?=?[1,?2,?3,?4,?5].some(function?(cur)?{
??return?cur?===?1;
})
console.log(res2);?//?true

關(guān)于 thisArg 相關(guān)可以參考上文 array.forEach() 方法 部分。

簡(jiǎn)單來(lái)說(shuō)，就是返回是否「至少有1個(gè)滿(mǎn)足」特定條件的結(jié)果，用布爾值返回。

find 和 findIndex

該方法在ECMAScript 6規(guī)范中被加入，可能不存在于某些實(shí)現(xiàn)中。

定義：

find: ?返回?cái)?shù)組中滿(mǎn)足提供的測(cè)試函數(shù)的第一個(gè)元素的值。否則返回 ?undefined。

findIndex：數(shù)組中通過(guò)提供測(cè)試函數(shù)的第一個(gè)元素的索引。否則，返回 -1。

先來(lái)介紹語(yǔ)法：

let?ele?=?array.find(function(elemnet,?index,?arr),?thisArg)let?eleIndex?=?array.findIndex(function(elemnet,?index,?arr),?thisArg)

callback:為數(shù)組中每個(gè)元素執(zhí)行的函數(shù)，該函數(shù)接收一至三個(gè)參數(shù) elemnet 數(shù)組中正在處理的當(dāng)前元素 index (可選) ?數(shù)組中正在處理的當(dāng)前元素的索引 arr (可選) ? ? find方法正在操作的數(shù)組 thisArg ? ? ?可選參數(shù),當(dāng)執(zhí)行回調(diào)函數(shù)callback,用作this值

let?res1?=?[1,?2,?3,?4,?5].find(function?(cur)?{
??return?cur?>?2;
})
console.log(res1);?//?3

let?res2?=?[1,?2,?3,?4,?5].findIndex(function?(cur)?{
??return?cur?>?2;
})
console.log(res2);?//?2

keys 與 values 與 entries

定義：

• keys() 方法返回一個(gè)包含數(shù)組中每個(gè)索引鍵的 「Array Iterator」 對(duì)象。
• values() 方法返回一個(gè)新的 Array Iterator 對(duì)象，該對(duì)象包含數(shù)組每個(gè)「索引的值」
• entries() 方法返回一個(gè)新的 Array Iterator 對(duì)象，該對(duì)象包含數(shù)組中每個(gè)「索引的鍵/值對(duì)」。

arr.keys()
arr.values()
arr.entries()

簡(jiǎn)單例子：

let?arr?=?['Chocolate',?'zhlll',?'lionkk'];

let?itKeys?=?arr.keys();
let?itVals?=?arr.values();
let?itEntries?=?arr.entries();

for?(let?it?of?itKeys)?{
??console.log(it);
}
//?0
//?1
//?2
for?(let?it?of?itVals)?{
??console.log(it);
}
//?Chocolate
//?zhlll
//?lionkk
for?(let?it?of?itEntries)?{
??console.log(it);
}
//?[?0,?'Chocolate'?]
//?[?1,?'zhlll'?]
//?[?2,?'lionkk'?]

---

好了，到此關(guān)于數(shù)組的遍歷方式基本上介紹完畢了，也許還有其它方法，但是萬(wàn)變不離其宗，接下來(lái)我們將探究 「改變?cè)瓟?shù)組」 的方法。

改變?cè)紨?shù)組方法

看過(guò)我之前關(guān)于 Vue 數(shù)據(jù)劫持源碼分析那篇博客文章小伙伴應(yīng)該知道，里面就有提到了用「裝飾者模式」解決無(wú)法處理數(shù)組問(wèn)題。其中就有提到對(duì)于改變?cè)紨?shù)組的方法，這些需要繼續(xù)遞歸觀察。那么，接下來(lái)，我們就來(lái)分別探討一下它們的使用：

sort()

至于為什么我會(huì)排第一個(gè)，對(duì)，面試遇到過(guò)，當(dāng)時(shí)我說(shuō)對(duì)某手面試官說(shuō)默認(rèn)按照從小到大進(jìn)行排序，通過(guò)學(xué)習(xí)后，我發(fā)現(xiàn)不是的...

先來(lái)介紹語(yǔ)法：

arr.sort([compareFunction])

compareFunction 可選，用來(lái)指定按某種順序進(jìn)行排列的函數(shù)。如果省略，元素按照轉(zhuǎn)換為的字符串的各個(gè)字符的Unicode位點(diǎn)進(jìn)行排序。否則，如果指明了compareFunction：如果 compareFunction(a, b) 小于 0 ，那么 a 會(huì)被排列到 b 之前；如果 compareFunction(a, b) 等于 0 ， a 和 b 的相對(duì)位置不變。如果 compareFunction(a, b) 大于 0 ， b 會(huì)被排列到 a 之前。

簡(jiǎn)單例子：

let?arr?=?[1,?10,?2,?5,?8,?3];

arr.sort();?//?默認(rèn)
console.log(arr);?//?[?1,?10,?2,?3,?5,?8?]

arr.sort((a,?b)?=>?a?-?b);?//?從小到大排序
console.log(arr);?//?[?1,?2,?3,?5,?8,?10?]

arr.sort((a,?b)?=>?b?-?a);?//?從大到小排序
console.log(arr);?//?[?10,?8,?5,?3,?2,?1?]

push()

類(lèi)似棧、隊(duì)列的一些操作

「注意」，push() 成功之后會(huì)返回?cái)?shù)組的長(zhǎng)度。

let?arr?=?[1,2];
let?res?=?arr.push(100);
console.log(arr);?//?[?1,?2,?100?]
console.log(res);?//?3

pop()

類(lèi)似棧、隊(duì)列的一些操作

let?arr?=?[1,?2,?100];
let?res?=?arr.pop();
console.log(arr);?//?[?1,?2?]
console.log(res);?//?100

shift()

類(lèi)似棧、隊(duì)列的一些操作

let?arr?=?[1,?2,?100];
let?res?=?arr.shift();
console.log(arr);?//?[?2,?100?]
console.log(res);?//?1

unshift()

定義：將一個(gè)或多個(gè)元素添加到 「數(shù)組的開(kāi)頭」，并 (該方法修改原有數(shù)組)

「注意」：該方法會(huì)返回該數(shù)組的新長(zhǎng)度

let?arr?=?[1,?2,?100];
let?res?=?arr.unshift(4,?5,?6);
console.log(arr);?//?[?4,?5,?6,?1,?2,?100?]
console.log(res);?//?6

reverse()

定義：將數(shù)組中元素的位置顛倒，并返回該數(shù)組。

let?arr?=?[1,?2,?3];
arr.reverse();
console.log(arr);//?[?3,?2,?1?]

splice()

這個(gè)我放最后一個(gè)也是有原因的，它比其它幾個(gè)要更復(fù)雜一點(diǎn)，剛開(kāi)始我也是花了老長(zhǎng)時(shí)間才理解，而且原本一直與 split() 這些分不清楚。

定義：

通過(guò)「刪除或替換」現(xiàn)有元素或者原地添加新的元素來(lái)修改數(shù)組,并以數(shù)組形式返回被修改的內(nèi)容。

array.splice(start,deleteCount,item1,.....,itemX)z

start: 指定修改的開(kāi)始位置(從0計(jì)數(shù)) 1. 如果超出了數(shù)組的長(zhǎng)度，則從數(shù)組末尾開(kāi)始添加內(nèi)容 2. 如果是負(fù)值，則表示從數(shù)組末位開(kāi)始的第幾位(從-1計(jì)數(shù)，這意味著-n是倒數(shù)第n個(gè)元素，并且等價(jià)于array.length-n) 3. 如果負(fù)數(shù)的絕對(duì)值大于數(shù)組的長(zhǎng)度，則表示開(kāi)始位置為第0位

deleteCount(可選) : 整數(shù),表示要移除的數(shù)組元素個(gè)數(shù) 1. 如果 deleteCount 大于 start 之后的元素的總數(shù)，則從 start 后面的元素都將被 刪除(含第 start 位) 2. 如果 deleteCount 被省略了，或者它的值大于等于array.length - start(也就是 ? 說(shuō)，如果它大于或者等于start之后的所有元素的數(shù)量)，那么start之后數(shù)組的所有元素都會(huì)被刪除。3. 如果 deleteCount 是 0 或者負(fù)數(shù)，則不移除元素。這種情況下，至少應(yīng)添加一個(gè)新 ? 元素。

item1, item2, ...(可選) 要添加進(jìn)數(shù)組的元素,從start 位置開(kāi)始。如果不指定，則 splice() 將只刪除數(shù)組元素。

從第2位開(kāi)始插入“Chocolate”

let?arr?=?['one',?'two',?'three'];

arr.splice(2,?0,?'Chocolate');
console.log(arr);//?[?'one',?'two',?'Chocolate',?'three'?]

從第 2 位開(kāi)始刪除 1 個(gè)元素，然后插入“Chocolate”

let?arr?=?['one',?'two',?'three'];

arr.splice(2,?1,?'Chocolate');
console.log(arr);//?[?'one',?'two',?'Chocolate'?]

主流的還是這7個(gè)方法，對(duì)于改變?cè)瓟?shù)組還有 fill() 和 copyWithin() 方法，小伙伴們可以繼續(xù)研究~

---

數(shù)組的映射

Array.map()方法

上文已經(jīng)介紹

Array.from()方法

定義：通過(guò)在每個(gè)數(shù)組項(xiàng)上使用 callback 調(diào)用結(jié)果來(lái)創(chuàng)建一個(gè)新數(shù)組。

先來(lái)介紹語(yǔ)法：

?Array.from(Array,callback(currentValue,?index,?arr))

簡(jiǎn)單例子：

let?arr?=?[1,?2,?3];

let?newArr?=?Array.from(arr,?function?(cur)?{
??return?cur?+?10;
})
console.log(newArr);//?[?11,?12,?13?]

---

數(shù)組的連接

Array.concat() 方法

array.concat(array1[, array2, ...]) 將一個(gè)或多個(gè)數(shù)組連接到原始數(shù)組。如下所示，連接兩個(gè)數(shù)組：

let?arrA?=?[1,?2,?3];
let?arrB?=?[4,?5,?6];
let?ans?=?arrA.concat(arrB);
console.log(ans);//?[?1,?2,?3,?4,?5,?6?]

展開(kāi)操作符

let?arrA?=?[1,?2,?3];
let?arrB?=?[4,?5,?6];
let?ans?=?[...arrA,?...arrB];
console.log(ans);//?[?1,?2,?3,?4,?5,?6?]

---

獲取數(shù)組的片段

Array.slice() 方法

定義：返回一個(gè)新的數(shù)組對(duì)象，這一對(duì)象是一個(gè)由 begin 和 end 決定的原數(shù)組的「淺拷貝」(包括 begin，不包括 end)——原始數(shù)組不會(huì)被改變。

先介紹語(yǔ)法：

arr.slice([begin[,?end]])

begin (可選)

提取起始處的索引(從 0 開(kāi)始)，從該索引開(kāi)始提取原數(shù)組元素。

如果該參數(shù)為負(fù)數(shù)，則表示從原數(shù)組中的倒數(shù)第幾個(gè)元素開(kāi)始提取

slice(-2) 表示提取原數(shù)組中的倒數(shù)第二個(gè)元素到最后一個(gè)元素(包含最后一個(gè)元素)

如果省略 begin，則 slice 從索引 0 開(kāi)始。

如果 begin 大于原數(shù)組的長(zhǎng)度，則會(huì)返回空數(shù)組。

end ? (可選)

slice(1,4) 會(huì)提取原數(shù)組中從第二個(gè)元素開(kāi)始一直到第四個(gè)元素的所有元素 (索引為 1, 2, 3的元素)

如果該參數(shù)為負(fù)數(shù)， 則它表示在原數(shù)組中的倒數(shù)第幾個(gè)元素結(jié)束抽取。

如果 end 被省略，則 slice 會(huì)一直提取到原數(shù)組末尾。

如果 end 大于數(shù)組的長(zhǎng)度，slice 也會(huì)一直提取到原數(shù)組末尾。

let?fruits?=?['Banana',?'Orange',?'Lemon',?'Apple',?'Mango'];
let?res?=?fruits.slice(1,?3);
let?res1?=?fruits.slice(1);
let?res2?=?fruits.slice(-1);
let?res3?=?fruits.slice(0,?-1);
console.log(res);?//?[?'Orange',?'Lemon'?]
console.log(res1);//?[?'Orange',?'Lemon',?'Apple',?'Mango'?]
console.log(res2);//?[?'Mango'?]
console.log(res3);//?[?'Banana',?'Orange',?'Lemon',?'Apple'?]

---

轉(zhuǎn)換數(shù)組

join()

定義：

將一個(gè)數(shù)組(或一個(gè)類(lèi)數(shù)組對(duì)象)的所有元素連接成一個(gè)字符串并返回這個(gè)字符串。如果數(shù)組只有一個(gè)項(xiàng)目，那么將返回該項(xiàng)目而不使用分隔符。

語(yǔ)法:

arr.join(separator)

簡(jiǎn)單例子：

let?arr?=?['one',?'two',?'three'];
let?res?=?arr.join('^');
let?res1?=?arr.join('&');

console.log(res);?//?one^two^three
console.log(res1);?//?one&two&three

split()

定義：

使用指定的分隔符字符串將一個(gè) String 對(duì)象分割成子字符串?dāng)?shù)組，以一個(gè)指定的分割字串來(lái)決定每個(gè)拆分的位置。

語(yǔ)法：

str.split([separator[,?limit]])
const?str?=?'The?best?Chocolate';

const?words?=?str.split('?');
console.log(words);?//?[?'The',?'best',?'Chocolate'?]
console.log(words[2]);?//?Chocolate

toString()

定義：

返回一個(gè)字符串，表示指定的數(shù)組及其元素。

當(dāng)一個(gè)數(shù)組被作為文本值或者進(jìn)行字符串連接操作時(shí)，將會(huì)自動(dòng)調(diào)用其 toString 方法。

語(yǔ)法:

arr.toString()
let?arr?=?['one',?'two',?'three'];
console.log(arr.toString());?//?one,two,three

---

數(shù)組的扁平化

flat()

定義：

按照一個(gè)可指定的深度遞歸遍歷數(shù)組，并將所有元素與遍歷到的子數(shù)組中的元素合并為一個(gè)新數(shù)組返回。

語(yǔ)法：

var?newArray?=?arr.flat([depth])

參數(shù) depth 可選 指定要提取嵌套數(shù)組的結(jié)構(gòu)深度，默認(rèn)值為 1。返回值 一個(gè)包含將數(shù)組與子數(shù)組中所有元素的新數(shù)組。

const?arr1?=?[0,?1,?2,?[3,?4]];
console.log(arr1.flat());?//?[?0,?1,?2,?3,?4?]

const?arr2?=?[0,?1,?2,?[[[3,?4]]]];
console.log(arr2.flat(2));?//?[?0,?1,?2,?[?3,?4?]?]

---

備忘錄

女朋友表示說(shuō)：感動(dòng)了！

本文參考

感謝大佬~

• 「數(shù)組方法」從詳細(xì)操作js數(shù)組到淺析v8中array.js
• MDN_Array
• 通過(guò)事例重溫一下 JS 中 常見(jiàn)的15 種數(shù)組操作(備忘清單)
• JS數(shù)組奇巧淫技
• JS之?dāng)?shù)組的幾個(gè)不low操作

最后

文章產(chǎn)出不易，還望各位小伙伴們支持一波！

往期精選：

小獅子前端の筆記倉(cāng)庫(kù)

leetcode-javascript：LeetCode 力扣的 JavaScript 解題倉(cāng)庫(kù)，前端刷題路線(思維導(dǎo)圖)

小伙伴們可以在Issues中提交自己的解題代碼，? 歡迎Contributing，可打卡刷題，Give a ?? if this project helped you!

訪問(wèn)超逸の博客，方便小伙伴閱讀玩耍~

學(xué)如逆水行舟，不進(jìn)則退

最后，給大家推薦非常好的課程，最近已經(jīng)學(xué)完了，學(xué)完對(duì)于你理解瀏覽器工作原理與實(shí)踐將有很大幫助，謝謝大家支持~

覺(jué)得不錯(cuò)，點(diǎn)個(gè)【在看】支持一下，或者分享給女友們~

總結(jié)

以上是生活随笔為你收集整理的js map 排序_数组方法写给女友的一系列 JS 数组操作（建议收藏 | 内附思维导图）...的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。