歸納整理JavaScript陣列操作方法

本篇文章給大家帶來了關於的相關知識，其中主要介紹了關於JavaScript陣列方法的相關問題，陣列中的部分方法需要提供區間範圍begin/start和end，所有含有這類範圍的方法，其區間都遵循左閉右開原則，下面一起來看一下，希望對大家有幫助。

【相關推薦：、】

本文只講解標準化方法，而不會講解實驗性方法，如at()、groupBy()、groupByMap()和toSource()。
陣列中的部分方法需要提供區間範圍begin/start和end，所有含有這類範圍的方法，其區間都遵循左閉右開原則，如(1,4)，在數學上可以理解為[1,4)。
部分陣列方法會改變原陣列，這一點一定要注意。

1 是否改變原陣列

1.1 改變原陣列的方法

填充與複製方法：fill()、copeWithin()；
棧方法：pop()、push()；
佇列方法：shift()、unshift()；
排序方法：sort()、reverse()；
刪除/插入/替換方法：splice()。

其實很好理解和記憶，除去上面列出的方法型別，其他方法型別大概為查詢方法和迭代方法，這兩種型別的方法是不會改變原陣列的。

1.2 不改變原陣列的方法

除去上面以外的其他方法不會改變原陣列，但有三個方法容易記錯：

concat()：用於合併陣列，該方法會返回合併後的新陣列。
slice()：用於根據區間擷取陣列中的元素，返回擷取後的新陣列，主要是容易和splice()記混。
flat()：用於扁平化陣列，該方法返回扁平化後的新陣列。

2 棧方法

棧是一種先進後出的資料結構，JavaScript中的陣列通過push()和pop()兩個方法實現入棧和出棧的操作。

2.1 `push()`

語法如下：

let newLength = arr.push(element1, element2, ..., elementN)

方法說明如下：

功能描述：push()方法將一個或多個元素新增到陣列的末尾；
函數引數：一個或多個元素；
返回值：返回該陣列的新長度length；
是否改變原陣列：改變原陣列。

範例如下：

let arr = ['A', 'B', 'C']

let result = arr.push('D')
console.log(arr) // [ 'A', 'B', 'C', 'D' ]
console.log(result) // 4

result = arr.push('E', 'F')
console.log(arr) // [ 'A', 'B', 'C', 'D', 'E', 'F' ]
console.log(result) // 6

圖解如下：

在這裡插入圖片描述

2.2 `pop()`

語法如下：

let deletedValue = arr.pop()

方法說明如下：

功能描述：pop()方法從陣列中刪除最後一個元素；
函數引數：無引數；
返回值：返回被刪除的最後一個元素的值；
是否改變原陣列：改變原陣列。

範例如下：

let arr = ['A', 'B', 'C']

let result = arr.pop()
console.log(arr) // [ 'A', 'B' ]
console.log(result) // C

result = arr.pop()
console.log(arr) // [ 'A' ]
console.log(result) // B

圖解如下：

在這裡插入圖片描述

3 佇列方法

佇列是一種先進先出的資料結構，JavaScript中的陣列通過push()和shift()兩個方法實現入隊和出隊的操作。其中push()方法請參閱2.1節，本章節主要講解shift()及其逆向方法unshift()。

3.1 `shift()`

語法如下：

let deletedValue = arr.shift()

方法說明如下：

功能描述：shift()方法從陣列中刪除第一個元素；
函數引數：無引數；
返回值：返回被刪除的第一個元素的值；
是否改變原陣列：改變原陣列。

範例如下：

let arr = ['A', 'B', 'C']

let result = arr.shift()
console.log(arr) // [ 'B', 'C' ]
console.log(result) // A

result = arr.shift()
console.log(arr) // [ 'C' ]
console.log(result) // B

圖解如下：

在這裡插入圖片描述

3.2 `unshift()`

unshift()方法說明如下：

