數(shù)組扁平化是指將一個(gè)多維數(shù)組變成一維數(shù)組。如：

[1, [[2, 3], 4]] --> [1, 2, 3, 4]

Array.prototype.flat()

ES10 引入了 Array.prototype.flat() 方法，使扁平數(shù)組變的簡單。

const arr = [1, [2, [3, [4, 5]]], 6]

// 你可以指定展開多少層
arr.flat(1) // [1, 2, [3, [4, 5]], 6] 
arr.flat(2) // [1, 2, 3, [4, 5], 6] 

// 使用 Infinity 作為參數(shù)，可以展開無限嵌套數(shù)組
arr.flat(Infinity) // [1, 2, 3, 4, 5, 6]

Array.prototype.toString() 和 Array.prototype.join()

如果數(shù)組的元素都是數(shù)字，那么我們可以考慮使用 Array.prototype.toString() 或 Array.prototype.join() 方法。

調(diào)用數(shù)組的 Array.prototype.toString() 方法，將數(shù)組轉(zhuǎn)為字符串再用 String.prototype.split() 分割還原為數(shù)組

const flatten = arr => arr.toString().split(',').map(item => +item)

flatten(arr) // [1, 2, 3, 4, 5, 6]

Array.prototype.join() 也可以實(shí)現(xiàn)同樣的效果：

const flatten = arr => arr.join(',').split(',').map(item => +item)

flatten(arr) // [1, 2, 3, 4, 5, 6]

遞歸

對(duì)于具有更深層嵌套的數(shù)組，可以使用遞歸。

使用 Array.prototype.reduce() 遍歷數(shù)組的每一項(xiàng)，若值為數(shù)組則遞歸遍歷，否則使用 Array.prototype.concat() 拼接。

const flatten = (arr) => {
  return arr.reduce(
    (acc, val) =>
      Array.isArray(val) ? acc.concat(flatten(val)) : acc.concat(val),
    [],
  )
}

flatten(arr) // [1, 2, 3, 4, 5, 6]

擴(kuò)展運(yùn)算符

使用 Array.prototype.concat() 配合擴(kuò)展運(yùn)算符（...）展開一級(jí)嵌套數(shù)組

// 這僅適用于一級(jí)嵌套數(shù)組
[].concat(...arr) // [1, 2, [3, [4, 5]], 6] 

// 較舊的瀏覽器解決方案  
[].concat.apply([], arr) // [1, 2, [3, [4, 5]], 6] 

在配合 while 循環(huán)，只要有一個(gè)元素有數(shù)組，那么循環(huán)繼續(xù)

const flatten = (arr) => {
  while (arr.some(Array.isArray)) {
    arr = [].concat(...arr)
  }
  return arr
}

flatten(arr) // [1, 2, 3, 4, 5, 6]

序列化后正則

const str = `[${JSON.stringify(arr).replace(/(\[|\])/g, '')}]`
JSON.parse(str)   // [1, 2, 3, 4, 5, 6]