javascript的深拷贝方法总结（主要针对数组和对象进行整理）

回顾一下我们总结的常用的深拷贝完整方案

• 实现一个函数clone，可以对JavaScript中的5种主要的数据类型（包括Number、String、Object、Array、Boolean）进行值复制

 function clone(obj){
        var result;
        switch(typeof obj){
            case 'undefined':
            break;
            case 'string':
            result = obj+'';
            break;
            case 'number':
            result = obj-0;
            break;
            case 'boolean':
            result =obj;
            break;
            case 'object':
                if(obj ===null){
                    result = null;
                } else {
                    if(Object.prototype.toString.call(obj).slice(8,-1)==='Array'){
                        result=[];
                        for(var i=0;i<obj.length;i++){
                            result.push(clone(obj[i]));
                        }
                    }else{
                        result={};
                        for(var k in obj){
                            result[k]=clone(obj[k]);
                            }
                        }
                };
                break;
             default:
                 result = obj;
                 break;
            
        }
        return result
    }

对数组深拷贝的简单方法总结

• for 循环实现数组的深拷贝

var arr = [1,2,3,4,5]；//只适应单层数组结构
var arr2 = copyArr(arr)
function copyArr(arr) {
    let res = []
    for (let i = 0; i < arr.length; i++) {
     res.push(arr[i])
    }
    return res
}

• slice 方法实现数组的深拷贝

var arr = [1,2,3,4,5] //只适应单层数组结构
var arr2 = arr.slice(0)
console.log(arr)   //(5) [1, 2, 5, 4, 5]
console.log(arr2)  //(5) [1, 2, 5, 4, 5]

• concat 方法实现数组的深拷贝

var arr = [1,2,3,4,5] //只适应单层数组结构
var arr2 = arr.concat()
console.log(arr)   //(5) [1, 2, 5, 4, 5]
console.log(arr2)  //(5) [1, 2, 5, 4, 5]

• ES6扩展运算符实现数组的深拷贝

var arr = [1,2,3,4,5] //只适应单层数组结构
var [ ...arr2 ] = arr
console.log(arr)   //(5) [1, 2, 5, 4, 5]
console.log(arr2)  //(5) [1, 2, 5, 4, 5]

对象的深拷贝的简单方法总结

• for循环实现对象的深拷贝

 //如果包含属性值是数组，无法深层拷贝数组里面的数据
var obj = {
  name: 'jingjing',
  sex: 'girl',
  old: '18'
}
var obj2 = copyObj(obj)
function copyObj(obj) {
  let res = {}
  for (var key in obj) {
    res[key] = obj[key]
  }
  return res
}

• 转换成json再转换成对象实现对象的深拷贝（对象里面不包含函数的情况下使用,注意这种直接粗暴的方法只能拷贝json格式数据对象，函数会丢失）

var obj = {
  name: jingjing',
  sex: 'girl',
  old: '18'
}
var obj2 = JSON.parse(JSON.stringify(obj))

• 扩展运算符实现对象的深拷贝（随着es6的逐渐推广，此招儿推荐使用）

//如果包含的属性值是数组，无法深层拷贝数组里面的数据
var obj = {
  name: 'jingjing',
  sex: 'girl',
  old: '18'
}
var { ...obj2 } = obj
obj.old = '22'
console.log(obj)  //{name: "jingjing", sex: "girl", old: "22"}
console.log(obj2) //{name: "jingjing", sex: "girl", old: "18"}

项目中常用到的深拷贝方法大概先总结到这里，有些es6的方法用起来实在是简洁，高效