技術標籤：前端-html前端es6htmlhtml5es6

前言:
陣列是我們學習js中常用的一種引用資料型別,在js中顯得尤為重要,認識一些常用的陣列方法有利於我們更快的運算元組.不用只會用for for for…

開始吧

1.pop()
該方法是用來刪除陣列中的最後一個元素,返回值是這個被刪除的元素.會改變原陣列,且看操作.[從陣列中刪除的元素(當陣列為空時返回undefined)]

  var arr = [2,3,4,5,6,'安安','婷婷']
  var a = arr.pop()
  console.log(a);//婷婷
  console.log(arr);//[2, 3, 4, 5, 6, "安安"]
 

2.push()
這個方法用來在陣列末尾新增一個或者多個元素,返回值是新陣列的長度,修改原有陣列

  var arr = [2,3,4,5,6,'安安','婷婷']
  var a = arr.push(2,'你好')
  console.log(a);// 9
  console.log(arr);// [2, 3, 4, 5, 6, "安安", "婷婷", 2, "你好"]

3.shift()
和pop()方法類似,不同的是這個操作是刪除陣列最前面一個元素,返回值是被刪除的陣列元素從陣列中刪除的元素; 如果陣列為空則返回undefined 。

  var arr = [2,3,4,5,6,'安安','婷婷']
  var a = arr.shift()
  console.log(a);// 2
  console.log(arr);// [ 3, 4, 5, 6, "安安", "婷婷"]

4.unshift()
unshift() 方法將一個或多個元素新增到陣列的開頭，並返回該陣列的新長度(該方法修改原有陣列)。

  var arr = [2,3,4,5,6,'安安','婷婷']
  var a = arr.unshift('老色p','你好')
  console.log(a);// 9
  console.
 
log(arr);// ["老色p", "你好", 2, 3, 4, 5, 6, "安安", "婷婷"]

5.contact()
concat() 方法用於合併兩個或多個陣列。此方法不會更改現有陣列，而是返回一個新陣列。

  var arr = [2,3,4,5,6,'安安','婷婷']
  var arr1 = ['老色p','你好']
  var arr2 = [11,22]
  var a = arr.concat(arr1,arr2)
  console.log(a);// [2, 3, 4, 5, 6, "安安", "婷婷", "老色p", "你好", 11, 22]
  console.log(arr);// [2, 3, 4, 5, 6, "安安", "婷婷"]

如果省略了所有引數，則 concat 會返回呼叫此方法的現存陣列的一個淺拷貝,就是返回的只是陣列的一個引用

  var arr = [2,3,4,5,6,'安安','婷婷']
  var a = arr.concat()
  a.pop()
  console.log(a);// [2, 3, 4, 5, 6, "安安"]
  console.log(arr);// [2, 3, 4, 5, 6, "安安", "婷婷"]

6.some()
some() 方法測試陣列中是不是至少有1個元素通過了被提供的函式測試(也就是滿足條件)。它*返回的是一個Boolean型別的值。接收的引數是一個回撥函式

  var arr = [2,3,4,5,6,'安安','婷婷']
  var a = arr.some((item)=>{
    return item>100
  })
  console.log(a); //false 
  // (因為整個陣列都沒有大於100的數值
  // 所以就返回false,但凡有一個都是返回true)

7.every
這個方法和some()有些像,但是,every() 方法測試陣列中是不是全部元素通過了被提供的函式測試(也就是滿足條件)。它返回的是一個Boolean型別的值。接收的引數是一個回撥函式.

  var arr = [2,3,4,5,6]
  var a = arr.every(function(item,index,arr) {
    console.log(item,index,arr);
    return item < 10
    
  })
  console.log(a); //true
  // 引數是一個回撥函式,item代表陣列元素,index是陣列的下標,arr是陣列本身

下面是列印結果

