使用ES6高效提取JavaScript动态嵌套对象中的默认值

本文将介绍如何利用es6的现代javascript特性，如object.values、flatmap、find和object.fromentries，优雅且高效地迭代动态嵌套对象，并从中提取指定的默认值。这种方法避免了手动迭代和硬编码，显著提升了代码的可读性、可维护性和扩展性，特别适用于处理结构化但数量不定的数据集合。

理解动态嵌套对象的默认值提取挑战

考虑以下一个典型的动态对象结构，其中包含多个动态的section，每个section又包含多个动态的field：

const myObj = {
    "sections": { // 注意：实际数据可能包裹在 'sections' 键下
        "section-1": {
            "id": "section-1",
            "fields": [
                {
                    "id": "field1",
                    "items": [
                        { "display": "Select", "value": "SELECT" },
                        { "display": "A 1", "value": "A1" },
                        { "display": "A 2", "value": "A2" }
                    ],
                    "value": "A1" // 这是field1的默认值
                },
                {
                    "id": "field2",
                    "items": [],
                    "value": "Field 2" // 这是field2的默认值
                }
            ]
        },
        "section-2": {
            "id": "section-2",
            "fields": []
        },
        "section-3": {
            "id": "section-3",
            "fields": []
        }
    }
};

最初的迭代方式可能涉及手动遍历每个已知section，然后在其内部遍历fields，这种方法在section数量动态变化时显得笨拙且难以维护：

// 假设 myObj 已经如上所示，其 sections 属性包含所有 section 对象
const section1 = myObj?.sections['section-1'];
const section2 = myObj?.sections['section-2'];
<p>let myDefaults = {};</p><div class="aritcle_card flexRow">
                                                        <div class="artcardd flexRow">
                                                                <a class="aritcle_card_img" href="/ai/1354" title="阿里云AI平台"><img
                                                                                src="https://img.php.cn/upload/ai_manual/001/431/639/68b6d5787ca97252.png" alt="阿里云AI平台"  onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
                                                                <div class="aritcle_card_info flexColumn">
                                                                        <a href="/ai/1354" title="阿里云AI平台">阿里云AI平台</a>
                                                                        <p>阿里云AI平台</p>
                                                                </div>
                                                                <a href="/ai/1354" title="阿里云AI平台" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
                                                        </div>
                                                </div><p>if (section1?.fields) {
section1.fields.forEach((field) => {
// 默认先设置为 field.value
myDefaults[field.id] = field.value;
// 如果有 items 且 field.value 能在其中找到，则更新为找到的整个 item 对象
if (field.items && field.items.length > 0) {
const foundItem = field.items.find(item => item.value === field.value);
if (foundItem) {
myDefaults[field.id] = foundItem;
}
}
});
}</p><p>if (section2?.fields) {
section2.fields.forEach((field) => {
myDefaults[field.id] = field.value;
if (field.items && field.items.length > 0) {
const foundItem = field.items.find(item => item.value === field.value);
if (foundItem) {
myDefaults[field.id] = foundItem;
}
}
});
}</p><p>console.log(myDefaults);
/<em>
输出:
{
field1: { display: 'A 1', value: 'A1' },
field2: 'Field 2'
}
</em>/

ES6优化方案：动态与简洁的迭代

以下是使用ES6特性实现此目标的优化代码：

立即学习“Java免费学习笔记（深入）”；

const myObj = {