功能描述：unshift()方法將一個或多個元素新增到陣列的開頭；
函數引數：一個或多個元素；
返回值：返回該陣列的新長度newLength；
是否改變原陣列：改變原陣列。

語法如下：

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) // 4

result = arr.unshift('E', 'F')
console.log(arr) // [ 'E', 'F', 'D', 'A', 'B', 'C' ]
console.log(result) // 6

圖解如下：

在這裡插入圖片描述

4 排序方法

JavaScript中的陣列提供自定義規則排序sort()方法和根據下標逆置陣列reverse()方法。

4.1 `sort()`

語法如下：

let sortedArray = arr.sort([compareFunction]) // compareFunction是可選的

方法說明如下：

功能描述：sort()方法將數位元素按照字串，然後依次比較其Unicode值（由小到大排序）；
函數引數：【可選】指定排序比較的函數compareFunction；
返回值：返回排序後的新陣列；
是否改變原陣列：改變原陣列。

範例如下：

let arr = [4, 6, 3, 1, 5, 2]arr.sort()console.log(arr); // [ 1, 2, 3, 4, 5, 6 ]

顯而易見，上面程式碼的執行結果是符合預期的，下面再舉一個例子：

let arr = [16, 2, 32, 4, 25]arr.sort()console.log(arr); // [ 16, 2, 25, 32, 4 ]

最後輸出的結果為[ 16, 2, 25, 32, 4 ]，這顯然是不符合預期的，造成這種情況的原因是當不指定compareFunction比較函數時，預設採用的是比較字串Unicode值的形式，在進行字串比較時，依次比較字串各個位置的值，由於字串'1'的Unicode值比字串'2'的Unicode值小，所以陣列arr中的元素16會排在元素2和元素4之前，其他元素同理。

要解決這個問題，需要明確指定compareFunction比較函數，該函數的完全表達形式為compareFunction(a, b)，其中引數a和引數b表示將要比較的兩個元素，compareFunction(a, b)的返回值共有如下三種情況，決定著排序的結果：

小於0：a會排序在b之前；
等於0：a和b的相對位置不變；
大於0：a會排序在b之後。

下面舉個具體的例子，以升序排序為例，由於排序要求為升序排列，那麼較小的數應該排在前面，即當a和b進行比較時，若a比b的值小，那麼應該返回一個小於0的數；當a比b的值大時，應該返回一個大於0的數；根據以上分析，需要的compareFunction比較函數如下：

function compareFunction(a, b) {
  if (a < b) {
    return -1;
  }
  if (a > b) {
    return 1;
  }
  return 0;}// 簡寫為function compareFunction(a, b) {
  return a - b}// 箭頭函數簡寫為(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 ]

此時的輸出結果是符合預期的。

注：若要實現降序排序的效果，只需要將compareFunction引數改為(a, b) => b - a即可。

4.2 `reverse()`

語法如下：

arr.reverse()

方法說明如下：

功能描述：reverse()方法將陣列中元素的位置按下標逆置；
函數引數：無引數；
返回值：返回逆置後的新陣列；
是否改變原陣列：改變原陣列。

範例如下：

let arr = ['A', 'B', 'C']arr.reverse()console.log(arr) // [ 'C', 'B', 'A' ]

圖解如下：

在這裡插入圖片描述

5 擷取與合併方法

JavaScript中提供了slice()方法用於實現給定區間元素的提取，還提供了contact()方法用於給定陣列或元素的合併。

5.1 `slice()`

語法如下：

let newArray = arr.slice([begin[, end]])

方法說明如下：

功能描述：slice()方法將擷取陣列中固定區間中的元素；
函數引數：
- 【可選】begin：擷取下標的起始位置，閉區間，包括該下標；預設值為0，begin值不可大於陣列長度，否則返回空陣列；
- 【可選】end：擷取下標的終點位置，開區間，不包括該下標；預設為擷取到陣列末尾，end值若大於陣列長度，則會擷取到陣列末尾。
返回值：返回擷取後的新陣列；
是否改變原陣列：不改變原陣列。

