js中提供了很多數組的操作方法，比如刪除，截取，排序等等，這些方法在平時做開發的過程中總會用到，所以今天做一個總結。

方法詳解

• concat

  • 解釋
    數組拼接，返回一個新的數組，原有數組不變

  • ??

  let arr1 = [1, 2, 3]
  let arr2 = ['a', 'b', 'c']
  let concatArr = arr1.concat(arr2)
  console.log(arr1)
  console.log(arr2)
  console.log(concatArr)
  

  • 結果展示

    
    
    concat.png

• join

  • 解釋
    數組轉化成字符串輸出，用特定字符分割，原數組不變

  • ??

  let arr = [1, 2, 3]
  let joinArr = arr.join('&')
  console.log(arr)
  console.log(joinArr)
  

  • 結果展示

    
    
    join.png

• toString

  • 解釋
    把數組轉換為字符串，并返回結果，原數組不變

  • ??

  let arr = [1, 2, 3]
  let toStringArr = arr.toString()
  console.log(arr)
  console.log(toStringArr)
  

  • 結果展示

    
    
    toString.png

• toLocaleString

  • 解釋
    把數組轉換為本地數組，并返回結果

  • ??

  let arr = [1, 2, 3, 4, 5]
  let toLocaleStringArr = arr.toLocaleString()
  console.log(arr)
  console.log(toLocaleStringArr)
  

  • 展示結果

    
    
    toString.png

• sort

  • 解釋
    數組排序，返回排序后的數組，原數組改變

  • ??

  let arr = [1, 2, 3, 5, 0, 10, 15]
  let sortArr = arr.sort(function(a, b) {
    return a - b
  })
  console.log(arr)
  console.log(sortArr)
  

  • 結果展示

    
    
    sort.png

• reverse

  • 解釋
    顛倒數組順序，原數組改變

  • ??

  let arr = [1, 2, 3]
  let reverseArr = arr.reverse()
  console.log(arr)
  console.log(reverseArr)
  

  • 結果展示

    
    
    reverse.png

• pop

  • 解釋
    從數組后面刪除一項，返回刪除的數據，原數組改變

  • ??

  let arr = [1, 2, 3]
  let popArr = arr.pop()
  console.log(arr)
  console.log(popArr)
  

  • 結果展示

    
    
    pop.png

• push

  • 解釋
    從數組后面添加，返回數組的長度，原數組改變
  • ??

  let arr = [1, 2, 3]
  let pushArr = arr.push(4)
  console.log(arr)
  console.log(pushArr)
  

  • 結果展示

    
    
    push.png

• shift

  • 解釋
    從數組的前面刪除一項，返回被刪除的數據，原數組改變
  • ??

  let arr = [1, 2, 3]
  let shiftArr = arr.shift()
  console.log(arr)
  console.log(shiftArr)
  

  • 結果展示

    
    
    shift.png

• unshift

  • 解釋
    從數組前面增加，返回數組的長度，原數組改變
  • ??

  let arr = [1, 2, 3]
  let unshiftArr = arr.unshift(0)
  console.log(arr)
  console.log(unshiftArr)
  

  • 結果展示

    
    
    unshift.png

• slice

  • 解釋
    從某個已有的數組返回選定的元素，原數組不變slice(start[, end]) 原數組不變
  • ??

  // 只傳一個參數，默認截取到最后
  let arr = [1, 2, 3]
  let sliceArr = arr.slice(1)
  console.log(arr)
  console.log(sliceArr)
  

  • 結果展示

    
    
    slice 1.png

  // 傳2個參數，第一個表示開始位置，第二個表示結束位置，但不包含
  let arr = [1, 2, 3]
  let sliceArr = arr.slice(1, 1)
  console.log(arr)
  console.log(sliceArr)
  

  • 結果展示

    
    
    slice 2.png

  // 傳2個參數，第一個表示開始位置，第二個表示結束位置，但不包含
  let arr = [1, 2, 3]
  let sliceArr = arr.slice(1, 2)
  console.log(arr)
  console.log(sliceArr)
  

  • 結果展示

    
    
    slice 3.png

• splice

  • 解釋
    刪除元素，并向數組添加新元素，返回刪除的部分，原數組改變splice(start[, number, item1, item2, …, itemN])
  • ??

  // 第一個參數開始刪除的位置，第二個參數表示要刪除的個數
  let arr = [1, 2, 3, 4, 5]
  let spliceArr = arr.splice(1, 3)
  console.log(arr)
  console.log(spliceArr)
  

  • 結果展示

    
    
    splice.png

  • ??

  // 第一個參數開始刪除的位置，第二個參數為空表示到最后
  let arr = [1, 2, 3, 4, 5]
  let spliceArr = arr.splice(1)
  console.log(arr)
  console.log(spliceArr)
  

  • 結果展示

    
    
    splice 1.png

  • ??

  // 第一個參數開始刪除的位置，第二個參數為刪除的個數，第三個參數為插入到該位置的新數據
  let arr = [1, 2, 3, 4, 5]
  let spliceArr = arr.splice(3, 1, 7)
  console.log(arr)
  console.log(spliceArr)
  

  • 結果展示

    
    
    splice 2.png

快速查詢列表

相近方法對比

• join()，toString()和toLocaleString()
  join可以定義分割符，而另外的方法是默認用逗號分隔的；
  toString和toLocalString的區別是什么呢？請參考http://blog.csdn.net/xufeiayang/article/details/52723550
• slice()和splice()
  slice返回數組的指定部分，原數組不變。第一個參數為必填，表示開始的位置；第二個參數表示結束位置，但不包含end，或者可以不填寫，則默認截取到最后
  splice返回數組被刪除的部分，原數組會改變。第一個參數必填，表示開始刪除的開始位置，第二個參數表示要刪除的個數，后面的參數表示要添加到該位置的數據

想了解更多關于es6新增的數組方法請點擊這里