如何使用简单的过滤器和扩展运算符替换对象数组

Question

我需要以下代码的建议。 如果提到的menuKey存在，这里的目标是删除特定的数组。

注意： sdb.menu = 'account-links' （在另一个文件中声明）；

const { menu = [] } = remainingConfig[sdb.menu]?.params || {};
const keysToRemove = ['sidebarReferAFriend'];
const filteredMenu = menu.filter(({ menuKey }: IMenuLink) => !keysToRemove.includes(menuKey));

如何将filteredMenu分配回remainingConfig对象？

我尝试了一些扩展运算符选项，但它没有给出现有的相同结构。 因此，请在您有时间的时候在这里提供一些帮助。

对象结构将类似于附加图像。

Answer 1

如果您可以直接分配给remainingConfig[sdb.menu].params.menu属性，那么如果数组不存在，您可能不需要创建数组，只有在数组和导致它的所有内容存在时才进行工作，然后只需分配回menu ：

const menuConfigParams = remainingConfig[sdb.menu]?.params;
const menu = menuConfigParams?.menu;
if (menu) {
    const keysToRemove = ['sidebarReferAFriend'];
    menuConfigParams.menu = menu.filter(({ menuKey }/*: IMenuLink*/) => !keysToRemove.includes(menuKey));
}

如果remainingConfig配置结构是深度不可变的，那么我们必须创建一个新对象来在嵌套的每一层替换它：

const menuConfig = remainingConfig[sdb.menu];
const menuConfigParams = menuConfig?.params;
let menu = menuConfigParams?.menu;
if (menu) {
    const keysToRemove = ['sidebarReferAFriend'];
    menu = menu.filter(({ menuKey }/*: IMenuLink*/) => !keysToRemove.includes(menuKey));
    const newConfig = {
        ...remainingConfig,
        [sdb.menu]: {
            ...menuConfig,
            params: {
                ...menuConfig.params,
                menu,
            }
        }
    };
    // ...then use whatever mechanism is in your environment to replace `remainingConfig`
    // with `newConfig`...
}

请注意，我们如何在每个级别通过扩展语法制作结构的浅表副本。