js 深拷贝和浅拷贝的方法

拷贝对象的方法

1. JSON.parse(JSON.stringify())

// data中定义的数据:
 obj: {
        name: '小明',
        person: {
          name: '小张',
          age: '18'
        },
        hobby: function() {
          console.log('footerball')   
        }
      }

// 使用:
let res = JSON.parse(JSON.stringify(this.obj))
console.log(res)     //{name: "小明", person: {…}}
// 注意点:
// 1. 如果你的对象里有函数, 函数无法被拷贝下来
// 2. 无法拷贝copyObj对象原型链上的属性和方法
// 3. 被拷贝的值为undefined时,会报错(开发中一般先判断被拷贝的值存不存在)

2. jQuery extend

var obj = {
    x: 1,
    y: {
        a: 1,
        b: 0,
        c: [1, 2, 3]
    }
};
var obj2 = $.extend({}, obj);
console.log(obj2)   //结果是拷贝后的数据,也是深拷贝

3. Object.create()

var obj = {
    x: 1,
    y: {
        a: 1,
        b: 0,
        c: [1, 2, 3]
    }
};

var obj2 = Object.create(obj);
console.log(obj2);  //结果是拷贝后的数据,也是深拷贝

4. 原型链继承

function Father() {
    this.say = "hi";
    this.fn = function () {
        return this.say;
    }
}

Father.prototype.eat = function () {
    console.log('吃');
}

function Son() {
    this.play = function () {
        console.log('play game');
    }
}

// 通过原型来继承父类的公共属性
Son.prototype = new Father();
var s = new Son();
console.log(s);
console.log(s.say); //hi
console.log(s.fn()); //hi

5. 递归

var obj = {
    x: 1,
    y: {
        a: 1,
        b: 0,
        c: [1, 2, 3]
    }
};

function getClass(o) { // 判断数据类型
    return Object.prototype.toString.call(o).slice(8, -1);
}

function deepCopy(obj) {
    var result, oClass = getClass(obj);
    // 判断传入的如果是对象，继续遍历
    if (oClass == "Object") result = {}; 
    // 判断传入的如果是数组，继续遍历
    else if (oClass == "Array") result = []; 
    else return obj; // 如果是基本数据类型就直接返回
    for (var i in obj) {
        var copy = obj[i];
        // 递归方法 ，如果对象继续变量obj[i],下一级还是对象，就obj[i][i]
        if (getClass(copy) == "Object") result[i] = deepCopy(copy); 
        // 递归方法 ，如果对象继续数组obj[i],下一级还是数组，就obj[i][i]
        else if (getClass(copy) == "Array") result[i] = deepCopy(copy); 
        else result[i] = copy; // 基本数据类型则赋值给属性
    }
    return result;
}
var obj2 = deepCopy(obj);
console.log(obj2);

6. for in

for(var i in this.obj) {
   console.log(i)    // 得到key值
   console.log(this.obj[i])   // 得到value
}

7. Object.assign()

// 1.Object.assign 方法用于对象的合并，将源对象(source)的所有可枚举属性，复制到目标对象上。
var target = {a: 0};
var source1 = {b: 1};
var source2 = {c: 2};
Object.assign(target, source1, source2);
console.log(target);  // 输出 {a: 0, b: 1, c: 2}

// 2. 如果目标对象与源对象有同名属性，或多个源对象有同名属性，则后面的属性会覆盖前面的属性。
var target = {a: 0, b: 1};
var source1 = {a:1, b: 2, c:3};
var source2 = {c:5};
Object.assign(target, source1, source2);
console.log(target); // 输出 {a: 1, b: 2, c: 5}

// 3.如果只有一个target(目标对象)，Object.assign会直接返回该对象，
var o = {a: 0};
Object.assign(o);
console.log(o);  // {a: 0}

// 4.如果该参数不是对象，则会先转成对象，然后返回。
var a = 1;
console.log(typeof Object.assign(2)) // object

// 5.对于null, undefined 来说 无法转换成Object，就会在控制台下报错
Object.assign(null);  // 报错
Object.assign(undefined);  // 报错

// 6.对象合并，如果源对象是null的话或者是undefined的话，那么对象合并的时候不会报错，直接会跳过该对象的合并，直接返回目标对象
var obj = {a: 1};
console.log(Object.assign(obj, null) === obj); // true
console.log(obj); // {a: 1}

var obj = {a: 1};
console.log(Object.assign(obj, undefined) === obj); // true
console.log(obj); // {a: 1}

7. Object.assign方法是浅拷贝
var o1 = {a: {b: 1} };
var o2 = Object.assign({}, o1);
o1.a.b = 2;
console.log(o2.a.b); // 2

// 但是如果对象的属性值不是一个对象的话，那么就不会影响该值,也就是深拷贝:
var o1 = {a: 1};
var o2 = Object.assign({}, o1);
o1.a = 2;
console.log(o1); // {a: 2}
console.log(o2.a); // 1

// 如果源对象和目标对象有同名属性的话，那么Object.assign会直接替换该属性。
var target = {a: {b: 1}};
var source1 = {a: {b: 'hello'}};
Object.assign(target, source1);
console.log(target); // {a: {b: 'hello'}}

Object.assign可以用来处理数组，但是会把数组视为对象。
var targetArrs = [1, 2, 3];
var sourceArrs = [4, 5];
Object.assign(targetArrs, sourceArrs);
console.log(targetArrs);  // [4, 5, 3]
// 如上代码，目标对象有1，2，3属性，源对象有4，5值，如果使用Object.assign的话，那么源对象的键4，5 和目标对象的1，2键是相同的，因此值直接替换掉。

8.  直接赋值也是浅拷贝

 data() {
    return {
      obj: {
        name: '小明',
      },
    }
  },
let info = this.obj
console.log(info)  //j结果相同

数组的拷贝方法

1. 使用=直接赋值实现浅拷贝

var newArr = arr;

2. 使用slice()实现浅拷贝

var newArr = arr.slice();

3. 使用concat()实现浅拷贝

var newArr = arr.concat();

slice()和concat()缺点：数组中的值如果是引用类型，就是浅拷贝
但是如果数组中的值是基本类型，就是深拷贝
类似 Object.assign方法

4. 使用JSON.stringify和JSON.parse实现深拷贝

let arr = [1, 2, 3]

let res = JSON.parse(JSON.stringify(arr))

5. 深拷贝的一个通用方法

var deepCopy = function(obj) {
  // 只拷贝对象
  if (typeof obj !== 'object') return;
  // 根据obj的类型判断是新建一个数组还是一个对象
  var newObj = obj instanceof Array ? [] : {};
  for (var key in obj) {
    // 遍历obj,并且判断是obj的属性才拷贝
    if (obj.hasOwnProperty(key)) {
      // 判断属性值的类型，如果是对象递归调用深拷贝
      newObj[key] = typeof obj[key] === 'object' ? deepCopy(obj[key]) : obj[key];
    }
  }
  return newObj;
}