JavaScript數(shù)組常見使用方法有哪些

今天小編給大家分享一下JavaScript數(shù)組常見使用方法有哪些的相關(guān)知識(shí)點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識(shí)，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來(lái)了解一下吧。

1. push()

• 概括：數(shù)組末位增加

• 參數(shù)：需要增加的數(shù)據(jù)

• 返回值：數(shù)組更新后的長(zhǎng)度

 let arr = [1,2,3]
 arr.push(1) // 返回新增后的數(shù)組長(zhǎng)度 4
 arr.push() // 不傳參數(shù)默認(rèn)不新增 4
 arr.push(1,2,3) // 新增多條數(shù)據(jù)時(shí)，返回新增完成后的數(shù)組長(zhǎng)度 7

2. pop()

• 概括：數(shù)組末位刪除

• 參數(shù)：無(wú)

• 返回值：刪除的數(shù)據(jù)

 let arr = [3]
 arr.pop() // 返回已刪除的數(shù)據(jù) 3
 arr.pop() // 當(dāng)數(shù)組數(shù)據(jù)為空時(shí)，返回 undefined

3. unshift()

• 概括：數(shù)組首位新增

• 參數(shù)：需要新增的數(shù)據(jù)

• 返回值：數(shù)組的長(zhǎng)度

 let arr = [1,2,3]
 arr.unshift(1) // 返回新增后的數(shù)組長(zhǎng)度 4
 arr.unshift() // 不傳參數(shù)默認(rèn)不新增 4
 arr.unshift(1,2,4) // 新增多條數(shù)據(jù)時(shí)，返回新增完成后的數(shù)組長(zhǎng)度 7

4. shift()

• 概括：數(shù)組首位刪除

• 參數(shù)：無(wú)

• 返回值：數(shù)組的長(zhǎng)度

 let arr = [3]
 arr.shift() // 返回已刪除的數(shù)據(jù) 3
 arr.shift() // 當(dāng)數(shù)組數(shù)據(jù)為空時(shí)，返回 undefined

5. reverse()

• 概括：反轉(zhuǎn)數(shù)組

• 參數(shù)：無(wú)

• 返回值：會(huì)將原數(shù)組修改成反轉(zhuǎn)之后的數(shù)組

 let arr = [1,2,3]
 arr.reverse() // 返回反轉(zhuǎn)之后的數(shù)組 [3,2,1]
 
 let arr = []
 arr.reverse() // 當(dāng)數(shù)組數(shù)據(jù)為空時(shí)返回 []

6. sort()

• 概括：將數(shù)組進(jìn)行排序

• 參數(shù)：排序函數(shù)

 // 當(dāng)參數(shù)1 - 參數(shù)2時(shí)，為正序 
 function justSort(a,b) {
    return a-b
 }

 // 當(dāng) 參數(shù)2 - 參數(shù)1 時(shí)，為倒序
 function backSort(a,b) {
    return b-a
 }

• 返回值：排序后的數(shù)組

 let arr = [1,2,3]
 arr.sort() // 不傳參默認(rèn)通過(guò)Unicode（萬(wàn)國(guó)碼）進(jìn)行排序 [1,2,3]
 arr.sort(backSort) // 通過(guò)排序函數(shù)進(jìn)行排序 [3,2,1]

7. join()

• 概括：將數(shù)組轉(zhuǎn)化成字符串

• 參數(shù)：根據(jù)指定字符（可用空字符串）進(jìn)行轉(zhuǎn)化

• 返回值：返回轉(zhuǎn)化成字符串后的字符串

 let arr = [1,2,3]
 arr.join() // 不傳參默認(rèn)根據(jù)逗號(hào)進(jìn)行轉(zhuǎn)化 1,2,3
 arr.join('') // 根據(jù)空字符串進(jìn)行轉(zhuǎn)化 123
 arr.join(',') // 根據(jù)逗號(hào)進(jìn)行轉(zhuǎn)化 1,2,3

8. splice()

• 概括：刪除并替換指定單元的數(shù)據(jù)

• 參數(shù)：該方法默認(rèn)有幾種傳參情況

• 一個(gè)參數(shù)：數(shù)組中保留幾位，其余刪除

• 兩個(gè)參數(shù)：參數(shù)1（開始索引）、參數(shù)2（刪除個(gè)數(shù)）

• 三個(gè)參數(shù)：參數(shù)1（開始索引）、參數(shù)2（刪除個(gè)數(shù)）、參數(shù)3+（插入的數(shù)據(jù)，第三個(gè)參數(shù)以后可以傳多個(gè)參數(shù)）

