27個JavaScript數組常見方法匯總與實例說明

Posted on 2022-12-11 by WalkonNet

1. push()

概括：數組末位增加
參數：需要增加的數據
返回值：數組更新後的長度

 let arr = [1,2,3]
 arr.push(1) // 返回新增後的數組長度 4
 arr.push() // 不傳參數默認不新增 4
 arr.push(1,2,3) // 新增多條數據時，返回新增完成後的數組長度 7

2. pop()

概括：數組末位刪除
參數：無
返回值：刪除的數據

 let arr = [3]
 arr.pop() // 返回已刪除的數據 3
 arr.pop() // 當數組數據為空時，返回 undefined

3. unshift()

概括：數組首位新增
參數：需要新增的數據
返回值：數組的長度

 let arr = [1,2,3]
 arr.unshift(1) // 返回新增後的數組長度 4
 arr.unshift() // 不傳參數默認不新增 4
 arr.unshift(1,2,4) // 新增多條數據時，返回新增完成後的數組長度 7

4. shift()

概括：數組首位刪除
參數：無
返回值：數組的長度

 let arr = [3]
 arr.shift() // 返回已刪除的數據 3
 arr.shift() // 當數組數據為空時，返回 undefined

5. reverse()

概括：反轉數組
參數：無
返回值：會將原數組修改成反轉之後的數組

 let arr = [1,2,3]
 arr.reverse() // 返回反轉之後的數組 [3,2,1]
 
 let arr = []
 arr.reverse() // 當數組數據為空時返回 []

6. sort()

概括：將數組進行排序
參數：排序函數

 // 當參數1 - 參數2時，為正序 
 function justSort(a,b) {
    return a-b
 }

 // 當 參數2 - 參數1 時，為倒序
 function backSort(a,b) {
    return b-a
 }

返回值：排序後的數組

 let arr = [1,2,3]
 arr.sort() // 不傳參默認通過Unicode（萬國碼）進行排序 [1,2,3]
 arr.sort(backSort) // 通過排序函數進行排序 [3,2,1]

7. join()

概括：將數組轉化成字符串
參數：根據指定字符（可用空字符串）進行轉化
返回值：返回轉化成字符串後的字符串

 let arr = [1,2,3]
 arr.join() // 不傳參默認根據逗號進行轉化 1,2,3
 arr.join('') // 根據空字符串進行轉化 123
 arr.join(',') // 根據逗號進行轉化 1,2,3

8. splice()

概括：刪除並替換指定單元的數據
參數：該方法默認有幾種傳參情況
- 一個參數：數組中保留幾位，其餘刪除
- 兩個參數：參數1（開始索引）、參數2（刪除個數）
- 三個參數：參數1（開始索引）、參數2（刪除個數）、參數3+（插入的數據，第三個參數以後可以傳多個參數）
返回值：已刪除的數組數據

 let arr = [1,2,3,4]
 arr.splice() // 不傳參默認不刪除不插入，返回空數組 []
 arr.splice(3) // 數組中默認保留3位數據, 返回刪除後的數據 [4]
 arr.splice(0,1) // 從數組首位刪除一條數據 [1]
 arr.splice(0,1,9) // 從首位刪除一條數據，並插入一條數據 [2]
 arr.splice(0,1,9,8,7,6,5,4,3,2,1) // 從首位刪除一條數據並插入多條數據（參數3之後的為插入 [9]

9. slice()

概括：截取並拷貝出子數組
參數：兩個參數
- 參數1：起始位置，不傳參數2默認截取起始位置之後的數據
- 參數2：結束位置前一位
返回值：截取的數組

 let arr = [1,2,3,4]
 arr.slice() // 不傳參默認截取全部 [1,2,3,4]
 arr.slice(1) // 從索引為1的位置默認截取到末尾 [2,3,4]
 arr.slice(1,3) // 從索引為1的位置截取到索引為3的位置前一位 [2,3]

10. concat()

概括：將數據合並到新數組中並返回
參數：參數1+（參數可以設置多個，每個參數都將合並到原數組中，如果入參是一個數組會將入參數據合並到原數組中）
返回值：合並後的新數組

 let arr = [1,2,3,4]
 arr.concat(5) // 會將入參數據合並到原數組中 [1,2,3,4,5]
 arr.concat(5,6,7,8) // 可以入參多條數據 [1,2,3,4,5,6,7,8]
 arr.concat([5,6,7,8]) // 可以入參數組進行合並，合並至原數組 [1,2,3,4,5,6,7,8]

11. indexOf()

