1、Object.assign()函數(shù)
Object.assign(target, source)
target為目標(biāo)對(duì)象
source為源對(duì)象
該函數(shù)的作用是以目標(biāo)對(duì)象為基礎(chǔ)，將源對(duì)象中的內(nèi)容更新到目標(biāo)對(duì)象中，有則替換，無則新增
var result01 = {type: '01', name: 'ming', age: 23};
let result02 = {type: '02', marry: false};
let result03 = {type: '03', age: 55}
const result = Object.assign({}, result01, result02, result03);
DLog(result,result.name,result.type,result01);
結(jié)果
image.png
var result01 = {type: '01', name: 'ming', age: 23};
let result02 = {type: '02', marry: false};
let result03 = {type: '03', age: 55}
const result = Object.assign(result01, result02, result03);
DLog(result,result.name,result.type,result01);
結(jié)果
image.png
由此可以看出，如果不需要改變目標(biāo)函數(shù)，第一個(gè)參數(shù)就置為空對(duì)象
2、...state函數(shù)
測試01:
let result01 = {type: '01', name: 'ming', age: 23};
console.log(result01);
console.log({...result01});
console.log({result01});
console.log([{...result01}]);
打印結(jié)果
image.png
說明 ...state 是把對(duì)象的元素拿出來作為一個(gè)新的集合
測試02:
let result01 = {type: '01', name: 'ming', age: 23};
let result02 = {type: '02', marry: false};
let result03 = {type: '03', age: 55,address:'beijing'}
const result = Object.assign({},result01, result02, result03);
console.log({...result02,...result03});
打印結(jié)果
image.png
測試03:
var arr0 = [0,1,2];
var arr1 = [3,4];
var arr3 = [arr0];
var arr4 = [...arr0];
console.log(arr3);
console.log(arr4);
打印結(jié)果
image.png
var arr0 = [0,1,2];
var arr1 = [3,4];
var arr3 = [arr0];
var arr4 = [...arr0,{...arr1}];
console.log(arr4);
打印結(jié)果
image.png
var arr0 = [0,1,2];
var arr1 = [3,4,0];
var arr3 = [arr0];
var arr4 = [...arr0,...arr1];
console.log(arr4);
打印結(jié)果
image.png
說明這是一個(gè)數(shù)據(jù)深拷貝的過程
把源對(duì)象的元素加入到目標(biāo)函數(shù)中
對(duì)象合并
這樣看...state與Object.assign()之間既有相似之處，也有各種特點(diǎn)
對(duì)比代碼與結(jié)果，不難理解