• 返回值：已刪除的數(shù)組數(shù)據(jù)

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

9. slice()

• 概括：截取并拷貝出子數(shù)組

• 參數(shù)：兩個(gè)參數(shù)

• 參數(shù)1：起始位置，不傳參數(shù)2默認(rèn)截取起始位置之后的數(shù)據(jù)

• 參數(shù)2：結(jié)束位置前一位

• 返回值：截取的數(shù)組

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

10. concat()

• 概括：將數(shù)據(jù)合并到新數(shù)組中并返回

• 參數(shù)：參數(shù)1+（參數(shù)可以設(shè)置多個(gè)，每個(gè)參數(shù)都將合并到原數(shù)組中，如果入?yún)⑹且粋€(gè)數(shù)組會(huì)將入?yún)?shù)據(jù)合并到原數(shù)組中）

• 返回值：合并后的新數(shù)組

 let arr = [1,2,3,4]
 arr.concat(5) // 會(huì)將入?yún)?shù)據(jù)合并到原數(shù)組中 [1,2,3,4,5]
 arr.concat(5,6,7,8) // 可以入?yún)⒍鄺l數(shù)據(jù) [1,2,3,4,5,6,7,8]
 arr.concat([5,6,7,8]) // 可以入?yún)?shù)組進(jìn)行合并，合并至原數(shù)組 [1,2,3,4,5,6,7,8]

11. indexOf()

• 概括：返回指定單元的索引

• 參數(shù)：參數(shù)1（要查找的數(shù)組數(shù)據(jù)），參數(shù)2（查找的起始位置）

• 返回值：找到指定數(shù)據(jù)返回索引，未找到返回 -1

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

12. forEach()

• 概括：遍歷數(shù)組（需要配合函數(shù)使用）

• 參數(shù)（入?yún)⒑瘮?shù)參數(shù)）：

• 參數(shù)1：數(shù)組單元數(shù)據(jù)

• 參數(shù)2：每個(gè)單元索引

• 參數(shù)3：數(shù)組本身

• 返回值：undefined

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

13. map()

• 概括：遍歷數(shù)據(jù)（進(jìn)行映射）

• 參數(shù)（入?yún)⒑瘮?shù)參數(shù)）：

• 參數(shù)1：數(shù)組單元數(shù)據(jù)

• 參數(shù)2：每個(gè)單元索引

• 參數(shù)3：數(shù)組本身

• 返回值：返回映射后的新數(shù)組

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

14. filter()

• 概括：過(guò)濾數(shù)組（過(guò)濾出返回為true的數(shù)據(jù)）

• 參數(shù)（入?yún)⒑瘮?shù)參數(shù)）：

• 參數(shù)1：數(shù)組單元數(shù)據(jù)

• 參數(shù)2：每個(gè)單元索引

• 參數(shù)3：數(shù)組本身

• 返回值：返回過(guò)濾后的新數(shù)組

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

15. some()

• 概括：檢測(cè)數(shù)組（只要有一個(gè)數(shù)據(jù)符合條件時(shí),返回true）

• 參數(shù)（入?yún)⒑瘮?shù)參數(shù)）：

• 參數(shù)1：數(shù)組單元數(shù)據(jù)

• 參數(shù)2：每個(gè)單元索引

• 參數(shù)3：數(shù)組本身

• 返回值：返回檢測(cè)后的新數(shù)組

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

16. eveny()

• 概括：檢測(cè)數(shù)組（只有數(shù)組中所有數(shù)據(jù)符合條件時(shí),才返回true,否則反回false）

• 參數(shù)（入?yún)⒑瘮?shù)參數(shù)）：

• 參數(shù)1：數(shù)組單元數(shù)據(jù)

• 參數(shù)2：每個(gè)單元索引

• 參數(shù)3：數(shù)組本身

• 返回值：返回檢測(cè)后的新數(shù)組

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

17. reduce()

• 概括：迭代數(shù)組所有項(xiàng)(累加器)

• 參數(shù)：兩個(gè)參數(shù)

• 回調(diào)參數(shù)1：上一次回調(diào)返回值，或者初始值（必選）

• 回調(diào)參數(shù)2：數(shù)組中被處理的數(shù)據(jù)項(xiàng)（必選）

• 回調(diào)參數(shù)3：數(shù)據(jù)項(xiàng)在數(shù)組中的索引（可選）

• 回調(diào)參數(shù)4：原數(shù)組（可選）

