概念
Object.assign() 方法可以把任意多個的源對象自身的可枚舉屬性拷貝給目標對象细疚，然后返回目標對象。語法如下：
Object.assign(target, ...sources)
Object.assign 方法只會拷貝源對象自身的并且可枚舉的屬性到目標對象身上川梅。
淺拷貝
使用這個方法有個最需要注意的地方就是它是淺拷貝疯兼，也就是對于嵌套對象來說使用Object.assign會直接替換掉。我在redux的項目中處理reducer中經(jīng)常需要改變嵌套對象中的某個屬性時候贫途，最開始沒有注意就出了錯誤吧彪。
下面是我的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"這種使用簡單數(shù)據(jù)類型的，就可以直接使用Object.assign來改變屬性的值丢早。
Object.assign({}, state, {
mainMenu: action.mainMenu
});
而有嵌套數(shù)據(jù)類型的equityMarket
equityMarket: {
tableData: [],
refreshTable: false,
tableFetching: true,
rowIndex: 0,
echartsData: [],
echartsFetching: true,
},
如果直接使用
Object.assign({}, state,
equityMarket:{
refreshTable: action.refreshTable,
});
那么就是直接將整個equityMarket替換了姨裸，因此需要用...擴展操作符來實現(xiàn)，或者用一些其他的插件等怨酝。
參考資料
1.詳細的用法介紹