8.reverse()
reverse() 方法將陣列中元素的位置顛倒，並返回該陣列。陣列的第一個元素會變成最後一個，陣列的最後一個元素變成第一個。該方法會改變原陣列

  var arr = [2,3,4,5,6]
  var newArr = arr.reverse()
  console.log(arr);//[6, 5, 4, 3, 2] 會改變原陣列
  console.log(newArr);//[6, 5, 4, 3, 2]

當然翻轉陣列你也可以用原生一點的方法,例如:

  var arr = [2,3,4,5,6]
  var newArr = []
  for (let i = arr.length-1; i >= 0; i--) {
    newArr[newArr.length] = arr[i]
  }
  console.log(newArr);//[6, 5, 4, 3, 2]

9.indexOf(ele,[fromIndex])
indexOf()方法返回在陣列中可以找到一個給定元素的第一個索引，如果不存在，則返回-1。**[fromIndex]**開始查詢的位置。如果該索引值大於或等於陣列長度，意味著不會在數組裡查詢，返回-1。如果引數中提供的索引值是一個負值，則將其作為陣列末尾的一個抵消，即-1表示從最後一個元素開始查詢，-2表示從倒數第二個元素開始查詢 注意：如果引數中提供的索引值是一個負值，並不改變其查詢順序，查詢順序仍然是從前向後查詢陣列。如果抵消後的索引值仍小於0，則整個陣列都將會被查詢。其預設值為0.

  var arr = [2,3,4,5,3,6,7,8,9]
  console.log(arr.indexOf(3));//1
  console.log(arr.indexOf(3,2));//4
  console.log(arr.indexOf(3,-2));//
  console.log(arr.indexOf(99));//-1
  console.log(arr.indexOf(4,10));//-1
  console.log(arr.indexOf(4,-20));//2

10.join()
join() 方法將一個數組（或一個類陣列物件）的所有元素連線成一個字串並返回這個字串。如果陣列只有一個專案，那麼將返回該專案而不使用分隔符

var arr = [2,3,4,5,3,6,7,8,9]
  var arr1 = [1]
  // 如果預設該值，陣列元素用逗號（,）分隔。
  // 如果separator是空字串("")，則所有元素之間都沒有任何字元。
  console.log(arr.join());// 2,3,4,5,3,6,7,8,9
  console.log(arr.join(''));// 234536789
   console.log(arr1.join());// 1
  console.log(arr1.join(''));// 1
  console.log(arr.join('-'));// 2-3-4-5-3-6-7-8-9

11.forEach()
forEach() 方法對陣列的每個元素執行一次給定的函式,主要用來遍歷陣列

 var arr = [2,3,4,5,3,6,7,8,9]
  arr.forEach(element => {
    console.log(element);
  });

依次列印:
2
3
4

12.map()方法
map() 方法建立一個新陣列，其結果是該陣列中的每個元素是呼叫一次提供的函式後的返回值。傳入的是一個回撥函式,有4個可選引數,item(當前遍歷到的 元素),index(當前遍歷到的元素的索引),arr,陣列本身,thisArg(this的指向),一般只用前三個

  var arr = [2,3,4]
  var newArr = arr.map(element => {
    return element + 1
  });
  console.log(newArr);//[3,4,5]

13.splice()
splice() 方法通過刪除或替換現有元素或者原地新增新的元素來修改陣列,並以陣列形式返回被修改的內容。此方法會改變原陣列。

 var arr = [2,3,4,5,6,7]  //假設後面用到的陣列都是原陣列arr,splice不改變原陣列
  // console.log(arr.splice(1,3) ); //[3,4,5]
  // console.log(arr.splice(0));//[2,3,4,5,6,7]  全部擷取
  // console.log(arr.splice(2,10));//[4,5,6,7] 10大於後面剩餘的陣列長度,全部擷取
  // console.log(arr.splice(-2,2));//從後面第二個起,擷取2個  

  // arr.splice(2,0,'安安')
  // console.log(arr);// [2, 3, "安安", 4, 5, 6, 7] 
  // 從2的位置刪除0個,就是從2的位置插入一個,也可以插入多個

