如何遍历二维数组返回扁平化一维数组，解决遍历返回undefined问题

问题原因分析 #

• 第一个嵌套map返回嵌套数组的原因：Array.map() 方法会返回和原数组长度完全一致的新数组，你两次嵌套调用map，外层map遍历每个子数组，返回的是内层map处理后的子数组，最终结果自然还是二维嵌套结构。
• 第二个封装函数返回undefined的原因：
  1. Array.forEach() 方法本身没有返回值，回调函数内部的return不会向外层传递返回结果
  2. 你定义的arrMap函数本身没有写return语句，就算调用函数也不会有返回值；另外你示例中直接console.log(arrMap)是打印函数对象本身，没有传入参数调用函数。

解决方案 #

方案1：直接用内置展平方法（最简单） #

ES6提供的Array.flat()专门用来展平嵌套数组，二维数组直接调用即可：

const arr = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9],
];
const flatArr = arr.flat();
console.log(flatArr); // 输出 [1,2,3,4,5,6,7,8,9]
// 如果是更深层级的嵌套，可以传参数指定展平深度，比如arr.flat(3)展平3层，arr.flat(Infinity)展平所有层级

如果要得到逗号分隔的字符串，直接调用flatArr.join(',')即可得到你预期的1,2,3,4,5,6,7,8,9格式。

方案2：用flatMap方法 #

flatMap()是map()和flat()的组合，适合先遍历再展平的场景：

const flatArr = arr.flatMap(item => item);
console.log(flatArr); // 同样得到一维数组

方案3：手动封装展平逻辑（不依赖内置展平方法） #

如果需要自己实现逻辑，用reduce或者双层遍历都可以：

// 用reduce实现
const flatArr = arr.reduce((prev, curr) => prev.concat(curr), []);

// 双层遍历实现
function flatten2DArr(arr) {
  const result = [];
  for (let subArr of arr) {
    result.push(...subArr);
  }
  return result;
}
const flatArr = flatten2DArr(arr);

拿到展平后的一维数组之后，你就可以直接遍历或者在其他场景直接使用所有元素了。

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