JS中使用展开运算符与reduce实现JSON全路径提取及结果扁平化

• 处理数组分支时使用map遍历数组成员，map会为每个数组成员返回一个路径子数组，直接展开map的结果会将这些子数组作为整体放入最终结果，导致嵌套结构
• 数组递归逻辑中重复拼接了当前累计结果res，会产生多余的重复路径

把数组处理分支的map替换为flatMap，同时移除递归返回时多余的...res拼接即可。flatMap会在遍历后自动将每一项返回的数组摊平一层，避免嵌套。
如果需要兼容旧运行环境，也可以把flatMap替换为map后调用flat()方法，效果一致。

const allPaths = (obj, path = "") =>
  Object.keys(obj).reduce((res, el) => {
    if (Array.isArray(obj[el]) && obj[el].length) {
      // 替换map为flatMap，移除多余的res拼接
      return [...res, ...obj[el].flatMap((item, index) => {
        return allPaths(item, `${path}${el}[${index}].`);
      })];
    } else if (typeof obj[el] === "object" && obj[el] !== null) {
      return [...res, ...allPaths(obj[el], `${path}${el}.`)];
    }
    return [...res, path + el];
  }, []);

const obj = {
  obj: 'sample',
  level1: {
    level2: {
      level3: {
        key: 'value'
      }
    }
  },
  arrayObj: {
    one: [{
        name: 'name',
        point: 'point'
      },
      {
        name: 'name2',
        point: 'point2'
      },
      {
        name: 'name2',
        point: 'point2'
      }
    ]
  }
}

console.log(allPaths(obj));

[
  "obj",
  "level1.level2.level3.key",
  "arrayObj.one[0].name",
  "arrayObj.one[0].point",
  "arrayObj.one[1].name",
  "arrayObj.one[1].point",
  "arrayObj.one[2].name",
  "arrayObj.one[2].point"
]

内容的提问来源于stack exchange，提问作者React Noob