数组扁平化

概念

将一个多维数组变为一维数组
[1, [2, 3, [4, 5]]] ------> [1, 2, 3, 4, 5]

reduce方法实现

遍历数组每一项，若值为数组则递归遍历，否则concat

function flatten(arr) {
  return arr.reduce((result, item) => {
    return result.concat(Array.isArray(item) ? flatten(item) : item)
  }, [])
}

reduce是数组的一种方法，它接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值

上面的reduce包含两个参数：回调函数，传给total的初始值

数组的 toString方法结合 split方法

调用数组的toString方法，将数组变为字符串然后再用split分割还原为数组

function flatten(arr) {
  return arr.toString().split(',').map(item => {
    return Number(item)
  })
}

因为split分割后形成的数组的每一项值为字符串，所以需要用一个map方法遍历数组将其每一项转换为数值型

join方法和 split方法

和上面toString方法类似，join方法也可以将数组分割为字符串

function flatten(arr) {
  return arr.join(',').split(',').map(function(item) {
    return parseInt(item)
  })
}

递归

递归的遍历每一项，若为数组则继续遍历，否则concat

function flatten(arr) {
  var res = []
  arr.map(item => {
    if (Array.isArray(item)) {
      res = res.concat(flatten(item))
    } else {
      res.push(item)
    }
  })
}

拓展运算符

es6的扩展运算符能将二维数组变为一维

[].concat(...[1, 2, 3, [4, 5]]);  // [1, 2, 3, 4, 5]

但是扩展运算符一次只能展开一层数组,所以做一个遍历，若arr中含有数组则使用一次扩展运算符，直至没有为止

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

ES10的flat方法

参考地址 (opens new window)

• 参数【可选】：指定嵌套数组中的结构深度，默认值为1, Infinity展开所有

var arr1 = [1, 2, [3, 4]];
arr1.flat(); 
// [1, 2, 3, 4]

var arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat();
// [1, 2, 3, 4, [5, 6]]

var arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2);
// [1, 2, 3, 4, 5, 6]

//Infinity展开所有嵌套数组
arr3.flat(Infinity); 
// [1, 2, 3, 4, 5, 6]