数组方法详解

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新增的数组方法请点击这里