JavaScript多维数组扁平化的四种方法 前端面试题

所谓的数组扁平化就是将多维数组转成一维数组，例如：将多维数组 [[1, 2, 8, [6, 7]], 3, [3, 6, 9], 4] 转成[1, 2, 8, 6, 7, 3, 3, 6, 9, 4] 的形式，以下为数组扁平化的几种方法

方法一：通过递归函数实现1

// 多维数组
var arr = [[1, 2, 8, [6, 7]], 3, [3, 6, 9], 4]

function getNewArr(arr) {
  // 定义新数组用于存储所有元素
  var newArr = []
  // 遍历原数组中的每个元素
  for (var i = 0; i < arr.length; i++) {
    // 判断当前元素是否为数组
    if (Array.isArray(arr[i])) {
      // 若当前元素为数组时，调用函数本身继续判断，通过 concat 方法连接函数返回的数组
      newArr = newArr.concat(getNewArr(arr[i]))
    } else { // 若不是数组直接将当前元素追加到新数组的末尾
      newArr.push(arr[i])
    }
  }
  // 循环结束将新数组返回
  return newArr
}

console.log(arr) // [[1, 2, 8, [6, 7]], 3, [3, 6, 9], 4]
console.log(getNewArr(arr)) // [1, 2, 8, 6, 7, 3, 3, 6, 9, 4]

方法二：通过递归函数实现2

var arr = [[1, 2, 8, [6, 7]], 3, [3, 6, 9], 4]
// 定义全局变量用于存储元素
var newArr = []

function getNewArr(arr, newArr) {
  // 遍历原始数组中的每一项
  for (var i = 0; i < arr.length; i++) {
    // 判断数组中的当前元素是否是数组
    if (Array.isArray(arr[i])) {
      // 是数组时继续调用函数进行判断
      getNewArr(arr[i], newArr)
    } else {
      // 否则将当前元素追加到新数组中
      newArr.push(arr[i])
    }
  }
}
// 调用函数
getNewArr(arr, newArr)
// 打印
console.log(newArr) //  [1, 2, 8, 6, 7, 3, 3, 6, 9, 4]

方法三：toString、split和map结合使用对数组进行扁平化；该方法有局限性数组中的元素必须都是数字，因为 toString 会将数组中的元素都转成字符串

var arr = [[1, 2, 8, [6, 7]], 3, [3, 6, 9], 4]

function getNewArr(arr) {
  var newArr = arr.toString().split(',').map(function(item) {
    // 使用 + 号将当前元素转成数字
    return +item
  })

  return newArr
}

console.log(getNewArr(arr)) // [1, 2, 8, 6, 7, 3, 3, 6, 9, 4]

说明：

toString() 方法会将数组中的所有元素顺次拼接在一起作为一个字符串返回，元素之间会用 , 进行分割

var arr = [[1, 2, 8, [6, 7]], 3, [3, 6, 9], 4]
console.log(arr.toString()) // 1,2,8,6,7,3,3,6,9,

split() 会将字符串按照指定字符分割成数组元素，最终会返回一个字符串数组

var arr = [[1, 2, 8, [6, 7]], 3, [3, 6, 9], 4]
// 通过 , 号对字符串进行分割
console.log(arr.toString().split(','))//["1", "2", "8", "6", "7", "3", "3", "6", "9", "4"]

map() 该方法会顺次将数组中的元素传给处理函数，都处理完成后会作为新数组返回

var arr = [[1, 2, 8, [6, 7]], 3, [3, 6, 9], 4]
// 通过 , 号对字符串进行分割
console.log(arr.toString().split(',').map(function(item) { // 通过 item 参数接收传入的元素
	// 处理元素，并将此次处理结果返回
	return +item 
}))//[1, 2, 8, 6, 7, 3, 3, 6, 9, 4]

方法四：通过ES6中的 … 运算符

var arr = [[1, 2, 8, [6, 7]], 3, [3, 6, 9], 4]
function getNewArr(arr) {

  // 循环数组中的元素判断元素是否为数组
  while(arr.some(item => Array.isArray(item))) {
    // 解构数组
    arr = [].concat(...arr)
  }

  return arr
}
console.log(getNewArr(arr)) // [1, 2, 8, 6, 7, 3, 3, 6, 9, 4]
console.log(arr) // [[1, 2, 8, [6, 7]], 3, [3, 6, 9], 4]

说明：

通过 ... 运算符只能解构一层数组，所以需要循环进行解构，直到数组中的所有数组都解构完成