• 參數(shù)1（入?yún)⒑瘮?shù)參數(shù)）：回調(diào)函數(shù)（必選）

• 參數(shù)2：初始值（可選）

• 返回值：返回?cái)?shù)組計(jì)算后的結(jié)果

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

• 擴(kuò)展用法：

• 計(jì)算數(shù)組中每個(gè)元素出現(xiàn)的次數(shù)

 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}

• 數(shù)組去重

 // 單數(shù)組去重
 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]

 // 數(shù)組對(duì)象去重
 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;
 },[])

• 將二維數(shù)組轉(zhuǎn)化為一維數(shù)組

 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]

• 將多維數(shù)組轉(zhuǎn)化為一維數(shù)組

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]

• 對(duì)象里面屬性求和

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

• 概括：迭代數(shù)組所有項(xiàng)（從右至左進(jìn)行計(jì)算，同數(shù)組reduce方法）

• 參數(shù)：同數(shù)組的reduce方法參數(shù)

• 返回值：數(shù)組計(jì)算結(jié)果

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

19. Array.from()

• 概括：將偽數(shù)組轉(zhuǎn)化成數(shù)組，只要含length屬性的都可轉(zhuǎn)化成數(shù)組（ES6）

• 參數(shù)：需要轉(zhuǎn)化的偽數(shù)組

• 返回值：轉(zhuǎn)化后的數(shù)組

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

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

20. Array.of()

• 概括：將一組值轉(zhuǎn)化成數(shù)組，類似于生明數(shù)組（ES6）

• 參數(shù)：需要轉(zhuǎn)化的值

• 返回值：轉(zhuǎn)化后的數(shù)組

 console.log(Array.of('11')) // 將字符串轉(zhuǎn)化成數(shù)組 ['11']
 console.log(Array.of({a:1,b:2})) // 將對(duì)象轉(zhuǎn)化成數(shù)組 [{a:1,b:2}]
 console.log(new Array('11')) // 類似于構(gòu)造函數(shù)聲明數(shù)組
 console.log(new Array(2)) // 構(gòu)造函數(shù)生明因?yàn)槿雲(yún)?wèn)題容易容易引起重載  [empty × 2] 空數(shù)組

21. copyWithin()

• 概括：在數(shù)組內(nèi)部將指定位置的數(shù)組賦值到其他位置，會(huì)覆蓋原數(shù)組項(xiàng)，返回當(dāng)前數(shù)組

• 參數(shù)：三個(gè)參數(shù)

• 參數(shù)1：開始位置，從該位置開始替換數(shù)組項(xiàng)（必傳）

• 參數(shù)2：從指定索引開始讀取數(shù)組項(xiàng)，默認(rèn)為0，如果為負(fù)值，則從右往左讀（可選）

• 參數(shù)3：從指定索引結(jié)束讀取數(shù)組項(xiàng)，默認(rèn)為數(shù)組長(zhǎng)度，如果是負(fù)值表示倒數(shù)（可選）

• 返回值：處理好的數(shù)組

 let arr = [1,2,3,4,5]
 arr.copyWithin(3) // 從下標(biāo)3的位置上開始，默認(rèn)將整個(gè)數(shù)組作為數(shù)據(jù)項(xiàng)進(jìn)行替換，長(zhǎng)度不夠默認(rèn)截取 [1, 2, 3, 1, 2]
 arr.copyWithin(0, 2) // 從下標(biāo)為0位置開始，默認(rèn)將從下標(biāo)2位置截取到末尾作為數(shù)據(jù)項(xiàng)進(jìn)行替換，長(zhǎng)度不夠默認(rèn)截取  [3, 4, 5, 4, 5]
 arr.copyWithin(0, 2, 3) // 從下標(biāo)0位置開始，默認(rèn)將從下標(biāo)2位置截取到下標(biāo)3位置之前作為數(shù)據(jù)項(xiàng)進(jìn)行替換，長(zhǎng)度不夠默認(rèn)截取 [3, 2, 3, 4, 5]

 arr.copyWithin(-1) // 從倒數(shù)倒數(shù)第一位開始，默認(rèn)將整個(gè)數(shù)組作為數(shù)據(jù)項(xiàng)進(jìn)行替換，長(zhǎng)度不夠默認(rèn)截取 [1, 2, 3, 4, 1]
 arr.copyWithin(-1, -2) // 從倒數(shù)第一位置開始，默認(rèn)將從倒數(shù)第二位置默認(rèn)截取到末尾作為數(shù)據(jù)項(xiàng)進(jìn)項(xiàng)替換，長(zhǎng)度不夠默認(rèn)截取 [1, 2, 3, 4, 4]
 arr.copyWithin(-1, -4, -2) // 從倒數(shù)第一位置開始，默認(rèn)將從倒數(shù)第四的位置開始截取到倒數(shù)第二的位置作為數(shù)據(jù)項(xiàng)項(xiàng)進(jìn)項(xiàng)替換，長(zhǎng)度不夠默認(rèn)截取 [1, 2, 3, 4, 2]

