Object.assign()遇到的问题分析

概念

Object.assign() 方法可以把任意多个的源对象自身的可枚举属性拷贝给目标对象，然后返回目标对象。语法如下：

Object.assign(target, ...sources)

Object.assign 方法只会拷贝源对象自身的并且可枚举的属性到目标对象身上。

浅拷贝

使用这个方法有个最需要注意的地方就是它是浅拷贝，也就是对于嵌套对象来说使用Object.assign会直接替换掉。我在redux的项目中处理reducer中经常需要改变嵌套对象中的某个属性时候，最开始没有注意就出了错误。

下面是我的reducer代码:

const initialState = {
    mainMenu: "marketIndex",
    selectMenu: "equityMarket",
    externalInfoEchartsImage: "line",
    equityMarket: {
        tableData: [],
        refreshTable: false,
        tableFetching: true,
        rowIndex: 0,
        echartsData: [],
        echartsFetching: true,
    },
}

export default function(state = initialState, action) {
    switch (action.type) {
        case types.SWITCH_EXTERNAL_MAIN_MENU:
            return Object.assign({}, state, {
                mainMenu: action.mainMenu
            });
        case types.SELECT_EXTERNAL_SUB_MENU:
            return Object.assign({}, state, {
                selectMenu: action.selectMenu
            });
        case types.REFRESH_EXTERNAL_DATA:
            return {
                ...state,
                [action.selectMenu]: {
                    ...state[action.selectMenu],
                    refreshTable: action.refreshTable,
                }
            };

            ...

像mainMenu: "marketIndex"这种使用简单数据类型的，就可以直接使用Object.assign来改变属性的值。

	Object.assign({}, state, {
         mainMenu: action.mainMenu
    });

而有嵌套数据类型的equityMarket

   equityMarket: {
        tableData: [],
        refreshTable: false,
        tableFetching: true,
        rowIndex: 0,
        echartsData: [],
        echartsFetching: true,
    },

如果直接使用

	Object.assign({}, state,
		equityMarket:{
         refreshTable: action.refreshTable,
    });

那么就是直接将整个equityMarket替换了，因此需要用...扩展操作符来实现，或者用一些其他的插件等。

参考资料

1.详细的用法介绍