JavaScript總結之18種常用陣列方法

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

不會改變原數組的方法

forEach()方法

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

控制台輸出結果

filter()方法

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

控制台輸出結果如下：

map()方法

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

控制台的輸出結果：

findIndex()方法

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

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

控制台輸出結果：

find()方法

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

let arr = [1, 3, 3, 4, 5, 6, 7]
//find()找出item，回傳第一個符合條件的那一項,找不帶回傳undefined
const 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()傳回值為布林值需要全部通過篩選條件才回傳true
const 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 = 0
const 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))

控制台輸出結果：