浅拷贝和深拷贝

先写一个浅拷贝

  function fun () {
    let obj1 = {
        a:111,
        b:222,
        c:333,
        e:[1,[2,3]]
     }
    let str = JSON.stringify(obj1);
    let obj2 = JSON.parse(str);
    obj2.a = 5;
    obj2.e[1] = ['周瑜','诸葛亮'];
    console.log(obj1);
    console.log(obj2);
 }
        
 fun();

 

        直接拿obj1的值，会报错，因为JSON.parse是将一个json字符串转换为一个对象;

//报错信息：
Uncaught SyntaxError: Unexpected token o in JSON at position 1

        而obj1只是一个对象，可以使用JSON.stringify()将对象转换为一个字符串，然后再使用JSON.parse();

结果：

深拷贝：

写法一：

vue可以取用

// 深拷贝
 function deepClone (target) {
     let result;
     if (typeof target === 'object') {
        if (Array.isArray(target)) {
           result = [];
           for (let i in target) {
              result.push(deepClone(target[i]))
           }
        } else if (target === null) {
          result = null;
        } else if (target.constructor === RegExp) {
          result = target;
        } else {
        //普通对象  {}
          result = {};
        for (let i in target) {
          result[i] = deepClone(target[i]);
       }
                }
    } else {
       result = target;
    };
     return result;
};

        var obj = {
            a:{
                0:1,
                1:2,
                3:null
            },
            b:[
                {
                    0:22,
                    1:33,
                    2:44
                }
            ],
            c:function () {
                console.log(this.a);
            }
        }
        var obj2 = deepClone(obj);

结果：

写法二：

如果用React     可以直接取用

/**
 * 深拷贝，支持常见类型
 */
export default function deepClone(values) {
  let copy

  // Handle the 3 simple types, and null or undefined
  if (null === values || "object" !== typeof values) { return values; }

  // Handle Date
  if (values instanceof Date) {
    copy = new Date();
    copy.setTime(values.getTime());
    return copy;
  }

  // Handle Array
  if (values instanceof Array) {
    copy = [];
    for (let i = 0, len = values.length; i < len; i++) {
      copy[i] = deepClone(values[i]);
    }
    return copy;
  }

  // Handle Object
  if (values instanceof Object) {
    copy = {};
    for (const attr in values) {
      if (values.hasOwnProperty(attr)) {
        copy[attr] = deepClone(values[attr]);
      }
    }
    return copy;
  }

  throw new Error("Unable to copy values! Its type isn't supported.");
}

深拷贝的意义就是重新拷贝一份新的进行处理，不改变原始数据。

浅拷贝，只能对第一层的数据进行处理，如果深层嵌套的话，就无法实现。