22. find()

• 概括：找到第一個(gè)符合條件的數(shù)組數(shù)據(jù)項(xiàng)

• 參數(shù)（入?yún)⒑瘮?shù)參數(shù)）：

• 參數(shù)1：數(shù)組數(shù)據(jù)項(xiàng)

• 參數(shù)2：數(shù)據(jù)項(xiàng)下標(biāo)

• 參數(shù)3：原數(shù)組

• 返回值：符合條件的數(shù)組數(shù)據(jù)項(xiàng)

 let arr = [1,2,3,4,5]
 arr.find((item, index, array) => {
     console.log(item) // 數(shù)組數(shù)據(jù)項(xiàng)
     console.log(index) // 數(shù)據(jù)項(xiàng)下標(biāo)
     console.log(array) // 原數(shù)組
     return item > 1 // 此條件不會(huì)校驗(yàn)數(shù)組所有數(shù)據(jù)項(xiàng)，只會(huì)校驗(yàn)第一條符合條件的數(shù)據(jù)
 })

23. findIndex()

• 概括：找到第一個(gè)符合條件的數(shù)組數(shù)據(jù)項(xiàng)下標(biāo)

• 參數(shù)（入?yún)⒑瘮?shù)參數(shù)）：同數(shù)組find方法

• 返回值：符合條件數(shù)據(jù)項(xiàng)下標(biāo)

 let arr = [1,2,3,4,5]
 arr.findIndex((item, index, array) => {
     console.log(item) // 數(shù)組數(shù)據(jù)項(xiàng)
     console.log(index) // 數(shù)據(jù)項(xiàng)下標(biāo)
     console.log(array) // 原數(shù)組
     return item > 1 // 此條件不會(huì)校驗(yàn)數(shù)組所有數(shù)據(jù)項(xiàng)，只會(huì)校驗(yàn)第一條符合條件的數(shù)據(jù)
 })

24. fill()

• 概括：使用指定值填充整個(gè)數(shù)組

• 參數(shù)：

• 參數(shù)1：待填充的數(shù)據(jù)

• 參數(shù)2：開始填充的位置

• 參數(shù)3：結(jié)束填充的位置（該位置前一位）

• 返回值：填充后的數(shù)組

 let arr = [1,2,3,4]
 arr.fill(1) // 默認(rèn)將數(shù)組所有項(xiàng)填充成該數(shù)據(jù) [1,1,1,1]
 arr.fill(1,2) // 以參數(shù)1為填充項(xiàng)，將數(shù)據(jù)從坐標(biāo)為2位置開始填充至數(shù)組末尾 [1,2,1,1]
 arr.fill(1,2,4) // 以參數(shù)1為填充項(xiàng)，將是數(shù)據(jù)從坐標(biāo)2位置開始填充至下標(biāo)為4位置 [1,2,1,4]

25. keys()

• 概括：遍歷數(shù)組的鍵名（一般針對(duì)于Set、Map數(shù)據(jù)集合使用）

• 參數(shù)：無(wú)

• 返回值：在日志層面顯示Array Iterator {}（數(shù)組迭代器），在數(shù)據(jù)層面顯示數(shù)組下標(biāo)

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

• 概括：遍歷數(shù)組鍵名（一般針對(duì)于Set、Map數(shù)據(jù)集合使用）

• 參數(shù)：無(wú)

• 返回值：在日志層面顯示Array Iterator {}（數(shù)組迭代器），在數(shù)據(jù)層面顯示數(shù)組每個(gè)數(shù)據(jù)項(xiàng)

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

• 概括：遍歷數(shù)組的鍵值和鍵名（迭代數(shù)組，一般針對(duì)于Set、Map數(shù)據(jù)集合使用）

• 參數(shù)：無(wú)

• 返回值：在日志層面顯示Array Iterator {}（數(shù)組迭代器），在數(shù)據(jù)層面顯示數(shù)組每個(gè)單元的數(shù)據(jù)項(xiàng)和下標(biāo)作為一個(gè)數(shù)組

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

以上就是“JavaScript數(shù)組常見使用方法有哪些”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。