扁平的深嵌套物体

本文介绍一种利用循环和数组方法扁平化深嵌套对象的JavaScript方法，该方法是针对每日JavaScript挑战#js-31的解决方案。

核心方法：

• 循环遍历对象: 使用for...in循环遍历普通JavaScript对象（POJO）的键值对。 for循环则用于遍历数组元素。
• 递归: flatten函数自身调用自身，实现对任意深层嵌套对象的扁平化处理，无论其是作为键值还是数组元素存在。
• 类型判断: 使用typeof运算符判断嵌套对象的类型。
• 数组方法: 使用map()和some()数组方法。 map()方法较为常见，some()方法则接受一个回调函数，返回布尔值。如果数组中任何一个元素满足条件，则返回true。 every()方法与some()类似，但只有当所有元素都满足条件时才返回true。

代码实现：

function flatten(obj) {
    let flattenedObj = {};  // 初始化空对象用于存储扁平化后的键值对

    // 遍历键值对
    for (const key in obj) {
        // 如果键指向的对象不是数组，则递归扁平化该对象
        if (typeof obj[key] === "object" && !Array.isArray(obj[key])) {
            const tempObj = flatten(obj[key]);
            for (const tempKey in tempObj) {
                flattenedObj[`${key}.${tempKey}`] = tempObj[tempKey];
            }
            // 如果键指向数组，则递归扁平化数组中存在的任何对象
        } else if (Array.isArray(obj[key])) {
            if (obj[key].some(e => typeof e === "object")) {
                flattenedObj[key] = obj[key].map((element) => typeof element === "object" ? flatten(element) : element);
            } else {
                flattenedObj[key] = obj[key];
            }
        } else {
            flattenedObj[key] = obj[key];
        }
    }

    return flattenedObj;
}

测试用例：

Shop7z网上购物系统普及版

Shop7z网上购物系统是基于ASP开发的简单易用的商城建站平台，Shop7z可以满足不同企业、个人的各种网上开店需求！普及版是一套简便易用的商城系统，支持商品图片批量上传、淘宝导入、商品批量修改等实用功能，还支持手机版以及APP的整合，普及版支持4种不同的模板风格，支持支付宝、财付通、网银在线等支付接口,系统还支持新订单邮件通知、多种分类排序、商品归属多分类等功能，支持五种会员价格体系等。

下载

以下是一些测试对象，包括深层嵌套的对象和包含不同数据类型的数组。上述方法均可处理这些对象。

const obj = {
    firstName: "Heath",
    lastName: "Frederick",
    occupation: {
        name: "Software Engineer",
        duties: ["automation testing", "bug fixes", "deployments"],
        workAddress: {
            street: "Las Colinas Ave",
            city: "Irving",
            state: "Texas"
        }
    }
};

const arrOfObj = [
    {
        label: "first",
        id: 1,
        children: []
    },
    {
        label: "second",
        id: 2,
        children: [
            {
                label: "third",
                id: 3,
                children: [
                    {
                        label: "fifth",
                        id: 5,
                        children: []
                    },
                    {
                        label: "sixth",
                        id: 6,
                        children: [
                            {
                                label: "seventh",
                                id: 7,
                                children: []
                            }
                        ]
                    }
                ]
            },
            {
                label: "fourth",
                id: 4,
                children: []
            },
            1,
            "different Type",
            true
        ]
    }
];

您可以自行尝试以上代码和测试对象，体验其扁平化深嵌套对象的强大功能。