ホームページ > 記事 > ウェブフロントエンド > jsの転送とコピーについて詳しく解説

jsの転送とコピーについて詳しく解説

小云云オリジナル: 2018-03-13 16:12:281336ブラウズ

js にはいくつかの基本的なデータ型と、(オブジェクト、配列、関数) などの他の複雑なデータ型があることがわかっています。基本的なデータ型の割り当ては、実際には値のコピーと呼ばれます。割り当てられた変数は同じです。元のとおり変数には、値が等しいという以外の関係はありません。

let x = 666
let y = x
let m = &#39;abc&#39;
let n = m
y = 888
n = &#39;def&#39;
console.log(x, y)//666,888
console.log(m, n)//&#39;abc&#39;,&#39;def&#39;

複素データ型の転送はこのようにはなりません。変数が複素データ型にバインドされている場合、記録されるのは複素データの値ではなく、データのアドレス情報であるときです。この変数は別の変数に代入され、実際にはデータ情報を指します。この転送メソッドを参照渡し

let obj1 = {
    a : &#39;1&#39;,
    b : 2
} 
let obj2 = obj1
obj2.b = 3
console.log(obj1,obj2)//{a: "1", b: 3},{a: "1", b: 3}

Copy

と呼びます。

複雑なデータ型の割り当ては参照によって行われることがわかっています。実際のプロジェクトでは、これが起こることは望ましくないことがよくあります。

には 2 つのビューがあります。まず、リストはデータを順番に表示するだけで済みます。次に、グラフはデータを処理する前にデータを反転する必要があります。 reverse() の後の最初のリストも逆の順序になっています。これは、配列の値をコピーするだけのメソッドが必要であり、この新しい配列のデータアドレスは異なります。このコピーメソッドは、配列のコピーと呼ばれます。

let obj1 = {a:1, b:{c:2}}
let shallowCopy = (src)=> {
    let dst = {}
    for (let prop in src) {
        if (src.hasOwnProperty(prop)) {
          dst[prop] = src[prop]
        }
    }
    return dst
}
let obj2 = shallowCopy(obj1)
console.log(obj1,obj2) //@1
obj1.a = 6
console.log(obj2.a) //@2
obj2.b.c = 666
console.log(obj1.b.c) //@3
obj2.b = {
    c: 888
}
console.log(obj1.b.c) //@4

上記の例から、obj1 の最初の層の属性は属性値をコピーし、アドレスのコピーを継承しないことがわかりますが、2 番目の層の b 属性はメモリアドレスを共有します。浅いコピーですが、@4 では、属性 b がオブジェクトであるため、obj1 は obj2 の影響を受けません。参照転送によるこの種の再割り当てにより、コンピュータはデータを保存し、アドレス情報を記録するために新しいメモリを再割り当てします。そのため、この時点では obj1 です。 .b.c と obj2。b.c はレコードの属性値ではなくなりました

次のように理解することもできます。複雑なデータ型の直接割り当ては参照転送であり、コピーは単純なデータバックアップとは言えません。コピーも浅いコピーと深いコピーに分かれているため、元のデータのメモリアドレス情報は完全に同じではありません。

複雑なデータ型のネストされていないコピーは、データ情報の最初の層のみがコピーされることを意味します。これは、データの最初の層が複雑なデータ型を持つ場合でも、参照転送方法が使用され、コピーはまだアドレス情報であり、他のメソッドで実装された配列オブジェクトなどの多層ネストされたコピーがディープコピーです。 Arraysとオブジェクトが深いコピーと浅いコピーをどのように実装するかを見てみましょう。演算子

let arr1 = [1,2,[3,4]]
let arr2 = arr1.slice(0)
arr2[2].push(5)
arr2.push(6)
console.log(arr1,arr2)

上記 4 種類の配列のコピーはすべて浅いコピーであり、配列の深いコピーを実現するには、再帰的に実装する必要があります

let arr1 = [1,2,[3,4]]
let arr2 = arr1.concat()
arr2[2].push(5)
arr2.push(6)
console.log(arr1,arr2)

オブジェクトのコピー

ユニバーサル for ループ

let arr1 = [1,2,[3,4]]
let arr2 = []
for(let i = 0; i<arr1.length; i++){
    arr2.push(arr1[i])
}
arr2[2].push(5)
arr2.push(6)
console.log(arr1,arr2)

...operator

let arr1 = [1,2,[3,4]]
let [...arr2] = arr1
arr2[2].push(5)
arr2.push(6)
console.log(arr1,arr2)

Object.assign( )

let deepClone = (src)=> {
    let result
    (src instanceof Array) ? (result = []) :(result = {})
    for (let key in src) {
        result[key] = (typeof src[key] === &#39;object&#39;) ? deepClone(src[key]) : src[key]//数组和对象的type都是object
    }
    return result
}   
let arr1 = [1,2,[3,4]]
let arr2 = deepClone(arr1)
arr2[2].push(5)
arr2.push(6)
console.log(arr1,arr2)

上記の 3 つのメソッドはオブジェクトです浅いコピー、オブジェクトのディープコピーの 2 つのメソッドを紹介します:

文字列に変換してからオブジェクトに戻す

let obj1 = {a:1,b:{c:2}}
let obj2 = {}
for(let key in obj1){
    obj2[key] = obj1[key]
}
obj1.b.c = 6
console.log(obj1,obj2)

deepClone メソッドは、上記の配列
関連概念
外部環境に影響を与えることなく、関数に入力を与え、一意の出力を返す関数は、純粋関数と呼ばれ、その中で定義された変数は、によって再利用されます。関数が戻った後のガベージコレクションメカニズム。

影響を軽減する方法は、受信パラメータのディープコピーを作成し、それらを新しい変数に割り当てて、元のパラメータが改ざんされるのを防ぐことです。

```
let obj1 = {a:1,b:{c:2}}
let {...obj2} = obj1
obj1.b.c = 6
console.log(obj1,obj2)
```
上記の例を通して、wang の値が純粋関数によって変更されていないことがわかります。
```
let obj1 = {a:1,b:{c:2}}
let obj2 = Object.assign({},obj1)
obj1.b.c = 6
console.log(obj1,obj2)
```
上記は私の js の理解です。ご理解ください。引用と送信が不適切な場合はご容赦ください。

jsの転送とコピーについて詳しく解説

Copy

上記 4 種類の配列のコピーはすべて浅いコピーであり、配列の深いコピーを実現するには、再帰的に実装する必要があります

文字列に変換してからオブジェクトに戻す

関連する推奨事項:

関連記事