前言

眾所周知，向後端請求數據，處理數據是前端工程師必備的技能，從後端請求回來的數據往往是數組的形式返回到前端，因此數組處理方法的重要性可想而知；數組的處理方法在MDN文檔上很多，很多朋友在學習時往往會抓不住重點，導致事倍功半，但是大傢不要擔心，我已經為大傢總結瞭工作中常用的18種數組處理的方法，大傢一定要牢記哦！

文章の目錄

• 前言
• 不會改變原數組的方法
• • forEach()方法
  • filter()方法
  • map()方法
  • findIndex()方法
  • find()方法
  • some()方法
  • every()方法
  • reduce()歸納函數
  • concat()數組拼接
• 改變原數組的方法
• • push()/unshift()
  • pop()/shift()
  • sort()/reverse()
  • splice()
• 其它
• • flat()
  • fill()
• 寫在最後

不會改變原數組的方法 forEach()方法

forEach()方法傳入的參數是一個函數，內部傳入的函數的形參第一個是item數組每一項的值，第二個是索引號index，它的返回值是undefined；
運行實例如下：

控制臺輸出結果

filter()方法

filter()方法是篩選數組的方法，傳入的參數和forEach方法一樣，但是返回值為一個數組，實際應用是用來將獲取到的數據中符合條件的數組篩選出來；
運行的實例如下：

控制臺輸出結果如下：

map()方法

map()方法傳入的參數也同上，它的返回值也是一個新的數組；map()方法可以對數組的每一項進行相同的處理，運行的實例如下：

控制臺的輸出結果：

findIndex()方法

findIndex()方法顧名思義，是返回數組中的符合條件的第一項的索引號，如果找不到返回-1。傳入的參數同上，運行實例如下所示：

let arr = [1, 3, 3, 4, 5, 6, 7]//findIndex方法，返回第一個符合條件哪一項的索引號，找不到返回-1const res = arr.findIndex((item) => item > 5)console.log(res)

控制臺輸出結果：

find()方法

find()方法是返回查找到的第一個符合條件的那一項，傳入的參數同上。運行實例如下所示：

let arr = [1, 3, 3, 4, 5, 6, 7]//find()查找item，返回第一個符合條件的那一項,找不帶返回undefinedconst res2 = arr.find((item) => {  return item > 5})console.log(res2)

控制臺運行結果如下：

some()方法

some()方法傳入的參數同上，返回值是佈爾值，隻要查找到一項符合條件就返回true；示例如下：

let arr = [1, 3, 3, 4, 5, 6, 7]//some方法返回佈爾值const bl = arr.some((item) => {  return item > 5})console.log(bl)

every()方法

every()方法傳入的參數也是同上，返回值是佈爾值，但是必須每一項都符合條件才返回true；示例如下：

let arr = [1, 3, 3, 4, 5, 6, 7]//every()返回值為佈爾值需要全部通過篩選條件才返回trueconst bl2 = arr.every((currentValue) => {  return currentValue < 10})console.log(bl2)

reduce()歸納函數

reduce()函數中的參數第一個參數是函數，第二個參數是暫存變量sum的類型，第一個參數函數有四個參數，不過常用的就是第一個參數為累加暫存變量（return就是這個值），第二個參數item。第三個是index，第四個是數組本身；代碼示例如下：

let arr = [1, 3, 3, 4, 5, 6, 7]//reduce()歸納函數const previousValue = 0const arrSum = arr.reduce((previousValue, currentValue) => {  return previousValue + currentValue}, 0)console.log(arrSum)

控制臺輸出結果如下：

concat()數組拼接

concat()將兩個數組進行拼接，返回的是拼接完的新數組，不能給多維數組（數組套數組）進行拼接;
代碼示例如下：

let arr = [1, 3, 3, 4, 5, 6, 7]//concat 將兩個數組進行拼接 , 返回的是一個新的數組const newArr3 = [2, 5, 5, 6, 6, 8]const concatArr = arr.concat(newArr3)console.log(concatArr)

改變原數組的方法 push()/unshift()

push()/unshift()方法是分別在數組的最後面和最前面添加一個元素，返回值是新數組的長度；

//一下數組處理方法會改變原數組const Arr = [1, 3, 5, 6, 7, 8, 9]Arr.push(1)console.log(Arr)console.log(Arr)const a = Arr.unshift(1)console.log(a)

控制臺輸出結果如下：

pop()/shift()

此兩種方法pop()是刪除數組的最後一個值，shift()是刪除數組的第一項的值；返回值是刪除的那一項；

arr.pop(1)console.log(arr)arr.shift(1)console.log(arr)

控制臺輸出結果如下：

sort()/reverse()

sort()方法是排序，內部的參數是一個函數，function(a , b){ return a – b },通過此函數可以控制排序是降序函數升序，如果參數內部return a – b是降序，return a + b是升序；
reverse()是數組翻轉，即將數組的元素倒序排列；代碼示例如下：

let arr = [1, 3, 3, 4, 5, 6, 7]arr.sort((a, b) => {  return a - b})console.log(arr)arr.reverse()console.log(arr)

splice()

splice()方法修改原數組，返回一個刪除元素的新數組,負數就是從後往前數索引；傳入的第一個參數是刪除的起始元素的索引號，第二個參數是刪除的元素的個數；

let arr = [1, 3, 3, 4, 5, 6, 7]arr.splice(1, 3)console.log(arr)

其它 flat()

flat()用於多維數組拍平，傳入的參數是數組拍平的深度，也可以是infiniy，代表數組拍平的深度是無窮大
代碼示例如下：

const Arr2 = [  [1, 2],  [2, 3],  [4, 5],  [5, 6],]console.log(Arr2.flat(Infinity))

控制臺輸出結果：

fill()

可以對數組進行填充：寫法：Array.fill(1 , 2 , 4)數組中填充1 ， 從索引值是2的元素開始， 到元素的索引號是4開始，不包括索引值是4的元素；填充的元素會覆蓋原來對應索引號的元素；
代碼示例如下：

const Arr2 = [  [1, 2],  [2, 3],  [4, 5],  [5, 6],]console.log(Arr2.fill(1, 0, 4))

控制臺輸出結果：

寫在最後

到此18種常用數組方法已經講解完畢，本文因為篇幅有限，部分的方法可能講解不夠詳細，請大傢諒解，如有疑問的地方，可以查詢MDN文章，下面附上MDN文章，有問題的查詢文檔即可：
MDN文檔

(❁´◡`❁)您的點贊➕評論➕收藏⭐是作者創作的最大動力