如何用JS基础方法实现任意深度多维数组扁平化的zooInventory函数

原有代码问题 #

你编写的代码核心问题是递归调用zooInventory后，返回的子数组扁平化结果没有合并到当前的结果数组中，导致嵌套层级的元素全部丢失，没有达到预期效果。

符合你现有技术栈的最优实现 #

你提到想在else分支用push结合展开运算符实现，正好可以通过接收递归返回值的方式实现，适配任意层数的嵌套数组：

const zooInventory = array => {
  let finalArray = [];
  for (let i = 0; i < array.length; i++) {
    const currentElement = array[i];
    if (!Array.isArray(currentElement)) {
      // 非数组元素直接推入结果集，如果仅需要字符串可在此处加typeof判断
      finalArray.push(currentElement);
    } else {
      // 递归处理嵌套数组，用展开运算符将子级扁平化结果全部推入当前结果集
      finalArray.push(...zooInventory(currentElement));
    }
  }
  return finalArray;
}

可选优化：仅保留字符串类型的动物介绍 #

如果需要过滤掉数组中的非字符串元素（比如示例中的数字2），可以在推入非数组元素时增加类型判断：

const zooInventory = array => {
  let finalArray = [];
  for (let i = 0; i < array.length; i++) {
    const currentElement = array[i];
    if (!Array.isArray(currentElement)) {
      typeof currentElement === 'string' && finalArray.push(currentElement);
    } else {
      finalArray.push(...zooInventory(currentElement));
    }
  }
  return finalArray;
}

ES2019+ 简化内置实现 #

如果运行环境支持ES2019及以上标准，可以直接用数组内置的flat方法实现，代码更简洁：

// Infinity参数表示扁平任意深度的嵌套数组，后面的filter用来过滤非字符串元素
const zooInventory = array => array.flat(Infinity).filter(item => typeof item === 'string');

测试验证 #

输入示例：

const Array1 = ['大熊猫是中国国宝', ['金丝猴是国家一级保护动物'], ['小熊猫外形像猫，全身红褐色', 2, 'x']];
console.log(zooInventory(Array1));

输出结果（带字符串过滤的版本）：

['大熊猫是中国国宝', '金丝猴是国家一级保护动物', '小熊猫外形像猫，全身红褐色', 'x']

内容的提问来源于stack exchange，提问作者22RookieMistakesJS