Object.assign、深浅拷贝的实现、js的数据类型

看过没用过,一看我就是个假的前端,说实在的,还真的没用过
百度一番:贴上地址
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

学习了下,做个小笔记:

Object.assign 是将可枚举的属性值复制到目标对象,返回目标对象,语法如下:
Object.assign(target,...sources);

合并对象

[1,2,3] ===> {0:1,1:2,3:3}
[4,5] ===> {0:4,1:5}
这个时候就会合并相同属性,后面的值替换目标对象原有的值

    let arr1 = [1,2,3];
    let arr2 = Object.assign([4,5],arr1);
    console.log(arr2); // [1,2,3]

复制一个对象

    let obj = {name: 'zs',age: 14};
    let obj1 = Object.assign({},obj);
     //let obj1 = {...obj}; //也可以用拓展运算符 
    obj.age = 18;
    console.log(obj); //{name: "zs", age: 18}
    console.log(obj1); //{name: "zs", age: 14}

这种复制是浅拷贝,因为当源属性值是一个【对象的引用】 时,源属性值的对象改变会呈现在目标对象上

    let obj = {name: 'zs',age: 14,say: {word:'说啦!'}};
    let obj1 = Object.assign({},obj);
    // let obj1 = {...obj}; //也可以用拓展运算符 
    obj.age = 18;
    obj.say.word = '不说!';
    console.log(obj); //{name: "zs", age: 18,say:{word: '不说!'}}
    console.log(obj1); //{name: "zs", age: 14,say:{word: '不说!'}}

问题来啦 上面说到浅拷贝,那么什么是浅拷贝? 有浅拷贝了,辣么是否有深拷贝,两者有何区别? 一堆不懂 头都大了

举个栗子:

    let obj1 = {
        name: 'www'
    };
    let obj2 = obj1;
    console.log(obj2); //{name: www}
    obj1.name = 'baidu';
    console.log(obj2); //{name: baidu}

通俗点理解:从上面栗子看,当obj1改变的时候,obj2也发生了改变,这种拷贝就浅拷贝,如果当obj1发生变化的时候 obj2不会变化,两个对象互不影响就是深拷贝了

先来说个事 为何上面obj1变化,obj2会变化,
原因是: 引用类型保存在栈内存里的是堆内存里的一个引用地址,通过这个引用地址可以快速查找到保存在堆内存里的对象,所以 其实obj1和obj2都指向同一个值

辣么深拷贝可以理解成 obj2拿了obj1的值后,自己自立门户,从此obj1怎么改都不关obj2的事 ,obj2改变也不关obj1的事

怎么实现:哈哈!方法如下:::

// 第一种 深拷贝 借助JSON.stringify和JSON.parse
    let obj1 = {
        name: 'www'
    };    
    function deepCopy(obj) {
        return JSON.parse(JSON.stringify(obj)); 
    }

    let obj2 = deepCopy(obj1);
    console.log(obj2);   //{name: "www"}
    obj1.name = 'yixia';
    console.log(obj1);   //{name: "yixia"}
    console.log(obj2);   //{name: "www"}



// 第二种 借助jquery $.extend(isdeep,target,...soures);

    let obj1 = {
        name: 'www'
    }; 
    let obj2 = $.extend(true,{},obj1);
    obj1.name = 'yixia';
    console.log(obj2); //{name: "www"}


js中的数据类型有两种,分别是基本数据类型和引用数据类型

基本数据类型:string boolean number null undefined
引用类型:Object array function

区别:
1、内存分配不同: 基本类型 存在栈内存中,引用类型存在堆内存中,将该堆内存的指针存在栈内存中
2、访问机制不同: 基本类型直接访问栈内存里的变量,引用类型通过存在栈内存里的指针指向栈内存里的对象
3、复制变量的不同:基本类型将复制一个副本赋值,之后两个值相互独立,引用类型赋值一个指针,指向同一个堆内存里的对象
4、传递参数不同,将实参复制给形参的过程,js中的方法的参数都是按值传递的,
基本类型将变量的值复制给形参后,这个形参跟该变量没有关系,
引用类型将栈内存这个指针传递给参数,之后这个形参发生任何改变都会体现在外部的这个对象上,主要原因还是因为引用方式的不同

你可能感兴趣的:(Object.assign、深浅拷贝的实现、js的数据类型)