美文网首页
Object.assign小问题

Object.assign小问题

作者: 瘦人假噜噜 | 来源:发表于2017-04-23 23:27 被阅读0次

    概念

    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.详细的用法介绍

    相关文章

      网友评论

          本文标题:Object.assign小问题

          本文链接:https://www.haomeiwen.com/subject/zkkuzttx.html