欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Object.assign() 函数与...state函数

程序员文章站 2024-03-12 12:08:38
...

1、Object.assign()函数
Object.assign(target, source)
target为目标对象
source为源对象
该函数的作用是以目标对象为基础,将源对象中的内容更新到目标对象中,有则替换,无则新增

 

 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);

结果

 

Object.assign() 函数与...state函数

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);

结果

 

Object.assign() 函数与...state函数

image.png

由此可以看出,如果不需要改变目标函数,第一个参数就置为空对象

2、...state函数
测试01:

 

      let result01 = {type: '01', name: 'ming', age: 23};
        console.log(result01);
        console.log({...result01});
        console.log({result01});
        console.log([{...result01}]);

打印结果

 

Object.assign() 函数与...state函数

image.png

说明 ...state 是把对象的元素拿出来作为一个新的集合

测试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});

打印结果

 

Object.assign() 函数与...state函数

image.png

测试03:

 

      var arr0 = [0,1,2];
        var arr1 = [3,4];
        var arr3 = [arr0];
        var arr4 = [...arr0];
        console.log(arr3);
        console.log(arr4);

打印结果

 

Object.assign() 函数与...state函数

image.png

 

      var arr0 = [0,1,2];
        var arr1 = [3,4];
        var arr3 = [arr0];
        var arr4 = [...arr0,{...arr1}];
        console.log(arr4);  

打印结果

 

Object.assign() 函数与...state函数

image.png

 

       var arr0 = [0,1,2];
       var arr1 = [3,4,0];
       var arr3 = [arr0];
       var arr4 = [...arr0,...arr1];
       console.log(arr4);

打印结果

 

Object.assign() 函数与...state函数

image.png

说明这是一个数据深拷贝的过程
把源对象的元素加入到目标函数中
对象合并

这样看...state与Object.assign()之间既有相似之处,也有各种特点
对比代码与结果,不难理解



作者:云深不知处a
链接:https://www.jianshu.com/p/3e412e254d85
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。