JavaScript 数组扁平化

数组扁平化是指将一个多维数组变为一维数组。

[1,2,3,[4,5,[6,7,[8,9]]]] ——> [1, 2, 3, 4, 5, 6, 7, 8, 9]

递归

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

示例：

function flattenArr(arr){
     //初始化扁平化后的数组
     let res = [];
     // 遍历需要扁平化的数组
     for(let i =0,len = arr.length;i<len;i++)
          if(Array.isArray(arr[i])){
              // 将现在的res 与扁平化的数组进行合并处理
              res = res.concat(flattenArr(arr[i]));
          }else{
              res.push(arr[i]);
          }
      return res;
}
const arr = [1,2,3,[4,5,[6,7,[8,9]]]]
const res = flattenArr(arr)
console.log(res)
// [1, 2, 3, 4, 5, 6, 7, 8, 9]

Array - arr.flat()

flat() 方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。

示例：

const arr = [1,2,3,[4,5,[6,7,[8,9]]]]
const res = arr.flat(Infinity)
console.log(res)
// [1, 2, 3, 4, 5, 6, 7, 8, 9]

Array - arr.flat([depth]) 扁平化多维数组：

1. 可选参数：depth  指定要提取嵌套数组的结构深度，默认值为 1。
2. 返回值：一个包含将数组与子数组中所有元素的新数组
3. Infinity 无限扁平

depth 如果是3，表示需要展开3层；

如果是Infinity的话，就是不管嵌套几层，全部都展开。

示例：

reduce+concat

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

语法：array.reduce(function(total, currentValue, currentIndex, arr), initialValue)，接收四个参数，前两个必填，total 初始值，计算结束后的返回值；currentValue 当前元素；currentIndex 当前元素索引；arr 元素所属数组对象；initialValue，累加器初始值。

示例：

function flattenArr(arr) {
    return arr.reduce((prev, next)=>{
        return prev.concat(Array.isArray(next) ? flattenArr(next) : next)
    }, [])
}
const arr = [1,2,3,[4,5,[6,7,[8,9]]]]
const res = flattenArr(arr)
console.log(res)
// [1, 2, 3, 4, 5, 6, 7, 8, 9]

join & split

示例：

function flattenArr(arr) {
     return arr.join(',').split(',').map(function(item) {
        return parseInt(item);
    })
}
const arr = [1,2,3,[4,5,[6,7,[8,9]]]]
const res = flattenArr(arr)
console.log(res)
// [1, 2, 3, 4, 5, 6, 7, 8, 9]

扩展运算符

...扩展运算符可以取出参数的所有的可以遍历的对象，并拷贝到当前的对象中。

function flattenArr(arr) {
    while (arr.some(item => Array.isArray(item))) {
       arr = [].concat(...arr);
    }
    return arr
}
const arr = [1,2,3,[4,5,[6,7,[8,9]]]]
const res = flattenArr(arr)
console.log(res)

运行结果：

toString + split

先将数组转化为字符串，再使用split将字符串转化为数组。

示例：

function flattenArr(arr) {
     return arr.toString().split(',').map( item => Number(item)) // 用split形成的数组的每个元素仍然是字符串，需要将其转化为数字
}
const arr = [1,2,3,[4,5,[6,7,[8,9]]]]
const res = flattenArr(arr)
console.log(res)

运行结果：

注意： toString + split 方法仅适用于数组元素都是数字的情况。

反例：

function flattenArr(arr) {
     return arr.toString().split(',').map( item => Number(item))
}
const arr = ['a','b','b',['4','5',['6','7',['8','9']]]]
const res = flattenArr(arr)
console.log(res)

运行结果：

原因是：toString() 方法的定义为：把一个 Number 对象转换为一个字符串，并返回结果。