了解一下js对象深拷贝与浅拷贝(前端开发面试)

讲清楚js对象深拷贝与浅拷贝

在一般面试中,我们会遇到深拷贝与浅拷贝中,虽然在编程中很少用到,但是如果你回答出来了,你可牛逼了!!!

深拷贝

啥叫深拷贝?

说通俗一点.就是两个对象之间没有任何关系,看下面的例子,你就明白了.

我们了解这几种就可以了

通过JSON实现的深拷贝

例如:

var obj = {
            name: '石榴姐', age: 24, 
        };
        var obj1=JSON.stringify(obj);
        console.log(obj1);
        obj1.name='小辣椒';
        console.log(obj);
        console.log(obj1);

**注意:**如果该对上方法,在用JSON深拷贝时,会造成方法丢失.

var obj = {
            name: '石榴姐', age: 24, say() {
                console.log('看我丢了吗???');
            }
        };

        var obj1 = JSON.stringify(obj);
        obj1 = JSON.parse(obj1)
        console.log('obj1:', obj1);
        obj1.name = '小辣椒';
        console.log('obj', obj);
        console.log('obj1', obj1);

通过for-in遍历循环实现

var obj = {
            name: '石榴姐', age: 24, say() {
                console.log('看我丢了吗???');
            }
        };

        var obj1={};
        for(var attr in obj){
            obj1[attr]=obj[attr]
        }
        console.log('obj1:', obj1);
        obj1.say();
        obj1.name='小芳';
        console.log('obj:', obj);

通过object.assign实现

 var obj = {
            name: '石榴姐', age: 24, say() {
                console.log('看我丢了吗???');
            }
        };

        var obj1 = {};
        // 将obj合并到obj1上
        Object.assign(obj1, obj);
        console.log('obj1',obj1);
        obj1.age = 66;
        console.log('obj',obj);

通过ES6扩展运算符…

 var obj = { name: '五姑娘', age: 22 };
        var obj1 = { ...obj };
        console.log('obj1',obj1);
        obj1.age = 66;
        console.log('obj',obj);

浅拷贝

啥叫浅拷贝?

浅拷贝就是复制的那个对象含有与原来对象相同的值,他们存储在堆内存中,使用同一个地址,改变一个属性的值,另一个对象属性的值也会变

   var obj = {
      param1: '深浅拷贝', param2: 123, say() {
        console.log(this.param1);
      }
    };

当使用浅拷贝时,可以直接赋值

var obj1 = obj;
    obj1.param1 = '浅拷贝';
    console.log(obj);
    //会发现obj中的param1同样也更改了

持续更新中!!!