記住,這個方法會修改原陣列

14.includes()
用來判斷一個數組是否包含一個指定的值，根據情況，如果包含則返回 true，否則返回false。

 var arr = [2,3,4,5,6,7]  
  console.log(arr.includes(2));
  console.log(arr.includes(9));

這個方法比較簡單,也容易記.
陣列還有很多其他的方法可以自行查閱相關文件MDN官方文件

下面補充一下陣列去重的幾種方法

方法一:遍歷陣列法:
宣告一個新陣列,迴圈遍歷push進新數組裡面,新陣列如果能找到,返回下標值,找不到返回-1,利用這個特點進行判斷.

  var arr = [2,2,5,7,3,4,5,6,7]
  var newArr = []
  for (let i = 0; i < arr.length; i++) {
    if (newArr.indexOf(arr[i])  == -1) {
      newArr.push(arr[i])
    }
  }  
  console.log(newArr);//[2, 5, 7, 3, 4, 6]

方法二:陣列元素下標法
陣列的indexOf()方法總會返回找到陣列滿足條件的第一個元素的下標.

  var arr = [2,2,5,7,3,4,5,6,7]
  var newArr = []
  for (let i = 0; i < arr.length; i++) {
    if (arr.indexOf(arr[i]) == i) {
      newArr.push(arr[i])
    }
  }  
  console.log(newArr);//[2, 5, 7, 3, 4, 6]

方法三,使用物件
利用物件去重,返回物件,對整個物件遍歷取值

Array.prototype.Mydistinct = function() {
  var obj = {}
  var newArr = []
  for (let i = 0; i < this.length; i++) {
    var cur = this[i]
    if (obj[cur]) {
      obj[cur]++
    }else{
      obj[cur] = 1
    }
  }
  for (const key in obj) {
    if (Number(key).toString() === 'NaN') {
      newArr.push(key)
    } else {
      newArr.push(Number(key))
    }
    }
    return newArr
  }
 console.log(arr.Mydistinct());//[2, 5, 7, 3, 4, 6]

方法四:排序後相鄰去除法
這種方法的思路是：先用sort()方法把arr排序，那麼排完序後，相同的一定是挨在一起的，把它去掉就好了，首先給新陣列初始化一個arr[0]，因為我們要用它和arr陣列進行比較，所以，for迴圈裡面i也是從1開始了，我們讓遍歷到的arr中的值和新陣列最後一位進行比較，如果相等，則pass掉，不相等的，push進來，因為陣列重新排序了，重複的都挨在一起，那麼這就保證了重複的這幾個值只有第一個會被push進來，其餘的都和新陣列的被push進來的這個元素相等，會被pass掉，也達到了去重的效果。

    var arr = [2, 8, 5, 1, 5, 2, 6, 7, 2]
    arr.sort()
    var newArr = [arr[0]]
    for (let i = 0; i < arr.length; i++) {
      if (arr[i] !== newArr[newArr.length-1]) {
        newArr.push(arr[i])
      }
      
    }
    console.log(newArr) // 結果：[1, 2, 5, 6, 7, 8]

方法五:雙重for迴圈元素對比法.
宣告一個新陣列,使得裡面的元素和舊陣列注意進行對比,有就pass,沒有就加,需要用到有個標記變數.

    var arr = [2, 8, 5, 1, 5, 2, 6, 7, 2]
    var newArr = []
    for (let i = 0; i < arr.length; i++) {
      var flag = true
      for (let j = 0; j < newArr.length; j++) {
        if (arr[i] == newArr[j]) {
          flag = false
          break
        }
      }
      if (flag) {
        newArr.push(arr[i])
      }
    }
    console.log(newArr);//[2, 8, 5, 1, 6, 7]

陣列去重的集中方法都要熟,面試也會經常問,本次文章就寫到這裡,謝謝

前端小白,期待一起努力
最後送大家一句話:

只要一直努力,最壞的結果也不過是大器晚成