Heim > Web-Frontend > js-Tutorial > Hauptteil

In diesem Artikel erhalten Sie eine kurze Analyse des Deep Copying und Shallow Copying in JavaScript-Arrays

青灯夜游
Freigeben: 2021-12-20 16:35:15
nach vorne
1962 Leute haben es durchsucht

Wenn wir JavaScript zum Bearbeiten von Arrays verwenden, müssen wir häufig ein Backup des Arrays erstellen. Der folgende Artikel führt Sie durch Deep Copy und Shallow Copy in JavaScript-Arrays. Ich hoffe, er ist hilfreich für Sie!

In diesem Artikel erhalten Sie eine kurze Analyse des Deep Copying und Shallow Copying in JavaScript-Arrays

Einführung in das tiefe Kopieren und flache Kopieren von Arrays. Zuerst werde ich die Datentypen überprüfen:

Datentypen: 1. code> boolean null undefiniert

  • Speichermethode: Grundlegende Datentypen werden im

    Stapelspeichernumber  string boolean  null undefined

    • 存储方式: 基本数据类型存储在栈内存
      变量存储的就是

    2、引用数据类型:function   数组   对象(下篇介绍)

    • 存储方式: 引用数据类型存储在堆内存
      变量存储的是地址。【相关推荐:javascript学习教程

    至于存储方式我们来分析分析:

    先给大家介绍介绍栈内存与堆内存,作为了解:

    • 栈内存:引擎执行代码时工作的内存空间,除了引擎,也用来保存基本值和引用类型值的地址。

    • 堆内存:用来保存一组无序且唯一的引用类型值,可以使用栈中的键名来取得。

    我们再来看:

       var a = 2;
            var b = a;
            b++;//3
            console.log(a); //2
    Nach dem Login kopieren

    分析分析,将a的值赋值给b,接着改变b的值,a的值没有受到影响。但是引用数据类型,那就不是这样了,赋值的是地址。

       var arr = [1,2,3] ;
            var arr2 = arr ;
            arr2.push(4) ;
            console.log(arr);   // arr发生了改变
    Nach dem Login kopieren

    分析分析,arr复制的是地址,何为地址,可以比作成一个房间,arr和arr2都是指向的这个房间,改变这个房间的结构,arr和arr2都会受到影响。如下图

    In diesem Artikel erhalten Sie eine kurze Analyse des Deep Copying und Shallow Copying in JavaScript-Arrays

    了解上面后,接着重点

    深复制与浅复制

    • 数组的浅复制:只复制了地址 (共享地址)
    • 数组的深复制:复制值
      遍历(把原数组中的值存入新的数组) var arr2 = [] ;
      slice() 截取数组中的所有值,得到的是一个新数组。 就是要在堆内存中开辟一个新的空间。

    数组的浅复制:

    只复制了地址 (共享地址)

       var arr = [1,2,3,4,5] ;
            // 数组的浅复制 --- 只是复制了地址 
            var arr2 = arr ;
        //改变其中一个数组,两个数组都会改变,
    Nach dem Login kopieren

    还是很简单理解浅复制的。

    数组的深复制:

    复制数组中的值

    1、定义一个新的空数组,遍历原数组并赋值给新数组

     var arr = [1, 2, 3, 4, 5]
            var arr3 = [];
            arr.forEach(function(v) {
                arr3.push(v)
            })
            console.log(arr3);
            arr3.push('a');
            console.log(arr, arr3);//arr[1,2,3,4,5],arr3[1,2,3,4,5,'a']
    Nach dem Login kopieren

    改变新数组中的值,原数组不会改变

    2、slice() 截取数组中的所有值,得到的是一个新数组

            var arr3 = arr.slice() ;
            console.log(arr3);
            arr3.push('a') ;
            console.log(arr3);//[1,2,3,4,5,'a']
            console.log(arr);//[1,2,3,4,5]
    Nach dem Login kopieren

    改变新数组中的值,原数组不会改变

    在这里提一嘴:

    基本数据类型传递是值 ,引用数据类型传递的是地址(形参和实参共享地址)

    难点难点,多维数组的深复制,以上提到的都是一维数组的深复制和浅复制

    二维数组:二维数组本质上是以数组作为数组元素的数组,即“数组的数组”,例如:arr=[[1,2,3],[1,2],[1,2,3,4]]
    分析以下代码,为二维数组的遍历,变量i,j代表的就是,下标为i元素(也就是数组)中的第 j+1个元素。

     var arr = [
                [1, 2, 3],
                [4, 5, 6],
                [2, 3, 4]
            ]
    
            for (var i in arr) {
                for (var j in arr[i]) {
                    console.log(arr[i][j]);
                }
            }
    Nach dem Login kopieren

    多维数组:三维及其以上的数组

    多维数组的深复制

    多维数组的深复制可不像一维数组那样好判断,因为你无法判断数组中的元素是否又是数组,数组中有数组,无止境,哈哈,所以就需要用到前面提到的递归
    用到的方法:Array.isArray(arr[i])
    gespeichert Variablen speichern

    Werte

2. Referenzdatentyp: Funktionsarrayobjekt (im nächsten Artikel vorgestellt)

🎜🎜Was die Speichermethode betrifft, analysieren wir sie:🎜🎜🎜Zuerst werde ich allen Stapelspeicher und Heapspeicher vorstellen, um Folgendes zu verstehen:🎜
  • 🎜Stapelspeicher: Der Speicherplatz, in dem die Engine beim Ausführen von Code arbeitet. Zusätzlich zur Engine wird er auch zum Speichern der Adressen von Grundwerten verwendet und Referenztypwerte. 🎜
  • 🎜Heapspeicher: Wird zum Speichern einer Reihe ungeordneter und eindeutiger Referenztypwerte verwendet, die über den Schlüsselnamen im Stapel abgerufen werden können. 🎜
