javascript深拷贝

在js中，数组和对象的复制 如果是用 = 号来进行复制，那只是浅拷贝。

如下图：对arr的修改，会影响arr2的值，这显然在绝大多数情况下，并不是我们所需要的结果。

var arr = [1,2,3,4]
var arr2 = arr
arr[0] =  5;
console.log(arr)
console.log(arr2) 

数组的几种方法深拷贝总结

var arr = [3,4,1,6,4]//准备好一个数组
 
var arr2 = arr.concat()//concat合并方法
 
var arr4 = JSON.parse(JSON.stringify(arr))//用JSON方法转换
 
var arr5 = arr.slice(0)//slice拷贝方法
 
var [...arr6] =arr;//扩展运算符方法
 
var arr7 = copyArr(arr)//万能的for循环
    function copyArr(arr){
        let res = []
        for(let i=0;i<arr.length;i++){
            res.push(arr[i])
        }
        return res 
    }
 
 
//冒泡排序 
   for(var j = 0;j<arr.length-1;j++){ 遍历数组，arr.length - 1表示要遍历的次数
       for(var i = 0;i<arr.length-1-j;i++){
        // i<arr.length-1-j 是因为当第一次，找到最大数，放到最后，那么下一次，遍历的时候就不用吧最后一位算上，因为他已经是最大的
            var done = true;//设置一个标志位，减少不必要的循环
            if(arr[i]>arr[i+1]){//当前数字大于后一位数组 位置调换
                var temp = arr[i]
                arr[i] =arr[i+1]
                arr[i+1] = temp
                done = false
                
            }
        }
        if(done){//调换位置后跳出本次循环 
           break;//减少不必要的排序，提高性能。
        }
   }
//冒泡排序思想：每一次对比相邻两个数据的大小，小的排在前面，如果前面的数据比后面的大就交换这两个数的位置
console.log('经过排序的原数组：'+arr)
console.log('concat方法：'+arr2)
console.log('转换为json再转为对象：'+arr4)
console.log('slice方法：'+arr5)
console.log('ES6扩展运算符方法：'+arr6)
console.log('万能的for方法：'+arr7)

上面实现的几种方式写在了一起 搞不明白方法的可以看下我前几天发的数组方法帖子。

对象的深拷贝

对象的深拷贝相比数组也没有困难许多，列举三种个方法。

1，万能的for循环

var obj = {
  name: 'wayne',
  sex: 'man',
  old: '23'
}
var obj2 = copyObj(obj)
function copyObj(obj) {
  let res = {}
  for (var key in obj) {
    res[key] = obj[key]
  }
  return res
}

2，JSON方法

var obj = {
  name: 'wayne',
  sex: 'man',
  old: '23'
}
var obj2 = JSON.parse(JSON.stringify(obj))
//原理没什么好解释的，实在是够简单粗暴

JSON.stringify()方法将对象转化为字符串，但只会处理简单属性和简单属性数组，constructor属性丢失了

3，ES6扩展运算符

var obj = {
  name: 'wayne',
  sex: 'man',
  old: '23'
}
var { ...obj2 } = obj

用扩展运算符对数组或者对象进行拷贝时，只能扩展和深拷贝第一层的值，对于第二层极其以后的值，扩展运算符将不能对其进行打散扩展，也不能对其进行深拷贝，即拷贝后和拷贝前第二层中的对象或者数组仍然引用的是同一个地址，其中一方改变，另一方也跟着改变。

同上Object.assign是浅拷贝,第二层拷贝的只是引用，无论你是改变拷贝前的obj3.hobby还是改变拷贝后的obj4.hobby，另一个都会随之变化。

重点

上面几种对象的深拷贝方式都有缺陷 copyObj和es6运算符 并不能解决多层嵌套情况， json强制转换方式不能解决function和undefined,还有一些Object.assgin(), 数组的slice()这些，这些只深复制了基本类型数据类型，不是真正意义的深复制，当然，如果要复制的对象或者数组都是简单数据类型，那就大胆用吧。
所谓方法，没有最优，只有最合适的，所以选择最合适的就ok啦。

封装了一个方法 实现deepCopy 兼容性比较高

{
    function isArray(val) {//检测数组
        //通过Object.prototype.toString.call来精准检测类型 
        return Object.prototype.toString.call(val) === '[object Array]';
    }
    function isObject(val) {//检测对象
        return typeof val === 'object' && val !== null;
    }
 
    function deepCopy(obj2) {//递归深层copy
        /**
         * 把一个对象递归拷贝给另外一个对象
         * 源对象与拷贝后的对象没有引用关系
         */
        var obj = isArray(obj2) ? [] : {};
        for (var property in obj2) {
            // 如果当前拷贝的数据还是一个对象的话，那么继续调用
            // deepCopy 进行二次拷贝
            // 递归
            if (isObject(obj2[property])) {
                obj[property] = deepCopy(obj2[property]);
            } else {
                obj[property] = obj2[property];
            }
        }
        return obj;
    }
}