如何从嵌套forEach方法中返回数组？

研究某数据结构多日，通过嵌套forEach循环获取到所需字符串，但每次循环仅输出单个独立字符串，需要将这些字符串整合为一个数组。尝试创建空数组并push数据时，因在forEach内部打印数组，控制台显示的是数组逐步增长的过程，误以为得到多个庞大数组；将逻辑封装到函数中时又遇到作用域问题。

当前代码：

data.forEach(brandGuideline => {
  brandGuideline.children.forEach(child => {
    const brandGuidelineAlias = child.component.alias;
    console.log(brandGuidelineAlias); // 此处输出一系列独立字符串，能否转为数组？ 
  });
});

尝试的代码：

let arrayOfAliases = [];
data.forEach(brandGuideline => {
  brandGuideline.children.forEach(child => {
    const brandGuidelineAliases = child.component.alias;
    console.log(brandGuidelineAliases); // 仅当路径包含'brand-guidelines'时显示按钮
    arrayOfAliases.push(brandGuidelineAliases);
    console.log('Alias Array: ', arrayOfAliases);
  });
});

方法一：修正打印时机（你的思路没问题，只是打印位置错了） #

你之前的代码逻辑是正确的，问题出在每次push后就打印数组，导致控制台输出了数组每一步的状态，看起来像是多个重复的庞大数组。只需要把打印语句移到所有循环结束之后：

let arrayOfAliases = [];
data.forEach(brandGuideline => {
  brandGuideline.children.forEach(child => {
    const brandGuidelineAlias = child.component.alias;
    arrayOfAliases.push(brandGuidelineAlias);
  });
});
// 循环全部结束后再打印完整数组
console.log('完整的Alias数组: ', arrayOfAliases);

方法二：用flatMap简化代码（推荐） #

如果想更简洁，可以用数组的flatMap方法，它相当于先执行map再将结果扁平化一层，刚好适配这种嵌套结构的场景：

const arrayOfAliases = data.flatMap(brandGuideline => 
  brandGuideline.children.map(child => child.component.alias)
);
console.log(arrayOfAliases);

如果环境不支持flatMap，也可以用map加flat的组合：

const arrayOfAliases = data
  .map(brandGuideline => brandGuideline.children.map(child => child.component.alias))
  .flat();
console.log(arrayOfAliases);

解决封装函数的作用域问题 #

如果之前封装函数时遇到作用域问题，可以把数组放在函数内部，最后返回结果，避免外部变量干扰：

function getAliasArray(data) {
  const aliases = [];
  data.forEach(brandGuideline => {
    brandGuideline.children.forEach(child => {
      aliases.push(child.component.alias);
    });
  });
  return aliases;
}

// 调用函数获取结果
const arrayOfAliases = getAliasArray(data);
console.log(arrayOfAliases);

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