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
  複製程式碼