今回は、JS のディープコピーとシャローコピーを実際のプロジェクトで使用する方法と、JS のディープコピーとシャローコピーを実際のプロジェクトで使用する際の注意点についてお届けします。
この記事の例では、JavaScript のディープ コピーとシャロー コピーの概念と使用法について説明します。参考までに皆さんと共有します。詳細は次のとおりです:
js の浅いコピーと深いコピーは、複雑なデータ型 (Objcet、Array) をコピーするためだけです。簡単に言うと、シャローコピーもディープコピーも、元のオブジェクトに基づいてコピーを再生成する機能を実現できます。ただし、新しく生成されたオブジェクトが元のオブジェクトに影響を与えることができるかどうかに応じて、浅いコピーと深いコピーに分けることができます。
概念 1: 浅いコピー
浅いコピーは参照をコピーすることを指し、新しく生成された参照と元の参照は両方とも同じオブジェクトのインスタンスを指し、相互間の操作は相互に影響します。
コンセプト 2: ディープコピー
ヒープ内のメモリを再度開き、元の参照に対応するオブジェクト インスタンスの内容をすべてコピーします。これにより、ディープ コピー オブジェクトが元のオブジェクトから完全に分離されます。お互いに影響はありません。
コンセプト 3: 配列のディープコピーの実装
1. for
ループを使用しますfor
循环
<script type="text/javascript"> var arr1=['a','b','c']; var arr2=[]; function deepCopy(arr1,arr2){ for(var i=0;i<arr1.length;i++){ arr2[i]=arr1[i]; } } deepCopy(arr1,arr2); arr2[1]='d'; console.log(arr1);//['a','b','c'] console.log(arr2);//['a','d','c'] </script>
2. 使用slice()
方法
<script type="text/javascript"> var arr1=['a','b','c']; var arr2=arr1.slice(0); arr2[1]='d'; console.log(arr1);//['a','b','c'] console.log(arr2);//['a','d','c'] </script>
3. 使用concat
方法
<script type="text/javascript"> var arr1=['a','b','c']; var arr2=arr1.concat(); arr2[1]='d'; console.log(arr1);//['a','b','c'] console.log(arr2);//['a','d','c'] </script>
概念4:对象的深拷贝
1. 使用for
<script type="text/javascript"> var obj = { name: 'FungLeo', sex: 'man', old: '18' } function copyObj(obj) { let res = {} for (var key in obj) { res[key] = obj[key] } return res } var obj2 = copyObj(obj); obj2["name"]="kka"; </script>
slice()
メソッドを使用します
<script type="text/javascript"> var obj = { name: 'FungLeo', sex: 'man', old: '18' } var obj2=JSON.parse(JSON.stringif(obj)); obj2["name"]="kka"; </script>
コンセプト 4: オブジェクトのディープコピー
1.for
ループを使用しますrrreee2. JSON
を使用して実装します
この記事の事例を読んだ後は、その方法を習得したことになります。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。 推奨読書:
以上が実際のプロジェクトで JS の深いコピーと浅いコピーを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。