SOURCE

// 切换到 result,再点击右下角 Console 查看结果,或者调试各种方法

const arr = [1, [2, [3, [4, 5]]], 6, [7, 8, [9, 10]]];

// 使用 Array.prototype.flat()
function flatten1(params) {
  return params.flat(Infinity)
};
console.log('flatten1', flatten1(arr))

// 如果数组的项全为数字,利用 toString
function flatten2(arr) {
  return arr.toString().split(',').map(item =>parseFloat(item))
}
console.log('flatten2', flatten2(arr));

// 利用正则表达式
function flatten3 (arr) {
  let str= JSON.stringify(arr).replace(/(\[|\])/g, '');
  str = '[' + str + ']';
  arr = JSON.parse(str);
  return arr
}
console.log('flatten3', flatten3(arr));

// 使用循环
// 只有一层嵌套时
let arr2 = [1, [2, 3,4,5,6], 7, [8, 9, 10]];
let result = [];
for (let i = 0; i < arr2.length; i++) {
  result = result.concat((arr2[i]));
}

console.log('result', result);

// 有多层嵌套时,使用递归
function flatten41(arr) {
  let result = [];
  for (let i = 0; i < arr.length; i++) {
    if (Array.isArray(arr[i])) {
      result = result.concat(flatten41(arr[i]));
    } else {
      result.push(arr[i])
    }
  }
  return result
}
console.log('flatten41', flatten41(arr));

function flatten42(array) {
  var flattend = [];
  (function flat(array) {
    array.forEach(function(el) {
      if (Array.isArray(el)) flat(el);
      else flattend.push(el);
    });
  })(array);
  return flattend;
}
console.log('flatten42', flatten42(arr));

// forEach 遍历数组会自动跳过空元素
const arr3 = [1,2, 0, false,[0, 5], NaN, null, undefined, [undefined, 11]];
const eachFlat = (arr = [], depth = 1) => {
  const result = []; // 缓存递归结果
  // 开始递归
  (function flat(arr, depth) {
    // forEach 会自动去除数组空位
    arr.forEach((item) => {
      // 控制递归深度
      if (Array.isArray(item) && depth > 0) {
        // 递归数组
        flat(item, depth - 1)
      } else {
        // 缓存元素
        result.push(item)
      }
    })
  })(arr, depth)
  // 返回递归结果
  return result;
}
console.log('eachFlat', eachFlat(arr3, 3))
console.log('eachFlat1', eachFlat(arr, 3))

// for of 循环不能去除数组空位,需要手动去除
const forFlat = (arr = [], depth = 1) => {
  const result = [];
  (function flat(arr, depth) {
    for (let item of arr) {
      if (Array.isArray(item) && depth > 0) {
        flat(item, depth - 1)
      } else {
        // 去除空元素,添加非 undefined 元素
        item !== void 0 && result.push(item);
      }
    }
  })(arr, depth)
  return result;
}
console.log('forFlat => undefined 没了:', forFlat(arr3, 3));
console.log('forFlat1', forFlat(arr, 3));

// 数组的 reduce 方法
const reReduce = arr.reduce((acc, val) => acc.concat(val), []);
console.log('reReduce, 只处理了第一层数组', reReduce);

const flatten43 = (arr, deep = 1) => {
  if (deep <= 0) return arr;
  return arr.reduce((res, curr) => res.concat(Array.isArray(curr) ? flatten43(curr, deep - 1) : curr), [])
}
console.log('flatten43', flatten43(arr3, Infinity));

// 使用堆栈 stack 避免递归
function flatten5(arr) {
  const stack = [...arr];
  const res = [];
  while (stack.length) {
    // 使用 pop 从 stack 中取出并移除值
    const next = stack.pop();
    if (Array.isArray(next)) {
      // 使用 push 送回内层数组中的元素,不会改动原始输入
      stack.push(...next);
    } else {
      res.push(next);
    }
  }
  // 反转恢复原数组的顺序
  return res.reverse();
}
console.log('flatten5', flatten43(arr3));

// while 循环 + some 方法
function flatten6(arr) {
  while (arr.some(item=> Array.isArray(item))) {
    arr = [].concat(...arr)
  }
  return arr
}
console.log('flatten6', flatten6(arr3));
console 命令行工具 X clear

                    
>
console