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的方法用起來實在是簡潔，高效