JavaScript 学习笔记 - 多维数组变为一维数组

1. 多维数组变为一维数组：

let arr = [1,[2, [3], [4, 5, 6], [7, 8, 9], 10, 11], 12, 13, 14, [15, 16, 17]]
复制代码

• 方法一：递归

  function recursive(arr, newArr) {
      arr.forEach(item => {
          Array.isArray(item) ? recursive(item, newArr) : newArr.push(item)
      })
  }
  
  let newArr = [];
  recursive(arr, newArr)
  复制代码

  结果：

  

• 方法二：reduce

  let flattenDeep = (arr) => arr.reduce((start, current) => (
      Array.isArray(current) ?
      start.concat(...flattenDeep(current)) : 
      start.concat(current)
  ), [])
  
  let newArr2 = flattenDeep(arr);
  复制代码

  结果：

  

• 方法三：flat

  let newArr3 = arr.flat(Infinity);
  复制代码

  

2. 二维数组变一维数组

let arr = [[1,2,3], [4,5,6], 7,8,9];
复制代码

• 方法一：reduce

  let newArr = arr.reduce((start, current) => (start.concat(current)), [])
  复制代码

• 方法二：concat

  let newArr1 = [].concat(...arr)
  复制代码

• 方法三：concat + apply

  let newArr2 = [].concat.apply([], arr)
  复制代码

  结果：

  

3. 将一维数组变为二维数组

let arr = [1,2,3,4,5,6,7,8,9,0];
复制代码

• 方法：

  let group = (arr, length) => {
      let index = 0;
      let newArr = [];
      while (index < arr.length) {
          newArr.push(arr.slice(index, index += length))
      }
      return newArr;
  }
  复制代码

  结果：

  

4. 关于ruduce的理解

reduce是一个功能很强大的函数，因为平时不怎么使用因此这里写一下做为备忘。

• 语法

  arr.reduce(callback[, initialValue])

  • callback有四个参数

    • Accumulator (acc) (累计器)
    • Current Value (cur) (当前值)
    • Current Index (idx) (当前索引)
    • Source Array (src) (源数组)

  • initialValue，做为第一次调用 callback函数时的第一个参数的值。

• 用法

  reduce会为数组中的每个元素都执行一边callback，若是传入了initialValue那么第一次执行callback中的Accumulator就是initialValue的值，callback中的Current Index就是0，若是不传,第一次执行callback中的Accumulator就是数组中的第一个元素，Current Index就是1

  例子：

  // 算出1+2+3+...+100的值
  let source = Array.from({length: 100}, (v, i) => i+1);
  let result = source.reduce((acc, cur) => acc + cur);
  复制代码

  最开始这种我都是用递归去算，使用reduce就显得很简单了。简单的说下计算过程

  let arr = [1,2,3,4]
  let res = arr.reduce((acc, cur) => acc + cur);
  
  // reduce的计算过程就像下面这样
  ((1+2)+3)+4
  
  /* 
    就是第一次callback的执行结果，会做为第二次callback的acc参数传入。
    若是传入了initialValue值那么计算过程就是这样
  */
  
  let res1 = arr.reduce((acc, cur) => acc + cur, 100);
  
  (((100+1)+2)+3)+4
  复制代码