js实现深拷贝和浅拷贝

3,102 阅读1分钟

浅拷贝:有拷贝的功能,但是只能拷贝一层,是浅拷贝。

一、使用展开运算符(也叫剩余运算符)...

let obj = {name:'gjf',age:{age:18}};
let newObj = {...obj};
obj.age.age = 25; //修改第二层的obj.age.age,newObj.age.age也会跟着变化
console.log(newObj) // {name:'gjf',age:{age:25}}

注意:数据的slice和concat方法也是浅拷贝,只能拷贝一层

深拷贝:你给我什么,我就返给你一个,返还的这个和你以前的那个是两个东西。

一、使用JSON.stringify()和JSON.parse()

原理:把一个对象转化成一个字符串,再把这个字符串转化成一个对象;

let obj = {name:'gjf',age:{age:18}};
let newObj = JSON.parse(JSON.stringify(obj));
obj.age.age = 25; //修改obj.age.age的值
console.log(newObj) //{name:'gjf',age:{age:18}} //并不影响newObj

使用这种方法有一些问题例如:

let obj = {name:'gjf',age:{age:18},a:/\d/,b:function(){},c:undefined};
let newObj = JSON.parse(JSON.stringify(obj));
obj.age.age = 25; //修改obj.age.age的值
console.log(newObj) //{name:'gjf',age:{age:18},a:{}} 会丢失值

注意:这种方式转不了正则、函数、时间和undefined,会丢失值;

二、实现深拷贝

实现深拷贝之前来点面试小知识

//null == undefined true     null === undefined  false
//[] == '' true              [] === ''   false
//双等是要先进行类型转化再比较所以是true,三等不进行类型转化直接比较所以是false

深拷贝方法:

// 数字 字符串 function是不需要拷贝的
function deepClone(value) {  
    if (value == null) return value;  
    if (typeof value !== 'object') return value;
    if (value instanceof RegExp) return new RegExp(value);  
    if (value instanceof Date) return new Date(value);  
    // 我要判断 value 是对象还是数组 如果是对象 就产生对象 是数组就产生数组  
    let obj = new value.constructor;  
    for(let key in value){    
        obj[key] = deepClone(value[key]); // 看一看当前的值是不是一个对象  
    }  
    return obj;
}

好了,我们的深拷贝方法就这样完成了,绝对好用!!!