數(shù)組的深淺復(fù)制

由于數(shù)組不是js的基本類型,我們在對數(shù)組進行備份,如果只是簡單的將它賦值給其他變量,那么我們只要改變其中任何一個,其他的變量的數(shù)組也會跟著改變。實際應(yīng)用中就會產(chǎn)生bug

    // 淺復(fù)制
    var arr = ["one","two","three"];
    var arrto = arr;
    console.log(arr, arrto); // ["one","two","three"] ["one","two","three"]
    arrto[0] = 1;
    console.log(arr, arrto); // [1,"two","three"] ["one","two","three"]

改變數(shù)組arrto,arr也會受到影響,像這種直接賦值數(shù)組的方式就是淺復(fù)制,引發(fā)這種現(xiàn)象的原因是因為數(shù)組是引用數(shù)據(jù)類型,arrto = arr 是將arr數(shù)組的引用地址傳遞給了 arrto,arrto 與 arr 指向的是同一個數(shù)組。要避免這類情況發(fā)生我們可以 對數(shù)組進行深復(fù)制

    // 深復(fù)制
    var arr = ["one","two","three"];
    var arrto = [];
    for (var i = 0; i < arr.length; i++) {
        arrto[i] = arr[i];
    }
    console.log(arr, arrto); // ["one","two","three"] ["one","two","three"]
    arrto[0] = 1;
    console.log(arr, arrto); // ["one","two","three"] [1,"two","three"]

arr數(shù)組中的每個元素都是字符串,屬于js的基本類型,可以直接傳遞值,遍歷數(shù)組arr將數(shù)組中的每個元素傳給新數(shù)組arrto就能實現(xiàn)數(shù)組的深復(fù)制。
使用一些js的函數(shù)也能實現(xiàn)數(shù)組的深復(fù)制

使用js內(nèi)置函數(shù)實現(xiàn)深復(fù)制
1.slice 可以從已有的數(shù)組中返回選定的元素,且返回的是一個新數(shù)組

    var arr = ["one","two","three"];
    var arrto = arr.slice(0);
    console.log(arr, arrto); // ["one","two","three"] ["one","two","three"]
    arrto[0] = 1;
    console.log(arr, arrto); // ["one","two","three"] [1,"two","three"]

使用slice返回新數(shù)組后改變arrto的值,arr并未改變

2.concat : 連接兩個或多個數(shù)組,返回新數(shù)組

    var arr = ["one","two","three"];
    var arrto = arr.concat([]);
    console.log(arr, arrto); // ["one","two","three"] ["one","two","three"]
    arrto[0] = 1;
    console.log(arr, arrto); // ["one","two","three"] [1,"two","three"]

3.map :返回一個由原數(shù)組中的每個元素調(diào)用一個指定方法后的返回值組成的新數(shù)組。

    var arr = ["one","two","three"];
    var arrto = arr.map(ele=>ele);
    console.log(arr, arrto); // ["one","two","three"] ["one","two","three"]
    arrto[0] = 1;
    console.log(arr, arrto); // ["one","two","three"] [1,"two","three"]

總結(jié):數(shù)組由于不是js的基本類型,不能進行直接傳值,需要遍歷數(shù)組的每一個基本類型的元素傳值,最后構(gòu)建新的數(shù)組。與數(shù)組類似 ,js的對象也直接復(fù)制也會產(chǎn)生與數(shù)組相同的問題,要實現(xiàn)深拷貝,需遍歷對象的每個屬性。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 數(shù)組的定義 數(shù)組是按序號排列的一組值,每個值的位置都有編號(從0開始)。數(shù)組本質(zhì)上是一種特殊的對象。它的鍵名是按(...
    Allin_Lin閱讀 676評論 0 0
  • 由于最近都在freecodecamp上刷代碼,運用了很多JavaScript數(shù)組的方法,因此做了一份關(guān)于JavaS...
    2bc5f46e925b閱讀 2,177評論 0 16
  • 來源:NumPy Tutorial - TutorialsPoint 譯者:飛龍 協(xié)議:CC BY-NC-SA 4...
    布客飛龍閱讀 33,562評論 6 97
  • 1、假消息攻擊是指利用網(wǎng)絡(luò)協(xié)議設(shè)計中的安全缺陷,通過發(fā)送偽裝的數(shù)據(jù)包達到欺騙目標、從中獲利的目的。 是一種內(nèi)網(wǎng)滲透...
    minlover閱讀 1,725評論 0 5
  • 那句話怎么說來著“管理無大事,小事都解決好了就沒事了,小事解決不好全是大事”。 細節(jié)很重要,細節(jié)決定了一件...
    姜楊A(yù)da閱讀 387評論 0 0

友情鏈接更多精彩內(nèi)容