概括：返回指定單元的索引
參數：參數1（要查找的數組數據），參數2（查找的起始位置）
返回值：找到指定數據返回索引，未找到返回 -1

 let arr = [1,2,3,4]
 arr.indexOf(3) // 查找數組中指定數據的下標 2
 arr.indexOf(5) // 未找到數組中指定數據 -1

12. forEach()

概括：遍歷數組（需要配合函數使用）
參數（入參函數參數）：
- 參數1：數組單元數據
- 參數2：每個單元索引
- 參數3：數組本身
返回值：undefined

 let arr = [1,2,3,4]
 arr.forEach((data,index,array) => {
     console.log(data) // 數組每個單元數據
     console.log(index) // 數組下標
     console.log(array) // 原數組本身
 })

13. map()

概括：遍歷數據（進行映射）
參數（入參函數參數）：
- 參數1：數組單元數據
- 參數2：每個單元索引
- 參數3：數組本身
返回值：返回映射後的新數組

  let arr = [1,2,3,4]
  arr.map((data,index,array) => {
      console.log(data) // 數組每個單元數據
      console.log(index) // 數組下標
      console.log(array) // 原數組本身
  })

14. filter()

概括：過濾數組（過濾出返回為true的數據）
參數（入參函數參數）：
- 參數1：數組單元數據
- 參數2：每個單元索引
- 參數3：數組本身
返回值：返回過濾後的新數組

  let arr = [1,2,3,4]
  arr.filter((data,index,array) => {
      console.log(data) // 數組每個單元數據
      console.log(index) // 數組下標
      console.log(array) // 原數組本身
      return data == 1 // 過濾返回為true的數據
  })

15. some()

概括：檢測數組（隻要有一個數據符合條件時,返回true）
參數（入參函數參數）：
- 參數1：數組單元數據
- 參數2：每個單元索引
- 參數3：數組本身
返回值：返回檢測後的新數組

  let arr = [1,2,3,4]
  arr.some((data,index,array) => {
      console.log(data) // 數組每個單元數據
      console.log(index) // 數組下標
      console.log(array) // 原數組本身
      return data == 1 // 檢測指定數據是否符合條件
  })

16. eveny()

概括：檢測數組（隻有數組中所有數據符合條件時,才返回true,否則反回false）
參數（入參函數參數）：
- 參數1：數組單元數據
- 參數2：每個單元索引
- 參數3：數組本身
返回值：返回檢測後的新數組

  let arr = [1,2,3,4]
  arr.eveny((data,index,array) => {
      console.log(data) // 數組每個單元數據
      console.log(index) // 數組下標
      console.log(array) // 原數組本身
      return data == 1 // 檢測所有條件是否符合條件
  })

17. reduce()

概括：迭代數組所有項(累加器)
參數：兩個參數
- 參數1（入參函數參數）：回調函數（必選）
  - 回調參數1：上一次回調返回值，或者初始值（必選）
  - 回調參數2：數組中被處理的數據項（必選）
  - 回調參數3：數據項在數組中的索引（可選）
  - 回調參數4：原數組（可選）
- 參數2：初始值（可選）
返回值：返回數組計算後的結果

 let arr = [1,2,3,4]
 arr.reduce((pre,data,index,array) => {
     console.log(pre) // 數組上一次計算結果，如果未計算則是初始值
     console.log(data) // 數組中被處理的數據項
     console.log(index) // 數據項在數組中的索引
     console.log(array) // 原數組
     return pre + data // 將每次累加結果進行累加下一項
 }, 0) // 設置遍歷初始值

擴展用法：

計算數組中每個元素出現的次數

 let names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];
 let nameNum = names.reduce((pre,cur)=>{
    if(cur in pre){
       pre[cur]++
    }else{
       pre[cur] = 1 
    }
    return pre
 },{})
 console.log(nameNum); //{Alice: 2, Bob: 1, Tiff: 1, Bruce: 1}

數組去重

 // 單數組去重
 let arr = [1,2,3,4,4,1]
 let newArr = arr.reduce((pre,cur)=>{
     if(!pre.includes(cur)){
       return pre.concat(cur)
     }else{
       return pre
     }
 },[])
 console.log(newArr);// [1, 2, 3, 4]

 // 數組對象去重
 let arr = [{a: 0, name: 'zhangsan'}, {b: 0, name: 'lisi'}]
 let Obj = {}
 person = person.reduce((cur,next) => {
    obj[next.id] ? "" : obj[next.id] = true && cur.push(next);
    return cur;
 },[])

