javascript
JavaScript数组方法大全解
0 前言
1 是否改變?cè)瓟?shù)組
1.1 改變?cè)瓟?shù)組的方法
其實(shí)很好理解和記憶，除去上面列出的方法類型，其他方法類型大概為查找方法和迭代方法，這兩種類型的方法是不會(huì)改變?cè)瓟?shù)組的。
1.2 不改變?cè)瓟?shù)組的方法
除去上面以外的其他方法不會(huì)改變?cè)瓟?shù)組，但有三個(gè)方法容易記錯(cuò)：
2 棧方法
棧是一種先進(jìn)后出的數(shù)據(jù)結(jié)構(gòu)，JavaScript中的數(shù)組通過(guò)push()和pop()兩個(gè)方法實(shí)現(xiàn)入棧和出棧的操作。
2.1 push()
語(yǔ)法如下：
let newLength = arr.push(element1, element2, ..., elementN)方法說(shuō)明如下：
- 功能描述：push()方法將一個(gè)或多個(gè)元素添加到數(shù)組的末尾；
- 函數(shù)參數(shù)：一個(gè)或多個(gè)元素；
- 返回值：返回該數(shù)組的新長(zhǎng)度length；
- 是否改變?cè)瓟?shù)組：改變?cè)瓟?shù)組。
示例如下：
let arr = ['A', 'B', 'C']let result = arr.push('D') console.log(arr) // [ 'A', 'B', 'C', 'D' ] console.log(result) // 4result = arr.push('E', 'F') console.log(arr) // [ 'A', 'B', 'C', 'D', 'E', 'F' ] console.log(result) // 6圖解如下：
2.2 pop()
語(yǔ)法如下：
let deletedValue = arr.pop()方法說(shuō)明如下：
- 功能描述：pop()方法從數(shù)組中刪除最后一個(gè)元素；
- 函數(shù)參數(shù)：無(wú)參數(shù)；
- 返回值：返回被刪除的最后一個(gè)元素的值；
- 是否改變?cè)瓟?shù)組：改變?cè)瓟?shù)組。
示例如下：
let arr = ['A', 'B', 'C']let result = arr.pop() console.log(arr) // [ 'A', 'B' ] console.log(result) // Cresult = arr.pop() console.log(arr) // [ 'A' ] console.log(result) // B圖解如下：
3 隊(duì)列方法
隊(duì)列是一種先進(jìn)先出的數(shù)據(jù)結(jié)構(gòu)，JavaScript中的數(shù)組通過(guò)push()和shift()兩個(gè)方法實(shí)現(xiàn)入隊(duì)和出隊(duì)的操作。其中push()方法請(qǐng)參閱2.1節(jié)，本章節(jié)主要講解shift()及其逆向方法unshift()。
3.1 shift()
語(yǔ)法如下：
let deletedValue = arr.shift()方法說(shuō)明如下：
- 功能描述：shift()方法從數(shù)組中刪除第一個(gè)元素；
- 函數(shù)參數(shù)：無(wú)參數(shù)；
- 返回值：返回被刪除的第一個(gè)元素的值；
- 是否改變?cè)瓟?shù)組：改變?cè)瓟?shù)組。
示例如下：
let arr = ['A', 'B', 'C']let result = arr.shift() console.log(arr) // [ 'B', 'C' ] console.log(result) // Aresult = arr.shift() console.log(arr) // [ 'C' ] console.log(result) // B圖解如下：
3.2 unshift()
unshift()方法說(shuō)明如下：
- 功能描述：unshift()方法將一個(gè)或多個(gè)元素添加到數(shù)組的開(kāi)頭；
- 函數(shù)參數(shù)：一個(gè)或多個(gè)元素；
- 返回值：返回該數(shù)組的新長(zhǎng)度newLength；
- 是否改變?cè)瓟?shù)組：改變?cè)瓟?shù)組。
語(yǔ)法如下：
let newLength = arr.unshift(element1, element2, ..., elementN)示例如下：
let arr = ['A', 'B', 'C']let result = arr.unshift('D') console.log(arr) // [ 'D', 'A', 'B', 'C' ] console.log(result) // 4result = arr.unshift('E', 'F') console.log(arr) // [ 'E', 'F', 'D', 'A', 'B', 'C' ] console.log(result) // 6圖解如下：
4 排序方法
JavaScript中的數(shù)組提供自定義規(guī)則排序sort()方法和根據(jù)下標(biāo)逆置數(shù)組reverse()方法。
4.1 sort()
語(yǔ)法如下：
let sortedArray = arr.sort([compareFunction]) // compareFunction是可選的方法說(shuō)明如下：
- 功能描述：sort()方法將數(shù)字元素按照字符串，然后依次比較其Unicode值（由小到大排序）；
- 函數(shù)參數(shù)：【可選】指定排序比較的函數(shù)compareFunction；
- 返回值：返回排序后的新數(shù)組；
- 是否改變?cè)瓟?shù)組：改變?cè)瓟?shù)組。
示例如下：
let arr = [4, 6, 3, 1, 5, 2]arr.sort() console.log(arr); // [ 1, 2, 3, 4, 5, 6 ]顯而易見(jiàn)，上面代碼的運(yùn)行結(jié)果是符合預(yù)期的，下面再舉一個(gè)例子：
let arr = [16, 2, 32, 4, 25]arr.sort() console.log(arr); // [ 16, 2, 25, 32, 4 ]最后輸出的結(jié)果為[ 16, 2, 25, 32, 4 ]，這顯然是不符合預(yù)期的，造成這種情況的原因是當(dāng)不指定compareFunction比較函數(shù)時(shí)，默認(rèn)采用的是比較字符串Unicode值的形式，在進(jìn)行字符串比較時(shí)，依次比較字符串各個(gè)位置的值，由于字符串'1'的Unicode值比字符串'2'的Unicode值小，所以數(shù)組arr中的元素16會(huì)排在元素2和元素4之前，其他元素同理。
要解決這個(gè)問(wèn)題，需要明確指定compareFunction比較函數(shù)，該函數(shù)的完全表達(dá)形式為compareFunction(a, b)，其中參數(shù)a和參數(shù)b表示將要比較的兩個(gè)元素，compareFunction(a, b)的返回值共有如下三種情況，決定著排序的結(jié)果：
下面舉個(gè)具體的例子，以升序排序?yàn)槔?#xff0c;由于排序要求為升序排列，那么較小的數(shù)應(yīng)該排在前面，即當(dāng)a和b進(jìn)行比較時(shí)，若a比b的值小，那么應(yīng)該返回一個(gè)小于0的數(shù)；當(dāng)a比b的值大時(shí)，應(yīng)該返回一個(gè)大于0的數(shù)；根據(jù)以上分析，需要的compareFunction比較函數(shù)如下：
function compareFunction(a, b) {if (a < b) {return -1;}if (a > b) {return 1;}return 0; }// 簡(jiǎn)寫(xiě)為 function compareFunction(a, b) {return a - b }// 箭頭函數(shù)簡(jiǎn)寫(xiě)為 (a, b) => a - b最終修改后的代碼如下：
let arr = [16, 2, 32, 4, 25]arr.sort((a, b) => a - b) console.log(arr); // [ 2, 4, 16, 25, 32 ]此時(shí)的輸出結(jié)果是符合預(yù)期的。
注：若要實(shí)現(xiàn)降序排序的效果，只需要將compareFunction參數(shù)改為(a, b) => b - a即可。
4.2 reverse()
語(yǔ)法如下：
arr.reverse()方法說(shuō)明如下：
- 功能描述：reverse()方法將數(shù)組中元素的位置按下標(biāo)逆置；
- 函數(shù)參數(shù)：無(wú)參數(shù)；
- 返回值：返回逆置后的新數(shù)組；
- 是否改變?cè)瓟?shù)組：改變?cè)瓟?shù)組。
示例如下：
let arr = ['A', 'B', 'C']arr.reverse() console.log(arr) // [ 'C', 'B', 'A' ]圖解如下：
5 截取與合并方法
JavaScript中提供了slice()方法用于實(shí)現(xiàn)給定區(qū)間元素的提取，還提供了contact()方法用于給定數(shù)組或元素的合并。
5.1 slice()
語(yǔ)法如下：
let newArray = arr.slice([begin[, end]])方法說(shuō)明如下：
- 功能描述：slice()方法將截取數(shù)組中固定區(qū)間中的元素；
- 函數(shù)參數(shù)：
- 【可選】begin：截取下標(biāo)的起始位置，閉區(qū)間，包括該下標(biāo)；默認(rèn)值為0，begin值不可大于數(shù)組長(zhǎng)度，否則返回空數(shù)組；
- 【可選】end：截取下標(biāo)的終點(diǎn)位置，開(kāi)區(qū)間，不包括該下標(biāo)；默認(rèn)為截取到數(shù)組末尾，end值若大于數(shù)組長(zhǎng)度，則會(huì)截取到數(shù)組末尾。
- 返回值：返回截取后的新數(shù)組；
- 是否改變?cè)瓟?shù)組：不改變?cè)瓟?shù)組。
示例如下：
let arr = ['A', 'B', 'C', 'D', 'E']let result = arr.slice() console.log(result) // [ 'A', 'B', 'C', 'D', 'E' ]let result = arr.slice(1, 4) console.log(result) // [ 'B', 'C', 'D' ]圖解如下：
slice()方法的begin和end兩個(gè)參數(shù)可以為負(fù)數(shù)：
- begin為負(fù)數(shù)時(shí)，則表示從原數(shù)組中的倒數(shù)第幾個(gè)元素開(kāi)始提取，slice(-2)表示提取原數(shù)組中的倒數(shù)第二個(gè)元素到最后一個(gè)元素（包含最后一個(gè)元素）。
- end為負(fù)數(shù)時(shí)，則表示在原數(shù)組中的倒數(shù)第幾個(gè)元素結(jié)束抽取。 slice(-2, -1)表示抽取了原數(shù)組中的倒數(shù)第二個(gè)元素到最后一個(gè)元素（不包含最后一個(gè)元素，也就是只有倒數(shù)第二個(gè)元素）。
下面舉個(gè)例子：
let arr = ['A', 'B', 'C', 'D', 'E']let result = arr.slice(-2, -1) console.log(result) // [ 'D' ]result = arr.slice(-3) console.log(result) // [ 'C', 'D', 'E' ]圖解如下：
5.2 contact()
語(yǔ)法如下：
let newArray = arr.concat(value1[, value2[, ...[, valueN]]])方法說(shuō)明如下：
- 功能描述： concat()方法用于合并兩個(gè)或多個(gè)元素；
- 函數(shù)參數(shù)：兩個(gè)或多個(gè)元素；
- 返回值：返回合并后的新數(shù)組；
- 是否改變?cè)瓟?shù)組：不改變?cè)瓟?shù)組。
示例如下：
let arr = ['A', 'B', 'C']let result = arr.concat('D', 'E') console.log(result) // [ 'A', 'B', 'C', 'D', 'E' ]需要注意的是，concat()方法會(huì)將傳入的數(shù)組參數(shù)做一次扁平化處理，如下面代碼：
let arr = ['A', 'B', 'C']let result = arr.concat(['D', 'E', ['F']]) console.log(result) // [ 'A', 'B', 'C', 'D', 'E', [ 'F' ] ]6 splice()方法
splice()方法是JavaScript中數(shù)組最為強(qiáng)大的方法之一，可以調(diào)整參數(shù)實(shí)現(xiàn)刪除、插入和替換元素操作。
6.1 簡(jiǎn)介
語(yǔ)法如下：
let deletedItems = array.splice(start[, howmany[, item1[, item2[, ...]]]])方法說(shuō)明如下：
- 功能描述： splice()方法用于在數(shù)組中進(jìn)行刪除、插入和替換操作；
- 函數(shù)參數(shù)：（splice()方法的參數(shù)較為復(fù)雜，下面小節(jié)詳細(xì)講解）；
- 返回值：返回被刪除或替換的內(nèi)容；
- 是否改變?cè)瓟?shù)組：改變?cè)瓟?shù)組。
6.2 參數(shù)
splice()方法的參數(shù)如下：
- 【必須】start：操作的起始下標(biāo)，規(guī)定刪除、插入或替換元素的位置，使用負(fù)數(shù)可從數(shù)組結(jié)尾處規(guī)定位置。
- 【必須】howmany：要?jiǎng)h除的元素個(gè)數(shù)。
- 【可選】item1, ..., itemx：要插入或替換的元素。
上面三種參數(shù)進(jìn)行不同搭配可以實(shí)現(xiàn)刪除、插入和替換三種操作。
6.3 刪除元素操作
使用splice()方法進(jìn)行刪除元素操作的特征是只提供兩個(gè)參數(shù)：
- start：要?jiǎng)h除元素的起始下標(biāo)；
- howmany：要?jiǎng)h除元素的個(gè)數(shù)。
示例如下：
let arr = ['A', 'B', 'C', 'D', 'E']let result = arr.splice(1, 3) console.log(arr); // [ 'A', 'E' ] console.log(result) // [ 'B', 'C', 'D' ]在這個(gè)例子中，指定從下標(biāo)1開(kāi)始刪除三個(gè)元素，返回被刪除的元素[ 'B', 'C', 'D' ]，刪除后原數(shù)組arr為[ 'A', 'E' ]。
6.4 插入元素操作
使用splice()方法進(jìn)行插入元素操作的特征是提供三個(gè)參數(shù)，且第二個(gè)參數(shù)必須是0：
- start：要插入元素的起始下標(biāo)；
- howmany：要?jiǎng)h除元素的個(gè)數(shù)，既然是替換，則不刪除原數(shù)組的任何元素，所以是0。
- item1, ..., itemx：要插入的元素。
示例如下：
let arr = ['A', 'B', 'C']let result = arr.splice(1, 0, 'D', 'E') console.log(arr); // [ 'A', 'D', 'E', 'B', 'C' ] console.log(result) // []在這個(gè)例子中，指定從下標(biāo)1開(kāi)始插入元素，不刪除原數(shù)組的元素，插入元素'D', 'E'，由于沒(méi)有刪除或替換元素，所以返回值為空數(shù)組[]，插入元素后的原數(shù)組arr為[ 'A', 'D', 'E', 'B', 'C' ]。
6.5 替換元素操作
使用splice()方法進(jìn)行插入元素操作的特征是提供三個(gè)參數(shù)，且第二個(gè)參數(shù)不為0，為要替換元素的個(gè)數(shù)：
- start：要替換元素的起始下標(biāo)；
- howmany：要替換元素的個(gè)數(shù)。
- item1, ..., itemx：要插入的元素。
示例如下：
let arr = ['A', 'B', 'C']let result = arr.splice(1, 2, 'D', 'E') console.log(arr); // [ 'A', 'D', 'E' ] console.log(result) // [ 'B', 'C' ]在這個(gè)例子中，指定從下標(biāo)1開(kāi)始替換元素，共替換2個(gè)元素，并將其替換為'D', 'E'，最后返回被刪除（替換）的元素[ 'B', 'C' ]，替換元素后的原數(shù)組arr為[ 'A', 'D', 'E' ]。
7 填充與復(fù)制方法
在ES6標(biāo)準(zhǔn)中新增了兩個(gè)方法用于數(shù)組的填充和復(fù)制，即fill()方法和copyWithin()。
7.1 fill()
語(yǔ)法如下：
let filledArray = arr.fill(value[, start[, end]])方法說(shuō)明如下：
- 功能描述： fill()方法用一個(gè)固定值填充一個(gè)數(shù)組中從起始下標(biāo)到終止下標(biāo)內(nèi)的全部元素。不包括終止下標(biāo)；
- 函數(shù)參數(shù)：若不提供start和end，則填充全部元素，若只提供start則填充到數(shù)組末尾：
- 【必選】value：指定用來(lái)填充的固定值；
- 【可選】start：進(jìn)行填充的起始下標(biāo)，閉區(qū)間，包括該下標(biāo)；
- 【可選】end：進(jìn)行填充的終止下標(biāo)，開(kāi)區(qū)間，不包括該下標(biāo)；
- 返回值：返回填充后的數(shù)組；
- 是否改變?cè)瓟?shù)組：改變?cè)瓟?shù)組。
示例如下：
let arr = ['A', 'B', 'C', 'D', 'E']let result = arr.fill('@', 2, 4) console.log(result) // [ 'A', 'B', '@', '@', 'E' ]圖解如下：
7.2 copyWithin()
語(yǔ)法如下：
let copiedArray = arr.copyWithin(target[, start[, end]])方法說(shuō)明如下：
- 功能描述： copyWithin()方法淺復(fù)制數(shù)組的一部分到同一數(shù)組中的另一個(gè)位置；
- 函數(shù)參數(shù)：若不提供start和end，則從target開(kāi)始復(fù)制后續(xù)全部元素，若只提供start則復(fù)制到數(shù)組末尾：
- 【必選】target：指定放置的目標(biāo)位置；
- 【可選】start：進(jìn)行復(fù)制的起始下標(biāo)，閉區(qū)間，包括該下標(biāo)；
- 【可選】end：進(jìn)行復(fù)制的終止下標(biāo)，開(kāi)區(qū)間，不包括該下標(biāo)；
- 返回值：返回復(fù)制后的數(shù)組；
- 是否改變?cè)瓟?shù)組：改變?cè)瓟?shù)組。
示例如下：
let arr = ['A', 'B', 'C', 'D', 'E']let result = arr.copyWithin(0, 1, 3) console.log(arr) // [ 'B', 'C', 'C', 'D', 'E' ] console.log(result) // [ 'B', 'C', 'C', 'D', 'E' ]圖解如下：
8 查找方法
JavaScript中數(shù)組的查找方法有很多：indexOf()、lastIndexOf()、find()、findIndex()和includes()。其中find()、findIndex()是ES6新增的方法；includes()是ES7新增的方法。
8.1 indexOf()
語(yǔ)法如下：
let index = arr.indexOf(searchElement[, fromIndex])方法說(shuō)明如下：
- 功能描述： indexOf()方法返回在數(shù)組中正序可以找到一個(gè)給定元素的第一個(gè)下標(biāo)；
- 函數(shù)參數(shù)：
- 【必選】searchElement：指定要查找的元素；
- 【可選】fromIndex：指定開(kāi)始查找的下標(biāo)，若該參數(shù)為負(fù)數(shù)，則從數(shù)組末尾開(kāi)始倒數(shù)；
- 返回值：返回首個(gè)被找到的元素在數(shù)組中的下標(biāo)，如果不存在，則返回-1；
- 是否改變?cè)瓟?shù)組：不改變?cè)瓟?shù)組。
示例如下：
let arr = ['A', 'B', 'C', 'D', 'E']let result = arr.indexOf('C') console.log(result) // 2result = arr.indexOf('C', 3) console.log(result) // -1第一次查找arr.indexOf('C')返回2這個(gè)容易理解，第二次查找arr.indexOf('C', 3)由于指定了從下標(biāo)3開(kāi)始查找，即從數(shù)組元素D開(kāi)始向后查找，顯然后面是沒(méi)有C元素，所以返回-1。
8.2 lastIndexOf()
語(yǔ)法如下：
let index = arr.lastIndexOf(searchElement[, fromIndex])方法說(shuō)明如下：
- 功能描述： lastIndexOf()方法返回在數(shù)組中倒序可以找到一個(gè)給定元素的第一個(gè)下標(biāo)；
- 函數(shù)參數(shù)：
- 【必選】searchElement：指定要查找的元素；
- 【可選】fromIndex：指定開(kāi)始查找的下標(biāo)，若該參數(shù)為負(fù)數(shù)，則從數(shù)組末尾開(kāi)始倒數(shù)；
- 返回值：返回首個(gè)被找到的元素在數(shù)組中的下標(biāo)，如果不存在，則返回-1；
- 是否改變?cè)瓟?shù)組：不改變?cè)瓟?shù)組。
示例如下：
let arr = ['A', 'B', 'C', 'D', 'E']let result = arr.lastIndexOf('C') console.log(result) // 2result = arr.lastIndexOf('C', 3) console.log(result) // 2第一次查找arr.lastIndexOf('C')返回2這個(gè)容易理解，第二次查找arr.lastIndexOf('C', 3)由于指定了從下標(biāo)3開(kāi)始倒序查找，即從數(shù)組元素D開(kāi)始向前查找，元素D之前是有C元素的，所以返回2。
8.3 find()
語(yǔ)法如下：
let item = arr.find(callback[, thisArg])方法說(shuō)明如下：
- 功能描述： find()方法返回?cái)?shù)組中滿足提供的測(cè)試函數(shù)的第一個(gè)元素的值；
- 函數(shù)參數(shù)：
- 【必選】callback()：在數(shù)組每一項(xiàng)上執(zhí)行的函數(shù)，find()方法會(huì)對(duì)數(shù)組中的每個(gè)元素都執(zhí)行一次callback()方法，直到有一個(gè)元素返回true，callback()有一個(gè)必選參數(shù)item，表示當(dāng)前元素；還有兩個(gè)可選參數(shù)index表示當(dāng)前下標(biāo)，array表示當(dāng)前數(shù)組本身；
- 【可選】thisArg：執(zhí)行回調(diào)時(shí)用作this的對(duì)象。
- 返回值：數(shù)組中第一個(gè)滿足所提供測(cè)試函數(shù)的元素的值，否則返回undefined；
- 是否改變?cè)瓟?shù)組：不改變?cè)瓟?shù)組。
示例如下：
let arr = ['A', 'B', 'C', 'D', 'E']let result = arr.find(item => item === 'C') console.log(result) // C在這個(gè)例子中提供的callback()方法為item => item === 'C'，find()方法會(huì)對(duì)每一個(gè)元素都執(zhí)行該函數(shù)判斷，直到遇到返回滿足item === 'C'的元素，所以最后返回C。
8.4 findIndex()
若讀者已經(jīng)掌握f(shuō)ind()的使用方法，那么findIndex()與find()的區(qū)別只有返回值的區(qū)別，find()返回的是匹配的元素，而findIndex()返回的是匹配的元素的下標(biāo)。
語(yǔ)法如下：
let index = arr.findIndex(callback[, thisArg])方法說(shuō)明如下：
- 功能描述： findIndex()方法返回?cái)?shù)組中滿足提供的測(cè)試函數(shù)的第一個(gè)元素的下標(biāo)；
- 函數(shù)參數(shù)：
- 【必選】callback()：在數(shù)組每一項(xiàng)上執(zhí)行的函數(shù)，find()方法會(huì)對(duì)數(shù)組中的每個(gè)元素都執(zhí)行一次callback()方法，直到有一個(gè)元素返回true，callback()有一個(gè)必選參數(shù)item，表示當(dāng)前元素；還有兩個(gè)可選參數(shù)index表示當(dāng)前下標(biāo)，array表示當(dāng)前數(shù)組本身；
- 【可選】thisArg：執(zhí)行回調(diào)時(shí)用作this的對(duì)象。
- 返回值：數(shù)組中第一個(gè)滿足所提供測(cè)試函數(shù)的元素的下標(biāo)，否則返回-1；
- 是否改變?cè)瓟?shù)組：不改變?cè)瓟?shù)組。
示例如下：
let arr = ['A', 'B', 'C', 'D', 'E']let result = arr.findIndex(item => item === 'C') console.log(result) // 2在這個(gè)例子中，元素C與item => item === 'C'匹配，返回元素C的下標(biāo)2。
8.5 includes()
語(yǔ)法如下：
let isIncludes = arr.includes(valueToFind[, fromIndex])方法說(shuō)明如下：
- 功能描述： includes()方法用來(lái)判斷一個(gè)數(shù)組是否包含一個(gè)指定的值；
- 函數(shù)參數(shù)：
- 【必選】valueToFind：指定要查找的元素；
- 【可選】fromIndex：指定開(kāi)始查找的下標(biāo)，若該參數(shù)為負(fù)數(shù)，則從數(shù)組末尾開(kāi)始倒數(shù)；
- 返回值：如果包含則返回true，否則返回false；
- 是否改變?cè)瓟?shù)組：不改變?cè)瓟?shù)組。
示例如下：
let arr = ['A', 'B', 'C', 'D', 'E']let result = arr.includes('C') console.log(result) // trueresult = arr.includes('F') console.log(result) // false9 轉(zhuǎn)換方法
數(shù)組的轉(zhuǎn)換方法主要有四個(gè)：toLocaleString()、toString()、valueOf()、join()。其中toLocaleString()、toString()、valueOf()屬于Object原型上的方法；而join()方法時(shí)數(shù)組轉(zhuǎn)字符串的方法。
9.1 toString()
語(yǔ)法如下：
let str = arr.toString()方法說(shuō)明如下：
- 功能描述： toString()方法返回的是由數(shù)組中每個(gè)值的字符串拼接而成的一個(gè)逗號(hào)分隔的字符串；
- 函數(shù)參數(shù)：無(wú)參數(shù)；
- 返回值：數(shù)組元素拼接而成的字符串；
- 是否改變?cè)瓟?shù)組：不改變?cè)瓟?shù)組。
示例如下：
let arr = ['A', 'B', 'C', 'D', 'E']let result = arr.toString() console.log(result) // A,B,C,D,E9.2 toLocaleString()
toString()和toLocaleString()在大多數(shù)情況下的使用是相同的，但有兩點(diǎn)需要注意：
9.3 valueOf()
語(yǔ)法如下：
let value = arr.valueOf()方法說(shuō)明如下：
- 功能描述： valueOf()方法返回的是數(shù)組本身；
- 函數(shù)參數(shù)：無(wú)參數(shù)；
- 返回值：數(shù)組本身；
- 是否改變?cè)瓟?shù)組：不改變?cè)瓟?shù)組。
示例如下：
let arr = ['A', 'B', 'C', 'D', 'E']let result = arr.valueOf() console.log(result) // [ 'A', 'B', 'C', 'D', 'E' ]9.4 join()
語(yǔ)法如下：
let str = arr.join([separator])方法說(shuō)明如下：
- 功能描述： join()方法返回所有元素連接成一個(gè)字符串（數(shù)組轉(zhuǎn)字符串的方法）；
- 函數(shù)參數(shù)：【可選】separator分隔符，用于指定每個(gè)元素之間的分隔符，默認(rèn)值為逗號(hào),；
- 返回值：連接成的字符串；
- 是否改變?cè)瓟?shù)組：不改變?cè)瓟?shù)組。
示例如下：
let arr = ['A', 'B', 'C', 'D', 'E']let result = arr.join() console.log(result) // A,B,C,D,Eresult = arr.join('@') console.log(result) // A@B@C@D@E10 并歸方法
JavaScript為數(shù)組提供了兩個(gè)歸并方法：reduce()和reduceRight()，兩者用法幾乎相同，只是元素執(zhí)行的順序不同。
10.1 reduce()
語(yǔ)法如下：
let newValue = reduce((previousValue, currentValue, currentIndex, array) => { /* ... */ }, initialValue)方法說(shuō)明如下：
- 功能描述： reduce()方法正序?qū)?shù)組中的每個(gè)元素執(zhí)行一個(gè)reducer函數(shù)，每一次運(yùn)行reducer函數(shù)會(huì)將先前元素的計(jì)算結(jié)果作為參數(shù)傳入，最后將其結(jié)果匯總為單個(gè)返回值；
- 函數(shù)參數(shù)：
- 【必選】reducer()函數(shù)，該函數(shù)的參數(shù)較為復(fù)雜，后文會(huì)詳細(xì)介紹；
- 【可選】initialValue初始值，后文會(huì)舉例說(shuō)明該參數(shù)的作用。
- 返回值：單個(gè)匯總值；
- 是否改變?cè)瓟?shù)組：不改變?cè)瓟?shù)組。
reducer()函數(shù)的參數(shù)：
- previousValue：上一次調(diào)用reducer()時(shí)的返回值。在第一次調(diào)用時(shí)，若指定了初始值initialValue，其值則為initialValue，否則為數(shù)組索引為0的元素array[0]。
- currentValue：數(shù)組中正在處理的元素。在第一次調(diào)用時(shí)，若指定了初始值initialValue，其值則為數(shù)組索引為0的元素array[0]，否則為array[1]。
- currentIndex：數(shù)組中正在處理的元素的索引。若指定了初始值initialValue，則起始索引號(hào)為0，否則從索引1起始。
- array：當(dāng)前用于遍歷的數(shù)組。
由于是否指定initialValue參數(shù)對(duì)執(zhí)行過(guò)程有一定影響，下面將分兩種情況講解：
示例如下，以一個(gè)求數(shù)組各個(gè)元素的累積和為例：
let arr = [1, 2, 3, 4] let result = arr.reduce((previousValue, currentValue, currentIndex, array) => {console.log(previousValue, currentValue, currentIndex)return previousValue + currentValue }) console.log(result) // 10// console.log(previousValue, currentValue, currentIndex) // 1 2 1 // 3 3 2 // 6 4 3在這個(gè)例子中，可見(jiàn)console.log(previousValue, currentValue, currentIndex)輸出了三次，說(shuō)明reducer()函數(shù)被執(zhí)行了三次，流程如下圖所示：
不難發(fā)現(xiàn)，上一次reducer函數(shù)返回的previousValue + currentValue為下一次reducer函數(shù)的previousValue參數(shù)。
同樣以求和為例，添加initialValue參數(shù)為5：
let arr = [1, 2, 3, 4] let result = arr.reduce((previousValue, currentValue, currentIndex, array) => {console.log(previousValue, currentValue, currentIndex)return previousValue + currentValue }, 5) console.log(result) // 15// console.log(previousValue, currentValue, currentIndex) // 5 1 0 // 6 2 1 // 8 3 2 // 11 4 3可以發(fā)現(xiàn)console.log(previousValue, currentValue, currentIndex)輸出了四次，說(shuō)明reducer函數(shù)被執(zhí)行了四次，流程如下圖所示：
可以發(fā)現(xiàn)，第一次執(zhí)行reducer函數(shù)的previousValue參數(shù)不是數(shù)組的第一個(gè)元素array[0]，而是指定的initialValue值。
總結(jié)來(lái)說(shuō)：如果沒(méi)有提供initialValue，reduce函數(shù)會(huì)從索引1的地方開(kāi)始執(zhí)行。如果提供了initialValue，從索引0開(kāi)始。
10.2 reduceRight()
reduceRight()方法和的上面的reduce()用法幾乎相同，只是該方法是對(duì)數(shù)組進(jìn)行倒序執(zhí)行。而reduce()方法是正序執(zhí)行的。
let arr = [1, 2, 3, 4] let result = arr.reduceRight((previousValue, currentValue, currentIndex, array) => {console.log(previousValue, currentValue, currentIndex)return previousValue + currentValue }) console.log(result) // 10// console.log(previousValue, currentValue, currentIndex) // 4 3 2 // 7 2 1 // 9 1 0圖解如下：
11 迭代器方法
可參閱Iterator 和 for…of 循環(huán)
在ES6中提供了三個(gè)用于遍歷數(shù)組的方法：keys()、values()、entries()，它們都返回一個(gè)迭代器對(duì)象，可以使用for...of進(jìn)行遍歷。
11.1 keys()
keys()方法返回?cái)?shù)組下標(biāo)的迭代器，無(wú)參數(shù)，不改變?cè)瓟?shù)組，示例如下：
let arr = ['A', 'B', 'C'] let result = arr.keys() console.log(typeof result) // object for (item of result) {console.log(item) }// console.log(item) // 0 // 1 // 211.2 values()
values()方法返回?cái)?shù)組元素的迭代器，無(wú)參數(shù)，不改變?cè)瓟?shù)組，示例如下：
let arr = ['A', 'B', 'C'] let result = arr.values() console.log(typeof result) // object for (item of result) {console.log(item) }// console.log(item) // A // B // C11.3 entries()
entries()方法返回索引值對(duì)的迭代器，無(wú)參數(shù)，不改變?cè)瓟?shù)組，示例如下：
let arr = ['A', 'B', 'C'] let result = arr.entries() console.log(typeof result) // object for (item of result) {console.log(item) }// console.log(item) // [ 0, 'A' ] // [ 1, 'B' ] // [ 2, 'C' ]12 迭代方法
JavaScript中為數(shù)組提供了5個(gè)迭代方法，分別是every()、filter()、forEach()、map()、some()。
12.1 forEach()
語(yǔ)法如下：
arr.forEach(callback(currentValue [, index [, array]])[, thisArg])方法說(shuō)明如下：
- 功能描述： forEach 方法對(duì)數(shù)組的每個(gè)元素執(zhí)行一次給定的函數(shù)；
- 函數(shù)參數(shù)：
- 【必選】callback()：用于每個(gè)元素執(zhí)行的回調(diào)函數(shù)；
- 【可選】thisArg：當(dāng)執(zhí)行回調(diào)函數(shù)callback時(shí)，用作this的值。
- 返回值：無(wú)返回值；
- 是否改變?cè)瓟?shù)組：不改變?cè)瓟?shù)組。
示例如下：
let arr = ['A', 'B', 'C'] arr.forEach((item, index, arr) => {console.log(item, index) })// console.log(item, index) // A 0 // B 1 // C 2該方法還可以有第二個(gè)參數(shù)thisArg，用來(lái)綁定回調(diào)函數(shù)內(nèi)部this變量（此時(shí)callback()函數(shù)不能為箭頭函數(shù)）：
let arr = ['A', 'B', 'C'] let arr2 = ['D', 'E', 'F'] arr.forEach(function(item, index, arr) {console.log(this[index]) }, arr2)// console.log(this[index]) // D // E // F12.2 map()
語(yǔ)法如下：
let newArray = arr.map(callback(currentValue [, index [, array]])[, thisArg])方法說(shuō)明如下：
- 功能描述： map()方法創(chuàng)建一個(gè)新數(shù)組，其結(jié)果是該數(shù)組中的每個(gè)元素是調(diào)用一次提供的函數(shù)后的返回值；
- 函數(shù)參數(shù)：
- 【必選】callback()：用于每個(gè)元素執(zhí)行的回調(diào)函數(shù)；
- 【可選】thisArg：當(dāng)執(zhí)行回調(diào)函數(shù)callback時(shí)，用作this的值。
- 返回值：返回一個(gè)處理后的新數(shù)組；
- 是否改變?cè)瓟?shù)組：不改變?cè)瓟?shù)組。
示例如下，下面例子將數(shù)組arr中的每個(gè)元素都乘以二：
let arr = [1, 2, 3] let result = arr.map((item, index, arr) => item * 2) console.log(result) // [ 2, 4, 6 ]12.3 filter()
語(yǔ)法如下：
let newArray = arr.filter(callback(element[, index[, array]])[, thisArg])方法說(shuō)明如下：
- 功能描述： filter()方法創(chuàng)建一個(gè)新數(shù)組，其包含通過(guò)所提供函數(shù)實(shí)現(xiàn)的測(cè)試的所有元素 ；
- 函數(shù)參數(shù)：
- 【必選】callback()：用于每個(gè)元素執(zhí)行測(cè)試的回調(diào)函數(shù)；
- 【可選】thisArg：當(dāng)執(zhí)行回調(diào)函數(shù)callback時(shí)，用作this的值。
- 返回值：一個(gè)新的、由通過(guò)測(cè)試的元素組成的數(shù)組，如果沒(méi)有任何數(shù)組元素通過(guò)測(cè)試，則返回空數(shù)組。；
- 是否改變?cè)瓟?shù)組：不改變?cè)瓟?shù)組。
示例如下，返回?cái)?shù)組arr中所有大于3的元素組成的新數(shù)組：
let arr = [1, 2, 3, 4, 5] let result = arr.filter(item => item > 3) console.log(result) // [ 4, 5 ]12.4 every()
語(yǔ)法如下：
let isTested = arr.every(callback(element[, index[, array]])[, thisArg])方法說(shuō)明如下：
- 功能描述： every()方法測(cè)試一個(gè)數(shù)組內(nèi)的所有元素是否都能通過(guò)某個(gè)指定函數(shù)的測(cè)試；
- 函數(shù)參數(shù)：
- 【必選】callback()：用于每個(gè)元素執(zhí)行測(cè)試的回調(diào)函數(shù)；
- 【可選】thisArg：當(dāng)執(zhí)行回調(diào)函數(shù)callback時(shí)，用作this的值。
- 返回值：當(dāng)所有元素都通過(guò)測(cè)試返回true，否則返回false；
- 是否改變?cè)瓟?shù)組：不改變?cè)瓟?shù)組。
示例如下：
let arr = [1, 2, 3, 4, 5] let result = arr.every(item => item > 0) console.log(result) // true12.5 some()
語(yǔ)法如下：
let isTested = arr.some(callback(element[, index[, array]])[, thisArg])方法說(shuō)明如下：
- 功能描述： some()方法測(cè)試數(shù)組中是不是至少有一個(gè)元素通過(guò)了被提供的函數(shù)測(cè)試；
- 函數(shù)參數(shù)：
- 【必選】callback()：用于每個(gè)元素執(zhí)行測(cè)試的回調(diào)函數(shù)；
- 【可選】thisArg：當(dāng)執(zhí)行回調(diào)函數(shù)callback時(shí)，用作this的值。
- 返回值：只要有一個(gè)元素通過(guò)測(cè)試則返回true，否則返回false；
- 是否改變?cè)瓟?shù)組：不改變?cè)瓟?shù)組。
示例如下：
let arr = [1, 2, 3, 4, 5] let result = arr.some(item => item > 5) console.log(result) // false13 扁平化方法
扁平化是指將多維數(shù)組轉(zhuǎn)換為一維數(shù)組，ES2019（ES10）中新增了flat()方法用于數(shù)組扁平化，除此之外還有flatMap()用于彌補(bǔ)map()方法的結(jié)果無(wú)法扁平化的缺陷。
13.1 flat()
語(yǔ)法如下：
let newArray = arr.flat([depth])方法說(shuō)明如下：
- 功能描述： flat()方法會(huì)按照一個(gè)可指定的深度遞歸遍歷數(shù)組，并將所有元素與遍歷到的子數(shù)組中的元素合并為一個(gè)新數(shù)組返回；
- 函數(shù)參數(shù)：【可選】depth指定要提取嵌套數(shù)組的結(jié)構(gòu)深度，默認(rèn)值為1。
- 返回值：一個(gè)包含將數(shù)組與子數(shù)組中所有元素的新數(shù)組；
- 是否改變?cè)瓟?shù)組：不改變?cè)瓟?shù)組。
示例如下：
let arr = [1, [2, 3], [4, [5]]] let result = arr.flat() console.log(result) // [ 1, 2, 3, 4, [ 5 ] ]在這個(gè)例子中，由于默認(rèn)只扁平化一層，所以結(jié)果并沒(méi)有完全扁平化，若要實(shí)現(xiàn)一個(gè)通用的扁平化方法，可以將參數(shù)depth設(shè)為Infinity：
let arr = [1, [2, 3], [4, [5]]] let result = arr.flat(Infinity) console.log(result) // [ 1, 2, 3, 4, 5 ]13.2 flatMap()
flatMap()方法是在map()方法的基礎(chǔ)上，將結(jié)果進(jìn)行一次扁平化操作，使用方法和map()完全一樣，只是返回結(jié)果不一樣。注意：flatMap()方法不能像flat()方法一樣指定扁平化層數(shù)，flatMap()方法只能扁平化一層。flatMap()的應(yīng)用場(chǎng)景在于某些情況下map()中的callback()方法可能會(huì)返回一個(gè)數(shù)組，那么最終map()方法返回的新數(shù)組是嵌套的數(shù)組，所以可以用flatMap()方法代替map()將結(jié)果扁平化，如下面例子：
let arr = ['hello!','my name is', 'syz'] let resultMap = arr.map(item => item.split(" ")) let resultFlatMap = arr.flatMap(item => item.split(" ")) console.log(resultMap) // [ [ 'hello!' ], [ 'my', 'name', 'is' ], [ 'syz' ] ] console.log(resultFlatMap) // [ 'hello!', 'my', 'name', 'is', 'syz' ]在這個(gè)例子中，map()中的callback()方法將數(shù)組中的字符串使用空格拆分成數(shù)組，注意：這里就觸發(fā)了扁平化條件，即callback()方法返回的就是一個(gè)數(shù)組，正如預(yù)期的結(jié)果一樣，使用map()方法返回的結(jié)果是嵌套的數(shù)組，而使用flatMap()方法返回的數(shù)組會(huì)進(jìn)行一次扁平化操作。
總結(jié)
以上是生活随笔為你收集整理的JavaScript数组方法大全解的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： JavaScript中this的五种绑定
- 下一篇： 图解flex布局