在 JavaScript 中合并对象和子对象（不完全覆盖子对象）答案

【问题标题】：Merge objects and subobjects in JavaScript (without overwriting subobjects completely)在 JavaScript 中合并对象和子对象（不完全覆盖子对象）
【发布时间】：2021-09-14 18:16:30
【问题描述】：

上下文：我正在使用 react und material-ui 构建一个 Web 应用程序，并且想要一个共享“基本”属性的 LightTheme 和 DarkTheme。所以我创建了一个BaseTheme，然后使用...spread-operator 将它与明暗主题的特定值合并。

BaseTheme.js

const BaseTheme = {
    props: {
        MuiButton: {
            variant: "outlined",
            color: "primary",
        },
        MuiTextField: {
        variant: "outlined",
            color: "primary",
        }
    },
    palette: {
        primary: {
            main: '#76e3b8',
        }
    }
}

DarkTheme.js

const DarkTheme = {
    palette: {
        type: "dark",
    },
    ...BaseTheme,
}

LightTheme.js 看起来就像 DarkTheme.js

但是BaseTheme 完全覆盖palette 子对象。你知道我该如何解决这个问题吗？手动编码场景并不是一个真正的选择，因为主题会变得更加复杂，因此会非常复杂。

【问题讨论】：

标签： javascript object merge

【解决方案1】：

只需切换顺序：

const DarkTheme = {
    ...BaseTheme,
    palette: {
        type: "dark",
    },
}

或者，如果您想将 palette 与原始合并：

const DarkTheme = {
    ...BaseTheme,
    palette: {
        ...BaseTheme.palette,
        type: "dark",
    },
}

const BaseTheme = {
    props: {
        MuiButton: {
            variant: "outlined",
            color: "primary",
        },
        MuiTextField: {
        variant: "outlined",
            color: "primary",
        }
    },
    palette: {
        primary: {
            main: '#76e3b8',
        }
    }
}

let DarkTheme = {
    ...BaseTheme,
    palette: {
        type: "dark",
    },
}

console.log(DarkTheme);

DarkTheme = {
    ...BaseTheme,
    palette: {
        ...BaseTheme.palette,
        type: "dark",
    },
}

console.log(DarkTheme);

【讨论】：