扁平的深嵌套物体-js教程-PHP中文网

扁平的深嵌套物体

霞舞

发布： 2025-02-04 19:14:49

原创

776人浏览过

扁平的深嵌套物体

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

核心方法：

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

代码实现：

<code class="javascript">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;
}</code>

登录后复制

测试用例：

造好物

一站式AI造物设计平台

查看详情

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

<code class="javascript">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
        ]
    }
];</code>

登录后复制

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

以上就是扁平的深嵌套物体的详细内容，更多请关注php中文网其它相关文章！