JS面试知识点5-浅拷贝&深拷贝

因为对象赋值的时候，复制的是地址值，所以会出现一方修改了，其他都被修改的问题。

浅拷贝就是为了解决这个问题。

let a = {age: 22};
let b = a;
a.age = 11;
console.log(b.age); //11

• 浅拷贝的方法：

1、 方法1： Object.assign()

let a = {age:22}
let b = Object.assign({},a);
a.age = 11;
console.log(b.age); //22

2、方法2：三点运算符

let a = {age: 22};
let b = { ...a };
a.age = 11;
console.log(b.age) //22

3、方法2: for-in

function clone (val) {
    let newVal = Array.isArray(val) ? [] : {};
    for(var i in val){newVal[i] = val[i]};
    return newVal;
};

4、浅拷贝的问题：问题是只能解决第一层的问题，如果第二层是对象则无法解决。所以需要使用深拷贝

let a = {age: 22, jobs:{name: 'FF'}};
let b = Object.assign({},a);
a.jobs.name = 'FE';
console.log(b.jobs.name) //FE

• 深拷贝的方法

1、方法1：JSON序列化（但问题是：会忽略undefined，Symbol，函数，对象进行循环引用会报错）

let obj = {
    a: 1,
    b: 'str',
    c: undefined,
    e: Symbol('e'),
    f: function(){console.log('f')}, 
    g: {a: 1},
} 

let newObj = JSON.parse(JSON.stringify(obj)); //{a: 1, b: "str"}
obj.g.a = 2;
console.log(newObj.g.a) //1


let obj = {
    a: 1,
    b: 'str',
    g: {a: 1},
} 
obj.c = obj.g;obj.g.b = obj.c;
let newObj = JSON.parse(JSON.stringify(obj)); //报错，不能对对象进行循环引用

2、方法2: 如果没有Symbol和函数，可以使用MessageChannel方法深拷贝；

// MessageChannel是异步的；
const cloneDeep = (o) => {
      return new Promise(resolve=>{
        const {port1,port2} = new MessageChannel();
        port1.onmessage = ()=>resolve(o)
        port2.postMessage(o); 
    })
};
const obj = {
    a: 1,
    b: 'str',
    c: undefined,
    //d: function(){console.log('d')}, 函数会报错
    e: {a: 'a'}
};
obj.g = obj.e;obj.e.a=obj.g; 
const test = async() => {
    const newObj = await cloneDeep(obj);
    console.log(newObj);
};
test(); //循环引用也没有问题

3、自己写深拷贝，需要考虑很多边界问题， DOM，原型链之类的。所以推荐使用lodash的深拷贝。

function deepClone (obj) {
    const isObject = (o) => {
        return (typeof o === 'object') && o !== null
   };
   if(!isObject(obj)){return obj};
   let newObj = Array.isArray(obj) ? [...obj] : {...obj};
   Reflect.ownKeys(newObj).forEach(key=>{
    newObj[key] = isObject(obj[key]) ? deepClone(obj[key]) : obj[key];
   });
   return newObj;
}

const objTest = {
    a: [1,2,3],
    b: {a:'a',b:'b'}    
}

const newO = deepClone(objTest);
objTest.b.a = 1;
console.log(newO.b.a)

//判断属性值是否为对象，是则递归