深入解析js(深浅拷贝)

请你简述js的深浅拷贝？

浅拷贝 只是拷贝地址
深拷贝 是拷贝内容
浅拷贝 只是简单的指针赋值 不会影响原来的
深拷贝 指针赋值 且内容拷贝 会影响原来的
深拷贝是开辟一个新的栈 两个对象对应两个不同的地址 修改一个对象的属性 不会改变另一个对象的属性

对于字符串类型 浅拷贝是对值的复制
对于对象来说 浅拷贝是对对象地址的复制
举例 A,B两个对象 A=B 改变A的属性 B也相对会发生改变因为AB指向的是同一个地址

浅拷贝

方法1：Object.assign() es6

        //数组
        let arr = [1, 2, 3, [10, 20, 30]];
        let newArr = Object.assign(arr);
        newArr[3][0] = 100;
        console.log(arr);
        console.log(newArr);
        // [ 1, 2, 3, [ 100, 20, 30 ] ]
        // [ 1, 2, 3, [ 100, 20, 30 ] ]


        //对象
        let obj = { a: 1, b: 2, c: { m: 10, n: 20 } }
        let newObj = Object.assign(obj); 
        newObj.c.m = 100;
        console.log(obj);
        console.log(newObj);
        // { a: 1, b: 2, c: { m: 100, n: 20 } }
        // { a: 1, b: 2, c: { m: 100, n: 20 } }   
复制代码

方法2：扩展运算符 es6新增方法儿

        //数组
        let arr = [1, 2, 3, [10, 20, 30]];
        let newArr = [...arr];
        newArr[3][0] = 100;
        console.log(arr);
        console.log(newArr);
        // [ 1, 2, 3, [ 100, 20, 30 ] ]
        // [ 1, 2, 3, [ 100, 20, 30 ] ]


        //对象
        let obj = { a: 1, b: 2, c: { m: 10, n: 20 } }
        let newObj = { ...obj };
        newObj.c.m = 100;
        console.log(obj);
        console.log(newObj);
        // { a: 1, b: 2, c: { m: 100, n: 20 } }
        // { a: 1, b: 2, c: { m: 100, n: 20 } }
复制代码

方法3：遍历

        //数组
        let arr = [1, 2, 3, [10, 20, 30]];
        let newArr = [];
        arr.forEach((item) => {
        newArr.push(item);
        })
        newArr[3][0] = 100;
        console.log(arr);
        console.log(newArr);
        // [ 1, 2, 3, [ 100, 20, 30 ] ]
        // [ 1, 2, 3, [ 100, 20, 30 ] ]

        //对象
        let obj = { a: 1, b: 2, c: { m: 10, n: 20 } }
        let newObj = {};
        for(let key in obj){
        newObj[key] = obj[key];
        }
        newObj.c.m = 100;
        console.log(obj);
        console.log(newObj);
        // { a: 1, b: 2, c: { m: 100, n: 20 } }
        // { a: 1, b: 2, c: { m: 100, n: 20 } }   
复制代码

深拷贝

方法1：JSON.parse() + JSON.stringify()

        let arr = [1, 2, 3, [10, 20, 30]];
        let newArr = JSON.parse(JSON.stringify(arr));
        newArr[3][0] = 100;
        console.log(arr);
        console.log(newArr);
        // [ 1, 2, 3, [ 10, 20, 30 ] ]
        // [ 1, 2, 3, [ 100, 20, 30 ] ]
复制代码

方法2： …

        var a= [1,2]
        var b =[...a] 
        b[0]=100
        console.log(a) //[1,2]
        console.log(b) //[100,2]  
复制代码

方法3： 循环

        var a =  [1,2]
        var a1 = []
        a.forEach(function(item,index){
          a1.push(item)
        })
        a[0] = 100
        console.log(a1) //[1,2]
        console.log(a) // [100,2]
复制代码

str 转 arr

      var a = [{a:1}]
      var obj= JSON.stringify(a)//arr转str
      console.log(obj)     //  [{"a":1}]   //黑色为str
复制代码

面试题 手写一个深拷贝函数

function deepClone(obj) {
  function isObject(para) {
    return (typeof para === "object" || typeof para === "function") && para !== null;
  }

  if (!isObject(obj)) {
    return obj;
  }
  let cloneObj = Array.isArray(obj) ? [] : {};
  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      cloneObj[key] = isObject(obj[key]) ? deepClone(obj[key]) : obj[key];
    }
  }
  return cloneObj;                       
}
let arr = [1, 2, 3, [10, 20, 30]];
let newArr = deepClone(arr);
newArr[3][0] = 100;
console.log(arr);
console.log(newArr);
// [ 1, 2, 3, [ 10, 20, 30 ] ]
// [ 1, 2, 3, [ 100, 20, 30 ] ]

let obj = { a: 1, b: 2, c: { m: 10, n: 20 } }
let newObj = deepClone(obj);
newObj.c.m = 100;
console.log(obj);
console.log(newObj);
// { a: 1, b: 2, c: { m: 10, n: 20 } }
// { a: 1, b: 2, c: { m: 100, n: 20 } }
复制代码