範例如下：

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兩個引數可以為負數：

begin為負數時，則表示從原陣列中的倒數第幾個元素開始提取，slice(-2)表示提取原陣列中的倒數第二個元素到最後一個元素（包含最後一個元素）。
end為負數時，則表示在原陣列中的倒數第幾個元素結束抽取。 slice(-2, -1)表示抽取了原陣列中的倒數第二個元素到最後一個元素（不包含最後一個元素，也就是隻有倒數第二個元素）。

下面舉個例子：

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()`

語法如下：

let newArray = arr.concat(value1[, value2[, ...[, valueN]]])

方法說明如下：

功能描述： concat()方法用於合併兩個或多個元素；
函數引數：兩個或多個元素；
返回值：返回合併後的新陣列；
是否改變原陣列：不改變原陣列。

範例如下：

let arr = ['A', 'B', 'C']

let result = arr.concat('D', 'E')
console.log(result) // [ 'A', 'B', 'C', 'D', 'E' ]

需要注意的是，concat()方法會將傳入的陣列引數做一次扁平化處理，如下面程式碼：

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中陣列最為強大的方法之一，可以調整引數實現刪除、插入和替換元素操作。

6.1 簡介

語法如下：

let deletedItems = array.splice(start[, howmany[, item1[, item2[, ...]]]])

方法說明如下：

功能描述： splice()方法用於在陣列中進行刪除、插入和替換操作；
函數引數：（splice()方法的引數較為複雜，下面小節詳細講解）；
返回值：返回被刪除或替換的內容；
是否改變原陣列：改變原陣列。

6.2 引數

splice()方法的引數如下：

【必須】start：操作的起始下標，規定刪除、插入或替換元素的位置，使用負數可從陣列結尾處規定位置。
【必須】howmany：要刪除的元素個數。
【可選】item1, ..., itemx：要插入或替換的元素。

上面三種引數進行不同搭配可以實現刪除、插入和替換三種操作。

6.3 刪除元素操作

使用splice()方法進行刪除元素操作的特徵是隻提供兩個引數：

start：要刪除元素的起始下標；
howmany：要刪除元素的個數。

範例如下：

let arr = ['A', 'B', 'C', 'D', 'E']

let result = arr.splice(1, 3)
console.log(arr); // [ 'A', 'E' ]
console.log(result) // [ 'B', 'C', 'D' ]

在這個例子中，指定從下標1開始刪除三個元素，返回被刪除的元素[ 'B', 'C', 'D' ]，刪除後原陣列arr為[ 'A', 'E' ]。

6.4 插入元素操作

使用splice()方法進行插入元素操作的特徵是提供三個引數，且第二個引數必須是0：

start：要插入元素的起始下標；
howmany：要刪除元素的個數，既然是替換，則不刪除原陣列的任何元素，所以是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) // []

在這個例子中，指定從下標1開始插入元素，不刪除原陣列的元素，插入元素'D', 'E'，由於沒有刪除或替換元素，所以返回值為空陣列[]，插入元素後的原陣列arr為[ 'A', 'D', 'E', 'B', 'C' ]。

6.5 替換元素操作

使用splice()方法進行插入元素操作的特徵是提供三個引數，且第二個引數不為0，為要替換元素的個數：

start：要替換元素的起始下標；
howmany：要替換元素的個數。
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' ]

在這個例子中，指定從下標1開始替換元素，共替換2個元素，並將其替換為'D', 'E'，最後返回被刪除（替換）的元素[ 'B', 'C' ]，替換元素後的原陣列arr為[ 'A', 'D', 'E' ]。

7 填充與複製方法

在ES6標準中新增了兩個方法用於陣列的填充和複製，即fill()方法和copyWithin()。

7.1 `fill()`

語法如下：

let filledArray = arr.fill(value[, start[, end]])

方法說明如下：

功能描述： fill()方法用一個固定值填充一個陣列中從起始下標到終止下標內的全部元素。不包括終止下標；
函數引數：若不提供start和end，則填充全部元素，若只提供start則填充到陣列末尾：
- 【必選】value：指定用來填充的固定值；
- 【可選】start：進行填充的起始下標，閉區間，包括該下標；
- 【可選】end：進行填充的終止下標，開區間，不包括該下標；
返回值：返回填充後的陣列；
是否改變原陣列：改變原陣列。

範例如下：

let arr = ['A', 'B', 'C', 'D', 'E']


let result = arr.fill('@', 2, 4)
console.log(result) // [ 'A', 'B', '@', '@', 'E' ]

圖解如下：

在這裡插入圖片描述

7.2 `copyWithin()`

語法如下：

let copiedArray = arr.copyWithin(target[, start[, end]])

方法說明如下：

功能描述： copyWithin()方法淺複製陣列的一部分到同一陣列中的另一個位置；
函數引數：若不提供start和end，則從target開始複製後續全部元素，若只提供start則複製到陣列末尾：
- 【必選】target：指定放置的目標位置；
- 【可選】start：進行復制的起始下標，閉區間，包括該下標；
- 【可選】end：進行復制的終止下標，開區間，不包括該下標；
返回值：返回複製後的陣列；
是否改變原陣列：改變原陣列。

範例如下：

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中陣列的查詢方法有很多：indexOf()、lastIndexOf()、find()、findIndex()和includes()。其中find()、findIndex()是ES6新增的方法；includes()是ES7新增的方法。

8.1 `indexOf()`

語法如下：

let index = arr.indexOf(searchElement[, fromIndex])

方法說明如下：

功能描述： indexOf()方法返回在陣列中正序可以找到一個給定元素的第一個下標；
函數引數：
- 【必選】searchElement：指定要查詢的元素；
- 【可選】fromIndex：指定開始查詢的下標，若該引數為負數，則從陣列末尾開始倒數；
返回值：返回首個被找到的元素在陣列中的下標，如果不存在，則返回-1；
是否改變原陣列：不改變原陣列。

範例如下：

let arr = ['A', 'B', 'C', 'D', 'E']

let result = arr.indexOf('C')
console.log(result) // 2

result = arr.indexOf('C', 3)
console.log(result) // -1

第一次查詢arr.indexOf('C')返回2這個容易理解，第二次查詢arr.indexOf('C', 3)由於指定了從下標3開始查詢，即從陣列元素D開始向後查詢，顯然後面是沒有C元素，所以返回-1。

8.2 `lastIndexOf()`

語法如下：

let index = arr.lastIndexOf(searchElement[, fromIndex])

方法說明如下：

功能描述： lastIndexOf()方法返回在陣列中倒序可以找到一個給定元素的第一個下標；
函數引數：
- 【必選】searchElement：指定要查詢的元素；
- 【可選】fromIndex：指定開始查詢的下標，若該引數為負數，則從陣列末尾開始倒數；
返回值：返回首個被找到的元素在陣列中的下標，如果不存在，則返回-1；
是否改變原陣列：不改變原陣列。

範例如下：

let arr = ['A', 'B', 'C', 'D', 'E']

let result = arr.lastIndexOf('C')
console.log(result) // 2

result = arr.lastIndexOf('C', 3)
console.log(result) // 2

第一次查詢arr.lastIndexOf('C')返回2這個容易理解，第二次查詢arr.lastIndexOf('C', 3)由於指定了從下標3開始倒序查詢，即從陣列元素D開始向前查詢，元素D之前是有C元素的，所以返回2。

8.3 `find()`

語法如下：

let item = arr.find(callback[, thisArg])

方法說明如下：

功能描述： find()方法返回陣列中滿足提供的測試函數的第一個元素的值；
函數引數：
- 【必選】callback()：在陣列每一項上執行的函數，find()方法會對陣列中的每個元素都執行一次callback()方法，直到有一個元素返回true，callback()有一個必選引數item，表示當前元素；還有兩個可選引數index表示當前下標，array表示當前陣列本身；
- 【可選】thisArg：執行回撥時用作this的物件。
返回值：陣列中第一個滿足所提供測試函數的元素的值，否則返回undefined；
是否改變原陣列：不改變原陣列。

範例如下：

let arr = ['A', 'B', 'C', 'D', 'E']let result = arr.find(item => item === 'C')console.log(result) // C

在這個例子中提供的callback()方法為item => item === 'C'，find()方法會對每一個元素都執行該函數判斷，直到遇到返回滿足item === 'C'的元素，所以最後返回C。

8.4 `findIndex()`

若讀者已經掌握find()的使用方法，那麼findIndex()與find()的區別只有返回值的區別，find()返回的是匹配的元素，而findIndex()返回的是匹配的元素的下標。

語法如下：

let index = arr.findIndex(callback[, thisArg])

方法說明如下：

功能描述： findIndex()方法返回陣列中滿足提供的測試函數的第一個元素的下標；
函數引數：
- 【必選】callback()：在陣列每一項上執行的函數，find()方法會對陣列中的每個元素都執行一次callback()方法，直到有一個元素返回true，callback()有一個必選引數item，表示當前元素；還有兩個可選引數index表示當前下標，array表示當前陣列本身；
- 【可選】thisArg：執行回撥時用作this的物件。
返回值：陣列中第一個滿足所提供測試函數的元素的下標，否則返回-1；
是否改變原陣列：不改變原陣列。

範例如下：

let arr = ['A', 'B', 'C', 'D', 'E']

let result = arr.findIndex(item => item === 'C')
console.log(result) // 2

在這個例子中，元素C與item => item === 'C'匹配，返回元素C的下標2。

8.5 `includes()`

語法如下：

let isIncludes = arr.includes(valueToFind[, fromIndex])

方法說明如下：

功能描述： includes()方法用來判斷一個陣列是否包含一個指定的值；
函數引數：
- 【必選】valueToFind：指定要查詢的元素；
- 【可選】fromIndex：指定開始查詢的下標，若該引數為負數，則從陣列末尾開始倒數；
返回值：如果包含則返回true，否則返回false；
是否改變原陣列：不改變原陣列。

範例如下：

let arr = ['A', 'B', 'C', 'D', 'E']

let result = arr.includes('C')
console.log(result) // true

result = arr.includes('F')
console.log(result) // false

9 轉換方法

陣列的轉換方法主要有四個：toLocaleString()、toString()、valueOf()、join()。其中toLocaleString()、toString()、valueOf()屬於Object原型上的方法；而join()方法時陣列轉字串的方法。

9.1 `toString()`

語法如下：

let str = arr.toString()

方法說明如下：

功能描述： toString()方法返回的是由陣列中每個值的字串拼接而成的一個逗號分隔的字串；
函數引數：無引數；
返回值：陣列元素拼接而成的字串；
是否改變原陣列：不改變原陣列。

範例如下：

let arr = ['A', 'B', 'C', 'D', 'E']let result = arr.toString()console.log(result) // A,B,C,D,E

9.2 `toLocaleString()`

toString()和toLocaleString()在大多數情況下的使用是相同的，但有兩點需要注意：

當陣列元素有數位且數位長度大於等於四位時，toLocaleString()會新增千位分割逗號：

let arr = [1234]let result = arr.toLocaleString()console.log(result) // 1,234

當陣列元素有日期元素時，toLocaleString()會將其轉換為本地時間表示法：

let arr = [new Date()]let result = arr.toLocaleString()console.log(result) // 2022/3/24下午8:48:42

9.3 `valueOf()`

語法如下：

let value = arr.valueOf()

方法說明如下：

功能描述： valueOf()方法返回的是陣列本身；
函數引數：無引數；
返回值：陣列本身；
是否改變原陣列：不改變原陣列。

範例如下：

let arr = ['A', 'B', 'C', 'D', 'E']

let result = arr.valueOf()
console.log(result) // [ 'A', 'B', 'C', 'D', 'E' ]

9.4 `join()`

語法如下：

let str = arr.join([separator])

方法說明如下：

功能描述： join()方法返回所有元素連線成一個字串（陣列轉字串的方法）；
函數引數：【可選】separator分隔符，用於指定每個元素之間的分隔符，預設值為逗號,；
返回值：連線成的字串；
是否改變原陣列：不改變原陣列。

範例如下：

let arr = ['A', 'B', 'C', 'D', 'E']

let result = arr.join()
console.log(result) // A,B,C,D,E

result = arr.join('@')
console.log(result) // A@B@C@D@E

10 並歸方法

JavaScript為陣列提供了兩個歸併方法：reduce()和reduceRight()，兩者用法幾乎相同，只是元素執行的順序不同。

10.1 `reduce()`

語法如下：

let newValue = reduce((previousValue, currentValue, currentIndex, array) => { /* ... */ }, initialValue)

方法說明如下：

功能描述： reduce()方法正序對陣列中的每個元素執行一個reducer函數，每一次執行reducer函數會將先前元素的計算結果作為引數傳入，最後將其結果彙總為單個返回值；
函數引數：
- 【必選】reducer()函數，該函數的引數較為複雜，後文會詳細介紹；
- 【可選】initialValue初始值，後文會舉例說明該引數的作用。
返回值：單個彙總值；
是否改變原陣列：不改變原陣列。

reducer()函數的引數：

previousValue：上一次呼叫reducer()時的返回值。在第一次呼叫時，若指定了初始值initialValue，其值則為initialValue，否則為陣列索引為0的元素array[0]。
currentValue：陣列中正在處理的元素。在第一次呼叫時，若指定了初始值initialValue，其值則為陣列索引為0的元素array[0]，否則為array[1]。
currentIndex：陣列中正在處理的元素的索引。若指定了初始值initialValue，則起始索引號為0，否則從索引1起始。
array：當前用於遍歷的陣列。

由於是否指定initialValue引數對執行過程有一定影響，下面將分兩種情況講解：

無initialValue引數

範例如下，以一個求陣列各個元素的累積和為例：

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

在這個例子中，可見console.log(previousValue, currentValue, currentIndex)輸出了三次，說明reducer()函數被執行了三次，流程如下圖所示：

在這裡插入圖片描述

不難發現，上一次reducer函數返回的previousValue + currentValue為下一次reducer函數的previousValue引數。

有initialValue引數

同樣以求和為例，新增initialValue引數為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

可以發現console.log(previousValue, currentValue, currentIndex)輸出了四次，說明reducer函數被執行了四次，流程如下圖所示：

在這裡插入圖片描述

可以發現，第一次執行reducer函數的previousValue引數不是陣列的第一個元素array[0]，而是指定的initialValue值。

總結來說：如果沒有提供initialValue，reduce函數會從索引1的地方開始執行。如果提供了initialValue，從索引0開始。

10.2 `reduceRight()`

reduceRight()方法和的上面的reduce()用法幾乎相同，只是該方法是對陣列進行倒序執行。而reduce()方法是正序執行的。

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 迴圈

在ES6中提供了三個用於遍歷陣列的方法：keys()、values()、entries()，它們都返回一個迭代器物件，可以使用for...of進行遍歷。

11.1 `keys()`

keys()方法返回陣列下標的迭代器，無引數，不改變原陣列，範例如下：

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
// 2

11.2 `values()`

values()方法返回陣列元素的迭代器，無引數，不改變原陣列，範例如下：

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
// C

11.3 `entries()`

entries()方法返回索引值對的迭代器，無引數，不改變原陣列，範例如下：

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中為陣列提供了5個迭代方法，分別是every()、filter()、forEach()、map()、some()。

12.1 `forEach()`

語法如下：

arr.forEach(callback(currentValue [, index [, array]])[, thisArg])

方法說明如下：

功能描述： forEach 方法對陣列的每個元素執行一次給定的函數；
函數引數：
- 【必選】callback()：用於每個元素執行的回撥函數；
- 【可選】thisArg：當執行回撥函數callback時，用作this的值。
返回值：無返回值；
是否改變原陣列：不改變原陣列。

範例如下：

let arr = ['A', 'B', 'C']
arr.forEach((item, index, arr) => {
  console.log(item, index)
})

// console.log(item, index)
// A 0
// B 1
// C 2

該方法還可以有第二個引數thisArg，用來繫結回撥函數內部this變數（此時callback()函數不能為箭頭函數）：

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
// F

12.2 `map()`

語法如下：

let newArray = arr.map(callback(currentValue [, index [, array]])[, thisArg])

方法說明如下：

功能描述： map()方法建立一個新陣列，其結果是該陣列中的每個元素是呼叫一次提供的函數後的返回值；
函數引數：
- 【必選】callback()：用於每個元素執行的回撥函數；
- 【可選】thisArg：當執行回撥函數callback時，用作this的值。
返回值：返回一個處理後的新陣列；
是否改變原陣列：不改變原陣列。

範例如下，下面例子將陣列arr中的每個元素都乘以二：

let arr = [1, 2, 3]
let result = arr.map((item, index, arr) => item * 2)
console.log(result) // [ 2, 4, 6 ]

12.3 `filter()`

語法如下：

let newArray = arr.filter(callback(element[, index[, array]])[, thisArg])

方法說明如下：

功能描述： filter()方法建立一個新陣列，其包含通過所提供函數實現的測試的所有元素；
函數引數：
- 【必選】callback()：用於每個元素執行測試的回撥函數；
- 【可選】thisArg：當執行回撥函數callback時，用作this的值。
返回值：一個新的、由通過測試的元素組成的陣列，如果沒有任何陣列元素通過測試，則返回空陣列。；
是否改變原陣列：不改變原陣列。

範例如下，返回陣列arr中所有大於3的元素組成的新陣列：

let arr = [1, 2, 3, 4, 5]
let result = arr.filter(item => item > 3)
console.log(result) // [ 4, 5 ]

12.4 `every()`

語法如下：

let isTested = arr.every(callback(element[, index[, array]])[, thisArg])

方法說明如下：

功能描述： every()方法測試一個陣列內的所有元素是否都能通過某個指定函數的測試；
函數引數：
- 【必選】callback()：用於每個元素執行測試的回撥函數；
- 【可選】thisArg：當執行回撥函數callback時，用作this的值。
返回值：當所有元素都通過測試返回true，否則返回false；
是否改變原陣列：不改變原陣列。

範例如下：

let arr = [1, 2, 3, 4, 5]
let result = arr.every(item => item > 0)
console.log(result) // true

12.5 `some()`

語法如下：

let isTested = arr.some(callback(element[, index[, array]])[, thisArg])

方法說明如下：

功能描述： some()方法測試陣列中是不是至少有一個元素通過了被提供的函數測試；
函數引數：
- 【必選】callback()：用於每個元素執行測試的回撥函數；
- 【可選】thisArg：當執行回撥函數callback時，用作this的值。
返回值：只要有一個元素通過測試則返回true，否則返回false；
是否改變原陣列：不改變原陣列。

範例如下：

let arr = [1, 2, 3, 4, 5]let result = arr.some(item => item > 5)console.log(result) // false

13 扁平化方法

扁平化是指將多維陣列轉換為一維陣列，ES2019（ES10）中新增了flat()方法用於陣列扁平化，除此之外還有flatMap()用於彌補map()方法的結果無法扁平化的缺陷。

13.1 `flat()`

語法如下：

let newArray = arr.flat([depth])

方法說明如下：

功能描述： flat()方法會按照一個可指定的深度遞迴遍歷陣列，並將所有元素與遍歷到的子陣列中的元素合併為一個新陣列返回；
函數引數：【可選】depth指定要提取巢狀陣列的結構深度，預設值為1。
返回值：一個包含將陣列與子陣列中所有元素的新陣列；
是否改變原陣列：不改變原陣列。

範例如下：

let arr = [1, [2, 3], [4, [5]]]let result = arr.flat()console.log(result) // [ 1, 2, 3, 4, [ 5 ] ]

在這個例子中，由於預設只扁平化一層，所以結果並沒有完全扁平化，若要實現一個通用的扁平化方法，可以將引數depth設為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()方法的基礎上，將結果進行一次扁平化操作，使用方法和map()完全一樣，只是返回結果不一樣。注意：flatMap()方法不能像flat()方法一樣指定扁平化層數，flatMap()方法只能扁平化一層。flatMap()的應用場景在於某些情況下map()中的callback()方法可能會返回一個陣列，那麼最終map()方法返回的新陣列是巢狀的陣列，所以可以用flatMap()方法代替map()將結果扁平化，如下面例子：

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' ]

在這個例子中，map()中的callback()方法將陣列中的字串使用空格拆分成陣列，注意：這裡就觸發了扁平化條件，即callback()方法返回的就是一個陣列，正如預期的結果一樣，使用map()方法返回的結果是巢狀的陣列，而使用flatMap()方法返回的陣列會進行一次扁平化操作。

【相關推薦：、】

以上就是歸納整理JavaScript陣列操作方法的詳細內容，更多請關注TW511.COM其它相關文章！

歸納整理JavaScript陣列操作方法

1 是否改變原陣列

1.1 改變原陣列的方法

1.2 不改變原陣列的方法

2 棧方法

2.1 push()

2.2 pop()

3 佇列方法

3.1 shift()

3.2 unshift()

4 排序方法

4.1 sort()

4.2 reverse()

5 擷取與合併方法

5.1 slice()

5.2 contact()

6 splice()方法

6.1 簡介

6.2 引數

6.3 刪除元素操作

6.4 插入元素操作

6.5 替換元素操作

7 填充與複製方法

7.1 fill()

7.2 copyWithin()

8 查詢方法

8.1 indexOf()

8.2 lastIndexOf()

8.3 find()

8.4 findIndex()

8.5 includes()

9 轉換方法

9.1 toString()

9.2 toLocaleString()

9.3 valueOf()

9.4 join()

10 並歸方法

10.1 reduce()

10.2 reduceRight()

11 迭代器方法

11.1 keys()

11.2 values()

11.3 entries()

12 迭代方法

12.1 forEach()

12.2 map()

12.3 filter()

12.4 every()

12.5 some()

13 扁平化方法

13.1 flat()

13.2 flatMap()

2.1 `push()`

2.2 `pop()`

3.1 `shift()`

3.2 `unshift()`

4.1 `sort()`

4.2 `reverse()`

5.1 `slice()`

5.2 `contact()`

6 `splice()`方法

7.1 `fill()`

7.2 `copyWithin()`

8.1 `indexOf()`

8.2 `lastIndexOf()`

8.3 `find()`

8.4 `findIndex()`

8.5 `includes()`

9.1 `toString()`

9.2 `toLocaleString()`

9.3 `valueOf()`

9.4 `join()`

10.1 `reduce()`

10.2 `reduceRight()`

11.1 `keys()`

11.2 `values()`

11.3 `entries()`

12.1 `forEach()`

12.2 `map()`

12.3 `filter()`

12.4 `every()`

12.5 `some()`

13.1 `flat()`

13.2 `flatMap()`