🎜Schauen wir uns das noch einmal an: 🎜
<script>
        var arr = [1, 2, 3, 4, [5, 6, [7, 8]]];

        var arr2 = arr.slice();
        function deepArr(arr) {
            var newArr = [];
            for (var i = 0; i < arr.length; i++) {
                // newArr.push(arr[i])  这个arr[i]有可能还是一个数组
                if (Array.isArray(arr[i])) {
                    // 继续遍历数组 ,还是得到一个数组
                    var list = deepArr(arr[i]);
                    // 再把得到的数组放入newArr
                    newArr.push(list)
                } else {
                    newArr.push(arr[i]);
                }
            }
            return newArr
        }
        var res = deepArr(arr);
        res[4].push(&#39;a&#39;);
        console.log(res);//改变
        console.log(arr);//不改变
    </script>
Nach dem Login kopieren
🎜Analyse und Analyse, weisen Sie b den Wert von a zu und ändern Sie dann den Wert von b. Der Wert von a wird dadurch nicht beeinflusst. Bei Referenzdatentypen ist dies jedoch nicht der Fall. Es wird die Adresse zugewiesen. 🎜rrreee🎜 Die Analyse zeigt, dass arr eine Adresse kopiert. Sie kann mit einem Raum verglichen werden. Wenn die Struktur dieses Raums geändert wird, sind arr und arr2 betroffen. Wie unten gezeigt: In diesem Artikel erhalten Sie eine kurze Analyse des Deep Copying und Shallow Copying in JavaScript-Arrays 🎜

🎜Nachdem wir das oben Gesagte verstanden haben, kommen wir zu den wichtigsten Punkten🎜🎜🎜🎜Tiefe Kopie und flache Kopie🎜🎜
  • Flache Kopie des Arrays: nur die Adresse kopiert (gemeinsame Adresse)
  • Tiefe Kopie des Arrays: den Wert kopieren
    Traverse (den Wert im ursprünglichen Array im neuen Array speichern) var arr2 = [] ;
    slice() fängt alle Werte im Array ab und erhält ein neues Array. Es soll einen neuen Platz im Heapspeicher eröffnen.
🎜🎜Flache Kopie des Arrays: 🎜🎜🎜Nur die Adresse (gemeinsame Adresse) wird kopiert🎜rrreee🎜Es ist immer noch sehr einfach, flache Kopie zu verstehen. 🎜🎜🎜Tiefe Kopie des Arrays: 🎜🎜🎜Kopieren Sie die Werte im Array🎜🎜1. Definieren Sie ein neues leeres Array, durchlaufen Sie das ursprüngliche Array und weisen Sie dem neuen Array Werte zu.🎜rrreee🎜Ändern Sie die Werte Im neuen Array ändert sich das ursprüngliche Array nicht 🎜🎜2, 🎜slice()🎜 Fangen Sie alle Werte im Array ab und erhalten Sie ein neues Array🎜rrreee🎜Ändern Sie die Werte im neuen Array, dem ursprünglichen Array wird sich nicht ändern🎜🎜🎜Lassen Sie es mich hier erwähnen: 🎜🎜🎜Basic Der Datentyp wird als Wert übergeben, und der Referenzdatentyp wird als Adresse übergeben (der formale Parameter und der tatsächliche Parameter teilen sich die Adresse)🎜🎜🎜Die Schwierigkeit liegt in der tiefen Kopie des mehrdimensionalen Arrays. Wie oben erwähnt, handelt es sich bei allen tiefen Kopien und flachen Kopien um eindimensionale Arrays🎜🎜🎜🎜zwei- dimensionale Arrays:🎜Zweidimensionale Arrays sind im Wesentlichen Arrays mit Arrays als Array-Elementen, also „Arrays von Arrays“, zum Beispiel: arr= [[1,2,3],[1,2],[1,2 ,3,4]]
Analysieren Sie den folgenden Code, bei dem es sich um einen zweidimensionalen Array-Durchlauf handelt. Die Variablen i und j stellen den Index dar, der das j+1-Element im Element i ist (d. h. das Array). 🎜rrreee🎜🎜Mehrdimensionales Array🎜: Arrays mit drei Dimensionen und mehr🎜🎜🎜Tiefe Kopie eines mehrdimensionalen Arrays🎜🎜🎜Tiefe Kopie von Multi -dimensionales Array ist nicht wie ein dimensionales Array, da man nicht beurteilen kann, ob die Elemente im Array Arrays sind, endlos, haha, also muss man die erwähnte 🎜Rekursion🎜 verwenden früher.
Verwendete Methode: Array.isArray(arr[i]) Beurteilen Sie das Array und geben Sie einen booleschen Wert zurück. 🎜🎜Idee: Bestimmen Sie, ob die Elemente des mehrdimensionalen Arrays Arrays sind. Wenn ja, durchlaufen Sie das Array weiter und beurteilen Sie. Wenn nicht, können Sie die eindimensionale Array-Beurteilungsmethode verwenden, um tiefes Kopieren zu implementieren. 🎜rrreee🎜Weitere Programmierkenntnisse finden Sie unter: 🎜Programmiervideo🎜! ! 🎜

Das obige ist der detaillierte Inhalt vonIn diesem Artikel erhalten Sie eine kurze Analyse des Deep Copying und Shallow Copying in JavaScript-Arrays. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:juejin.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage