Question

我正在使用某些状态管理应用程序，其中的数据结构如下

const mainObject = {
    firstLevel: {
        secondLevel: {
            thirdLevel: {
                actualProperty: 'Secret'
            }
        }
    },
    firstLevelUntouched:{
        secondLevelUntouched:{
            thirdLevelUntouched:{
                untouchedProperty:'I don`t want to change'
            }
        }
    }
};

我想将ActualProperty更改为一个新值，将其复制为deepClone

我用以下代码做到了

const modified = {
    ...mainObject,
    ...{
        firstLevel: {
            ...mainObject.firstLevel,
            ...{
                secondLevel: {
                    ...mainObject.firstLevel.secondLevel,
                    thirdLevel: {
                        ...mainObject.firstLevel.secondLevel.thirdLevel,
                        actualProperty: 'New secret'
                    }
                }
            }
        }
    }
}

但是它看起来像是Bulky Code。所以我需要写一个类似

的函数

modified = myCustomAssignment（mainObject，['firstLevel'，'secondLevel'，'thirdLevel'，'actualProperty']，'新机密'）

有人可以帮我吗？

Answer 1

您可以为此使用一个简单的遍历函数，该遍历函数仅遍历传递的属性，直到它成为最后一个，然后将其设置为新值。

function myCustomAssignment(mainObject, propertyList, newValue) {
   const lastProp = propertyList.pop();
   const propertyTree = propertyList.reduce((obj, prop) => obj[prop], mainObject);
   propertyTree[lastProp] = newValue;
}

您甚至可以在此函数的顶部添加propertyList = propertyList.split('.')，以便可以将列表作为易于理解的字符串（例如myCustomAssignment(mainObject, 'firstLevel.secondLevel.thirdLevel.actualProperty', 'new value')）传递给您。

Answer 2

export function mutateState(mainObject: object, propertyList: string[], newValue: any) {
    const lastProp = propertyList.pop();
    const newState: object = { ...mainObject };
    const propertyTree =
        propertyList
            .reduce((obj, prop) => {
                obj[prop] = { ...newState[prop], ...obj[prop] };
                return obj[prop];
            }, newState);
    propertyTree[lastProp] = newValue;
    return newState as unknown;
}

这解决了我的问题。谢谢大家。

需要自定义分配实施

2 个答案: