JavaScript ,18種常用數組方法,快來看看你會嗎?

前言

眾所周知,向後端請求數據,處理數據是前端工程師必備的技能,從後端請求回來的數據往往是數組的形式返回到前端,因此數組處理方法的重要性可想而知;數組的處理方法在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文檔

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

本文來自網絡,不代表程式碼花園立場,如有侵權,請聯系管理員。https://www.codegarden.cn/article/31329/
返回顶部