js深拷贝与浅拷贝详解以及例子

深拷贝与浅拷贝

什么是浅拷贝

浅拷贝只拷贝一层，更深层次对象级别的只会拷贝引用（地址）

1. 第一种浅拷贝方法（slice）

var arr1=[1,2]
var arr2=arr1.slice();
arr1[0]=100
console.log(arr1);//[100,2]
console.log(arr2);//[1,2]

2. 第二种浅拷贝方法（concat）

var arr1=[1,2]
var arr2=arr1.concat();
arr1[0]=100
console.log(arr1);//[100,2]
console.log(arr2);//[1,2]

3. 第三种浅拷贝方法（扩展运算符…）

const obj1 = { a : 1, b : {c:1}}
var k = {...obj1}
obj1.b.c = 100000
console.log(obj1 );//{a: 1,b: {c: 100000}}
console.log(k);//{a: 1,b: {c: 100000}}

4. 第四种浅拷贝方法（forEach）

   var arr1 = [1, { a: 2 }]
   var arr2 = []
   arr1.forEach(item => {
       arr2.push(item)
   })

   arr1[1].a = 1000
   console.log(arr1);
   console.log(arr2);

5. 第五种浅拷贝方法（for of）

  var arr1 = [1, { a: 2 }]
  var arr2 = []
  for (item of arr1) {
      arr2.push(item)
  }

  arr1[1].a = 1000
  console.log(arr1);
  console.log(arr2);

6. 第六种浅拷贝方法（for in）

  var arr1 = [1, { a: 2 }]
  var arr2 = []
  for (key in arr1) {
      arr2.push(arr1[key])
  }

  arr1[1].a = 1000
  console.log(arr1);
  console.log(arr2);

7. 第七种浅拷贝方法（for循环）

 var arr1 = [1, { a: 2 }]
 var arr2 = []
 for (var i = 0; i < arr1.length; i++) {
     arr2.push(arr1[i])
 }

 arr1[1].a = 1000
 console.log(arr1);
 console.log(arr2);

什么是深拷贝

每一层都拷贝，最后拷贝出来的是一个全新的，和之前的完全没关系

1. 第一种深拷贝方法

  const obj1 = { a : 1, b : {c:1}}
  const obj2 = JSON.parse(JSON.stringify(obj1));
  obj1.b.c = 100;
  console.log(obj1);
  console.log(obj2); 

	注意：但是这个方法只有可以转成JSON格式的对象才可以这样用，像function没办法转成JSON，RegExp对象是无法通过这种方式深拷贝

2. 第二种深拷贝（封装好的函数）

 function deepCopy(newobj, oldobj) {
     for (var k in oldobj) {
         // 判断我们的属性值属于那种数据类型
         // 1. 获取属性值  oldobj[k]
         var item = oldobj[k];
         // 2. 判断这个值是否是数组
         if (item instanceof Array) {
             newobj[k] = [];
             deepCopy(newobj[k], item)
         } else if (item instanceof Object) {
             // 3. 判断这个值是否是对象
             newobj[k] = {};
             deepCopy(newobj[k], item)
         } else {
             // 4. 属于简单数据类型
             newobj[k] = item;
         }

     }
 }

3. 第三种深拷贝方法

function deepClone(obj = {}) {
    if (typeof obj !== 'object' || obj == null) {
        // obj 是 null ，或者不是对象和数组，直接返回
        return obj
    }

    // 初始化返回结果
    let result
    if (obj instanceof Array) {
        result = []
    } else {
        result = {}
    }

    for (let key in obj) {
        // 保证 key 不是原型的属性
        if (obj.hasOwnProperty(key)) {
            // 递归调用！！！
            result[key] = deepClone(obj[key])
        }
    }

    // 返回结果
    return result
}