將二維數組轉化為一維數組

 let arr = [[0, 1], [2, 3], [4, 5]]
 let newArr = arr.reduce((pre,cur)=>{
     return pre.concat(cur)
 },[])
 console.log(newArr); // [0, 1, 2, 3, 4, 5]

將多維數組轉化為一維數組

let arr = [[0, 1], [2, 3], [4,[5,6,7]]]
 const newArr = function(arr){
    return arr.reduce((pre,cur)=>{
        pre.concat(Array.isArray(cur) ? newArr(cur) : cur   
    }),[])
 }
 console.log(newArr(arr)); // [0, 1, 2, 3, 4, 5, 6, 7]

對象裡面屬性求和

 var result = [
    {
        subject: 'math',
        score: 10
    },
    {
        subject: 'chinese',
        score: 20
    },
    {
        subject: 'english',
        score: 30
    }
 ];

 var sum = result.reduce(function(prev, cur) {
     return cur.score + prev;
 }, 0);
 console.log(sum) //60

18. reduceRight()

概括：迭代數組所有項（從右至左進行計算，同數組reduce方法）
參數：同數組的reduce方法參數
返回值：數組計算結果

 let arr = [1,2,3,4]
 arr.reduceRight((pre,data,index,array) => {
     console.log(pre) // 數組上一次計算結果，如果未計算則是初始值
     console.log(data) // 數組中被處理的數據項
     console.log(index) // 數據項在數組中的索引
     console.log(array) // 原數組
     return pre + data // 將每次累加結果進行累加下一項
 }, 0) // 設置遍歷初始值

19. Array.from()

概括：將偽數組轉化成數組，隻要含length屬性的都可轉化成數組（ES6）
參數：需要轉化的偽數組
返回值：轉化後的數組

 let str = 'asdf'
 console.log(Array.from(str)) // 將字符串轉化成數組 [a,s,d,f]

 let obj = {0:'a',1:'b',length:2}
 console.log(Array.from(obj))   // 含索引並length屬性的對象也可以轉化成數組 ['a', 'b']

20. Array.of()

概括：將一組值轉化成數組，類似於生明數組（ES6）
參數：需要轉化的值
返回值：轉化後的數組

 console.log(Array.of('11')) // 將字符串轉化成數組 ['11']
 console.log(Array.of({a:1,b:2})) // 將對象轉化成數組 [{a:1,b:2}]
 console.log(new Array('11')) // 類似於構造函數聲明數組
 console.log(new Array(2)) // 構造函數生明因為入參問題容易容易引起重載  [empty × 2] 空數組

21. copyWithin()

概括：在數組內部將指定位置的數組賦值到其他位置，會覆蓋原數組項，返回當前數組
參數：三個參數
- 參數1：開始位置，從該位置開始替換數組項（必傳）
- 參數2：從指定索引開始讀取數組項，默認為0，如果為負值，則從右往左讀（可選）
- 參數3：從指定索引結束讀取數組項，默認為數組長度，如果是負值表示倒數（可選）
返回值：處理好的數組

 let arr = [1,2,3,4,5]
 arr.copyWithin(3) // 從下標3的位置上開始，默認將整個數組作為數據項進行替換，長度不夠默認截取 [1, 2, 3, 1, 2]
 arr.copyWithin(0, 2) // 從下標為0位置開始，默認將從下標2位置截取到末尾作為數據項進行替換，長度不夠默認截取  [3, 4, 5, 4, 5]
 arr.copyWithin(0, 2, 3) // 從下標0位置開始，默認將從下標2位置截取到下標3位置之前作為數據項進行替換，長度不夠默認截取 [3, 2, 3, 4, 5]

 arr.copyWithin(-1) // 從倒數倒數第一位開始，默認將整個數組作為數據項進行替換，長度不夠默認截取 [1, 2, 3, 4, 1]
 arr.copyWithin(-1, -2) // 從倒數第一位置開始，默認將從倒數第二位置默認截取到末尾作為數據項進項替換，長度不夠默認截取 [1, 2, 3, 4, 4]
 arr.copyWithin(-1, -4, -2) // 從倒數第一位置開始，默認將從倒數第四的位置開始截取到倒數第二的位置作為數據項項進項替換，長度不夠默認截取 [1, 2, 3, 4, 2]

22. find()

