快捷導(dǎo)航

JavaScript實(shí)現(xiàn)淺拷貝與深拷貝的方法分析

更新時(shí)間：2018年07月05日 08:42:57 作者：king-w

這篇文章主要介紹了JavaScript實(shí)現(xiàn)淺拷貝與深拷貝的方法,結(jié)合實(shí)例形式總結(jié)分析了JavaScript淺拷貝與深拷貝的定義與使用方法,需要的朋友可以參考下

本文實(shí)例講述了JavaScript實(shí)現(xiàn)淺拷貝與深拷貝的方法。分享給大家供大家參考，具體如下：

平時(shí)使用數(shù)組復(fù)制時(shí)，我們大多數(shù)會使用‘='，這只是淺拷貝，存在很多問題。比如

let arr = [1,2,3,4,5];
let arr2 = arr;
console.log(arr) //[1, 2, 3, 4, 5]
console.log(arr2) //[1, 2, 3, 4, 5]
arr[0] = 6;
console.log(arr) //[6, 2, 3, 4, 5]
console.log(arr2) //[6, 2, 3, 4, 5]
arr2[4] = 7;
console.log(arr) //[6, 2, 3, 4, 7]
console.log(arr2) //[6, 2, 3, 4, 7]

很明顯，淺拷貝下，拷貝和被拷貝的數(shù)組會相互受到影響。所以，必須要有一種不受影響的方法，那就是深拷貝。

深拷貝的實(shí)現(xiàn)方式有很多種。

一、for循環(huán)實(shí)現(xiàn)深拷貝

//for循環(huán)copy
function copy(arr) {
    let cArr = []
    for(let i = 0; i < arr.length; i++){
      cArr.push(arr[i])
    }
    return cArr;
}
let arr3 = [1,2,3,4];
let arr4 = copy(arr3) //[1,2,3,4]
console.log(arr4) //[1,2,3,4]
arr3[0] = 5;
console.log(arr3) //[5,2,3,4]
console.log(arr4) //[1,2,3,4]

二、slice方法實(shí)現(xiàn)深拷貝

//slice實(shí)現(xiàn)深拷貝
let arr5 = [1,2,3,4];
let arr6 = arr5.slice(0);
arr5[0] = 5;
console.log(arr5); //[5,2,3,4]
console.log(arr6); //[1,2,3,4]

三、concat實(shí)現(xiàn)深拷貝

//concat實(shí)現(xiàn)深拷貝
let arr7 = [1,2,3,4];
let arr8 = arr7.concat();
arr7[0] = 5;
console.log(arr7); //[5,2,3,4]
console.log(arr8); //[1,2,3,4]

四、es6擴(kuò)展運(yùn)算實(shí)現(xiàn)深拷貝

//es6擴(kuò)展運(yùn)算實(shí)現(xiàn)深拷貝
let arr9 = [1,2,3,4];
let [...arr10] = arr9;
arr9[0] = 5;
console.log(arr9) //[5,2,3,4]
console.log(arr10) //[1,2,3,4]

五、對象的循環(huán)深拷貝

//  循環(huán)copy對象
let obj = {
    id:'0',
    name:'king',
    sex:'man'
}
let obj2 = copy2(obj)
function copy2(obj) {
    let cObj = {};
    for(var key in obj){
      cObj[key] = obj[key]
    }
    return cObj
}
console.log(obj) //{id: "0", name: "king", sex: "man"}
console.log(obj2) //{id: "0", name: "king", sex: "man"}

六、對象轉(zhuǎn)換成json實(shí)現(xiàn)深拷貝

//轉(zhuǎn)換成json
let obj3 = JSON.parse(JSON.stringify(obj));
console.log(obj3) //{id: "0", name: "king", sex: "man"}

七、es6擴(kuò)展運(yùn)算實(shí)現(xiàn)深拷貝

let {...obj4}= obj
console.log(obj4) //{id: "0", name: "king", sex: "man"}

八、通用深拷貝

var clone = function (v) {
    var o = v.constructor === Array ? [] : {};
    for(var i in v){
      o[i] = typeof v[i] === "object" ? clone(v[i]) : v[i];
    }
    return o;
}

總結(jié)：深刻理解javascript的深淺拷貝，可以靈活的運(yùn)用數(shù)組，并且可以避免很多bug。

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《javascript面向?qū)ο笕腴T教程》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

希望本文所述對大家JavaScript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: