JavaScript：如何打印嵌套数组并合并子数组对象至单个数组

需求2：合并嵌套的data子数组到单一数组 #

给定包含多个对象的数组，每个对象里有data子数组，要把所有子数组里的对象合并成一个数组，有几种简单实现方式：

方法1：使用flatMap（推荐） #

flatMap会先映射每个元素，再将结果扁平化一层，完美适配这个场景：

const data = [
    {
        "_id": "124141",
        "name": "test",
        "data": [{"price":10,"title": "sda"}]
    },
    {
        "_id": "2525",
        "name": "test2",
        "data": [{"price":20,"title": "asdas"}]
    }
];

const mergedArray = data.flatMap(item => item.data);
console.log(mergedArray);

输出结果与期望一致：

[{
    "price":10,
    "title": "sda"
},
{
    "price":20,
    "title": "asdas"
}]

方法2：使用reduce + concat #

通过累加器逐个合并子数组：

const mergedArray = data.reduce((result, current) => {
    return result.concat(current.data);
}, []);

方法3：使用forEach循环 #

手动遍历每个元素，把子数组内的对象推入新数组：

const mergedArray = [];
data.forEach(item => {
    mergedArray.push(...item.data);
});

需求1：打印嵌套数组到屏幕 #

根据嵌套数组的复杂程度，可选择以下方式：

方式1：直接用console.log #

快速查看的话直接打印即可，浏览器控制台会自动展开嵌套结构：

const nestedArr = [1, [2, 3], [4, [5, 6]]];
console.log(nestedArr);

方式2：格式化打印（更易读） #

用JSON.stringify转成格式化字符串，适合页面展示或输出结构化内容：

const nestedArr = [1, [2, 3], [4, [5, 6]]];
// 第三个参数2表示缩进2空格，提升可读性
const formattedStr = JSON.stringify(nestedArr, null, 2);
console.log(formattedStr);
// 如需在网页显示，可插入DOM元素
document.body.textContent = formattedStr;

方式3：递归遍历打印（自定义格式） #

如果需要自定义输出格式，可写递归函数逐个输出元素：

function printNestedArr(arr) {
    arr.forEach(item => {
        if (Array.isArray(item)) {
            printNestedArr(item);
        } else {
            console.log(item);
            // 网页显示可替换为：document.body.innerHTML += item + '<br>';
        }
    });
}

const nestedArr = [1, [2, 3], [4, [5, 6]]];
printNestedArr(nestedArr);

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