如何使用簡單的過濾器和擴展運算符替換對象數組

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`...
}

請注意，我們如何在每個級別通過擴展語法制作結構的淺表副本。