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

前端数据浅拷贝和深拷贝

程序员文章站 2024-03-23 13:07:28
...

浅拷贝:就是一个新变量引用其他数据,如果变量数值变动,被引用的数据也会被改变,就是(一家人就是要整整齐齐的)/
深拷贝:就是引用其他数据,如果变量数值变动,被引用的数据不会被改变(翅膀硬了,单飞)

var a,b;
a=1;
b=a;
console.log('测试',a)
console.log('测试',b)
b=12;
console.log('测试',a)
console.log('测试',b)

前端数据浅拷贝和深拷贝
从上面代码可以看出,基本类型的数据是深拷贝 名值存储在栈内存中,当你b=a复制时,栈内存会新开辟一个内存

var a={
  name:'流川枫'
}
b=a;
console.log('测试',a)
console.log('测试',b)
b.name='吴彦祖';
console.log('测试',a)
console.log('测试',b)

前端数据浅拷贝和深拷贝
从上面代码可以看出,引用类型的数据是浅拷贝(数组也是) 名存在栈内存中,值存在于堆内存中,但是栈内存会提供一个引用的地址指向堆内存中的值

实现深拷贝的方法
数组类型 使用concat

var d=['帅哥']
var e=[]
e=e.concat(d);
console.log('测试',d)
console.log('测试',e)
e[0]='美女';
console.log('测试',d)
console.log('测试',e)

前端数据浅拷贝和深拷贝

对象类型和数组类型 使用SON.parse()和 JSON.stringify()

var a={
  name:'流川枫'
}
var b=JSON.parse(JSON.stringify(a));
console.log('测试',a)
console.log('测试',b)
b.name='吴彦祖';
console.log('测试',a)
console.log('测试',b)

前端数据浅拷贝和深拷贝
使用SON.parse()和 JSON.stringify()和concat又有什么区别呢
假设现在有这么一个数据

var d=['帅哥',['小红','小明']]
var e=[]
e=e.concat(d)
console.log('测试',d)
console.log('测试',e)
e[0]='美女';
e[1][1]='小刚'
console.log('测试',d)
console.log('测试',e)

前端数据浅拷贝和深拷贝
从图中可以看到数据的第一层做了深度拷贝但是第二层就变成了浅拷贝
使用SON.parse()和 JSON.stringify()呢????

var d=['帅哥',['小红','小明']]
var e=[]
var e=JSON.parse(JSON.stringify(d));
console.log('测试',d)
console.log('测试',e)
e[0]='美女';
e[1][1]='小刚'
console.log('测试',d)
console.log('测试',e)

前端数据浅拷贝和深拷贝
解决了 233333333~~~~~~~

也可以将深拷贝封装成一个方法 直接调用

function deepClone(obj){
    let objClone = Array.isArray(obj)?[]:{};
    if(obj && typeof obj==="object"){
        for(key in obj){
            if(obj.hasOwnProperty(key)){
                //判断ojb子元素是否为对象,如果是,递归复制
                if(obj[key]&&typeof obj[key] ==="object"){
                    objClone[key] = deepClone(obj[key]);
                }else{
                    //如果不是,简单复制
                    objClone[key] = obj[key];
                }
            }
        }
    }
    return objClone;
}   
 let newValue = {
      name: '新的值'
    }
    oldValue = deepClone(a);
    oldValue.name = '深拷贝后数值'
    console.log('递归', newValue, oldValue);

前端数据浅拷贝和深拷贝
Ending…

相关标签: 面试总结