数组常用方法

发表于 分类于 Waline： 阅读次数： 本文字数： 3.5k 阅读时长 ≈ 3 分钟
对JavaScript高级程序设计中的数组常用方法所作的记录

数组转字符串(不改变原数组)

1
Array.toString()    // 返回一个字符串

数组重排序(改变)

1
2
Array.reverse()     // 颠倒顺序，不灵活
Array.sort()        // 方法调用每个数组项的toString方法，比较得到的字符串以确定如何排序
  • Array.sort()接收一个函数作为参数，函数传入两个参数value，value1 < value2返回一个负数，value1在value2之前；value1 > value2返回一个正数，value1在value2之后；value1 === value2返回一个0。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    function compare(value1, value2){
        if(value1 < value2)
            return -1
        else if(value1 > value2)
            return 1
        else
            return 0
    }

    // 简写
    function compare(value1, value2){
        value1 - value2 ? -1 : 1    // 升序
        value1 - value2 ? 1 : -1    // 降序 
    }
  • Array.sort()原理：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    for(let i=0; i<length; i++){
        for(let j=i+1; j<length; j++){
            if(fn(i, j) > 0){
                let temp = j;
                j = i;
                i = temp;
            }
        }
    }

查找元素位置(不改变)

1
2
Array.indexOf(item, index)
Array.lastIndexOf(item, index)
  • item：查找元素，index：查找的起点位置，找不到返回-1
  • 数组有两个相等元素，查找到第一个符合元素则返回位置，不会继续查找下去

查找是否包含某个元素(不改变)

1
2
3
4
5
6
7
8
Array.findIndex(function(item, index, array){})

let color = ['r', 'b', 'g', 'r']
console.log(color.findIndex((item, index, array) => {
    return item === 'r'
}))     // 0

Array.includes(item)

操作方法

  • 两个数组连接(不改变)
    1
    Array1.concat(Array2)       // 返回新数组
  • Array.slice(startIndex, endIndex)，截取返回新数组 (不改变)
    1
    2
    3
    4
    5
    let color = ['r', 'b', 'g', 'y', 'p']
    console.log(color.slice(3, 4))      // ['y']

    // index是负数情况下，以数组长度加上该负数来确定位置
    console.log(color.slice(-2, -1))    // ['y']
  • Array.splice (改变)
    • 删除：2个参数，要删除的第一项位置和要删除的项数，返回被删除的元素数组
    • 插入：3个参数，起始位置、要删除项数、要插入的任意数量项
    • 替换：3个参数，起始位置、要删除项数、要插入的任意数量项
    • 如果没有被删除的项，则返回一个空数组
      1
      2
      3
      4
      5
      6
      7
      8
      9
      let color = ['r', 'b', 'g']
      console.log(color.splice(0, 1))             // ['r']
      console.log(color)                          // ['b', 'g']

      console.log(color.splice(1, 0, 'y', 'o'))   // []
      console.log(color)                          // ['b', 'y', 'o', 'g']

      console.log(color.splice(1, 1, 'r', 'p'))   // ['y']
      console.log(color)                          // ['b', 'r', 'p', 'o', 'g']

栈方法(改变)

1
2
Array.push()    // 后推入
Array.pop()     // 后取出

队列方法(改变)

1
2
Array.shift()       //  前取出，并返回元素，同时数组长度-1
Array.unshift()     // 前推入，返回数组长度

迭代方法(不改变)

1
2
3
4
5
Array.map(function(item, index, array){})       // 和forEach相似，返回一个等长数组
Array.forEach(function(item, index, array){})   // 无返回值
Array.every(function(item, index, array){})     // 全部true则为true
Array.some(function(item, index, array){})      // 某一个true为true
Array.filter(function(item, index, array){})    // 返回过滤后的数组

Array.reduce & Array.reduceRight

  • 迭代数组所有项，构建返回一个最终值
  • 2个参数：一个function(prev, cur, index, array)；一个起始值。
  • 函数第一第二参数：第一次迭代发生在数组的第二项上，因此第一个参数是数组的第一项，第二个参数是数组的第二项
  • 用法：
    • 计算数组中每个元素出现的次数
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      let color = ['r', 'b', 'g', 'r']
      let res = color.reduce(function(prev, cur, index, array){
          console.log(prev, cur)
          if(cur in prev)
              prev[cur]++
          else
              prev[cur] = 1
          return prev
      }, {})
      console.log(res)

      // {} 'r'
      // {r: 1} 'b'
      // {r: 1, b: 1} 'g'
      // {r: 1, b: 1, g: 1} 'r'
      // {r: 2, b: 1, g: 1}
    • 数组求和
    • 数组去重
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      let color = ['r', 'b', 'g', 'r']
      let res = color.reduce(function(prev, cur, index, array){
          console.log(prev, cur)
          if(prev.includes(cur))
              return prev
          else
              prev.push(cur)
          return prev
      }, [])
      console.log(res)
    • 多维数组转一维
      1
      2
      3
      4
      5
      6
      7
      let color = ['r', [['b', 'g'], 'r']]
      let transform = function(val){
          return val.reduce(function(prev, cur, index, array){
              return prev.concat(Array.isArray(cur)? transform(cur) : cur)
          }, [])
      }
      console.log(transform(color))   // ['r', 'b', 'g', 'r']