この記事では、JavaScript 配列の深いコピーと浅いコピーについて簡単に分析します。-jsチュートリアル-php.cn

この記事では、JavaScript 配列の深いコピーと浅いコピーについて簡単に分析します。

青灯夜游

リリース： 2021-12-20 16:35:15

転載

1959 人が閲覧しました

JavaScript を使用して配列を操作する場合、多くの場合、配列をバックアップする必要があります。次の記事では、JavaScript 配列の深いコピーと浅いコピーについて説明します。

この記事では、JavaScript 配列の深いコピーと浅いコピーについて簡単に分析します。

#配列のディープコピーとシャローコピーを紹介します。まず、データ型について確認します。

データ型

1. 基本的なデータ型:

number string boolean null 未定義

スタックメモリに格納されます変数には
値

2 が格納されます。参照データ型:関数配列オブジェクト (次の記事で紹介)

ヒープメモリに格納されます変数には
アドレス##が格納されます＃。 [関連する推奨事項: JavaScript 学習チュートリアル ]

ストレージ方法については、分析してみましょう: #最初に、皆さんに理解していただくために、スタックメモリとヒープメモリについて紹介しましょう:

スタックメモリ: コードを実行するときにエンジンが動作するメモリ空間。エンジンに加えて、基本値と参照型値の保存にも使用されます。

ヒープメモリ: 順序付けされていない一意の参照型値のセットを保存するために使用されます。これらの値は、スタック内のキー名を使用して取得できます。
もう一度見てみましょう:

   var a = 2;
        var b = a;
        b++;//3
        console.log(a); //2

ログイン後にコピー

分析と分析、a の値を b に代入し、次に b の値を変更すると、a の値は影響を受けません。ただし、参照データ型の場合はこの限りではなく、割り当てられるのはアドレスです。

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

ログイン後にコピー

分析と分析、arr がコピーするものはアドレスです。アドレスとは何ですか?それは部屋に喩えられます。arr と arr2 は両方ともこの部屋を指します。この部屋の構造が変更された場合、arrそして arr2 が影響を受けます。以下に示すように、

この記事では、JavaScript 配列の深いコピーと浅いコピーについて簡単に分析します。上記を理解した後、

ディープコピーとシャローコピー#に焦点を当てます。

##配列の浅いコピー: アドレス (共有アドレス) のみがコピーされます

配列の深いコピー: 値をコピーします

slice() は配列内のすべての値をインターセプトし、新しい配列を取得します。ヒープメモリに新しい領域を開くことです。
配列の浅いコピー:

アドレス (共有アドレス) のみがコピーされます

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

ログイン後にコピー

それでも浅いものを理解するのは非常に簡単ですコピー。

配列のディープコピー:

配列内の値をコピーします1. 新しい空の配列を定義し、元の配列を走査します配列を作成し、新しい配列に値を割り当てます。 Array

 var arr = [1, 2, 3, 4, 5]
        var arr3 = [];
        arr.forEach(function(v) {
            arr3.push(v)
        })
        console.log(arr3);
        arr3.push(&#39;a&#39;);
        console.log(arr, arr3);//arr[1,2,3,4,5],arr3[1,2,3,4,5,&#39;a&#39;]

ログイン後にコピー

新しい配列の値を変更します。元の配列は変更されません。

slice()

すべてをインターセプトします配列内の値を取得し、新しい配列を取得します

        var arr3 = arr.slice() ;
        console.log(arr3);
        arr3.push(&#39;a&#39;) ;
        console.log(arr3);//[1,2,3,4,5,&#39;a&#39;]
        console.log(arr);//[1,2,3,4,5]

ログイン後にコピー

新しい配列の値を変更します。元の配列は変更されません

ここで触れておきます:

基本データ型は値渡し、参照データ型はアドレス(仮引数と実引数の共有アドレス)を渡す

##難点と難点、多次元配列のディープコピー、上記のものはすべてディープコピーとシャローコピーです

2 次元配列:2 次元配列は本質的に配列要素として配列を含む配列、つまり「配列の配列」。例: arr=[ [1,2,3],[1,2],[1,2,3,4]]2 次元配列のトラバーサルである次のコードを分析します。変数 i と j は表し、添え字は i 要素 (つまり、配列) の j 番目の要素です。

 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]);
            }
        }

ログイン後にコピー

多次元配列: 3 次元以上の配列

##多次元配列のディープコピー

多次元配列のディープコピーは、配列内の要素が配列であるかどうかを判断できないため、1 次元配列ほど判断するのは簡単ではありません。配列には配列が存在します。前述の 再帰を使用します。使用するメソッド: Array.isArray(arr[i])

配列を判定し、ブール値を返します。

アイデア: 多次元配列の要素が配列であるかどうかを判断します。配列である場合は、引き続き配列を走査して判断します。そうでない場合は、1 次元配列の判断メソッドを使用してディープコピーを実装できます。

<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>

ログイン後にコピー

プログラミング関連の知識については、プログラミングビデオをご覧ください。！

以上がこの記事では、JavaScript 配列の深いコピーと浅いコピーについて簡単に分析します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。