概括：找到第一個符合條件的數組數據項
參數（入參函數參數）：
- 參數1：數組數據項
- 參數2：數據項下標
- 參數3：原數組
返回值：符合條件的數組數據項

 let arr = [1,2,3,4,5]
 arr.find((item, index, array) => {
     console.log(item) // 數組數據項
     console.log(index) // 數據項下標
     console.log(array) // 原數組
     return item > 1 // 此條件不會校驗數組所有數據項，隻會校驗第一條符合條件的數據
 })

23. findIndex()

概括：找到第一個符合條件的數組數據項下標
參數（入參函數參數）：同數組find方法
返回值：符合條件數據項下標

 let arr = [1,2,3,4,5]
 arr.findIndex((item, index, array) => {
     console.log(item) // 數組數據項
     console.log(index) // 數據項下標
     console.log(array) // 原數組
     return item > 1 // 此條件不會校驗數組所有數據項，隻會校驗第一條符合條件的數據
 })

24. fill()

概括：使用指定值填充整個數組
參數：
- 參數1：待填充的數據
- 參數2：開始填充的位置
- 參數3：結束填充的位置（該位置前一位）
返回值：填充後的數組

 let arr = [1,2,3,4]
 arr.fill(1) // 默認將數組所有項填充成該數據 [1,1,1,1]
 arr.fill(1,2) // 以參數1為填充項，將數據從坐標為2位置開始填充至數組末尾 [1,2,1,1]
 arr.fill(1,2,4) // 以參數1為填充項，將是數據從坐標2位置開始填充至下標為4位置 [1,2,1,4]

25. keys()

概括：遍歷數組的鍵名（一般針對於Set、Map數據集合使用）
參數：無
返回值：在日志層面顯示Array Iterator {}（數組迭代器），在數據層面顯示數組下標

 let arr = [1,2,3,4]
 let arr2 = arr.keys()
 console.log(arr2) // Array Iterator {}

 for (let key of arr2) {
    console.log(key);   // 0,1,2,3
 }

26. value()

概括：遍歷數組鍵名（一般針對於Set、Map數據集合使用）
參數：無
返回值：在日志層面顯示Array Iterator {}（數組迭代器），在數據層面顯示數組每個數據項

 let arr = [1,2,3,4]
 let arr2 = arr.value()
 console.log(arr2) // Array Iterator {}

 for (let val of arr2) {
    console.log(val);   // 1,2,3,4
 }

27. entries()

概括：遍歷數組的鍵值和鍵名（迭代數組，一般針對於Set、Map數據集合使用）
參數：無
返回值：在日志層面顯示Array Iterator {}（數組迭代器），在數據層面顯示數組每個單元的數據項和下標作為一個數組

 let arr = [1,2,3,4]
 let arr1 = arr.entries()
 console.log(arr1) // Array Iterator {}

 for (let e of arr1) {
     console.log(e);   // [0,1] [1,2] [2,3] [3,4]
 }

總結

變異方法（改變原數組方法）：
push()、pop()、unshift()、shift()、reverse()、sort() 、copyWithin()、fill()
非變異方法（不改變原數組方法）：
join()、splice()、slice()、concat()、indexOf()、forEach()、map()、filter()、some()、eveny()、reduce()、reduceRight()、find()、findIndex()、keys()、value()、entries()
ES6新增方法：
find()、findIndex()、includes()、keys()、values()、entries()、fill()、Array.of()、copyWithin()、Array.from()、reduce()、reduceRight()、filter()、map()

本文件為大傢講瞭27個JavaScript數組常見方法匯總並配上瞭源碼實例，更多關於JS數組操作請查看下面的相關鏈接

27個JavaScript數組常見方法匯總與實例說明

1. push()

2. pop()

3. unshift()

4. shift()

5. reverse()

6. sort()

7. join()

8. splice()

9. slice()

10. concat()

11. indexOf()

12. forEach()

13. map()

14. filter()

15. some()

16. eveny()

17. reduce()

18. reduceRight()

19. Array.from()

20. Array.of()

21. copyWithin()

22. find()

23. findIndex()

24. fill()

25. keys()

26. value()

27. entries()

總結

推薦閱讀：

發佈留言取消回覆

近期文章

1. push()

2. pop()

3. unshift()

4. shift()

5. reverse()

6. sort()

7. join()

8. splice()

9. slice()

10. concat()

11. indexOf()

12. forEach()

13. map()

14. filter()

15. some()

16. eveny()

17. reduce()

18. reduceRight()

19. Array.from()

20. Array.of()

21. copyWithin()

22. find()

23. findIndex()

24. fill()

25. keys()

26. value()

27. entries()

總結

推薦閱讀：

發佈留言 取消回覆

近期文章

標籤

發佈留言取消回覆