ホームページ > ウェブフロントエンド > jsチュートリアル > 実際のプロジェクトで JS の深いコピーと浅いコピーを使用する方法

実際のプロジェクトで JS の深いコピーと浅いコピーを使用する方法

php中世界最好的语言
リリース: 2018-06-09 11:52:07
オリジナル
1503 人が閲覧しました

今回は、JS のディープコピーとシャローコピーを実際のプロジェクトで使用する方法と、JS のディープコピーとシャローコピーを実際のプロジェクトで使用する際の注意点についてお届けします。

この記事の例では、JavaScript のディープ コピーとシャロー コピーの概念と使用法について説明します。参考までに皆さんと共有します。詳細は次のとおりです:

js の浅いコピーと深いコピーは、複雑なデータ型 (ObjcetArray) をコピーするためだけです。簡単に言うと、シャローコピーもディープコピーも、元のオブジェクトに基づいてコピーを再生成する機能を実現できます。ただし、新しく生成されたオブジェクトが元のオブジェクトに影響を与えることができるかどうかに応じて、浅いコピーと深いコピーに分けることができます。

概念 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]=&#39;d&#39;;
  console.log(arr1);//[&#39;a&#39;,&#39;b&#39;,&#39;c&#39;]
  console.log(arr2);//[&#39;a&#39;,&#39;d&#39;,&#39;c&#39;]
</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>
ログイン後にコピー
2. slice() メソッドを使用します

<script type="text/javascript">
  var obj = {
    name: 'FungLeo',
    sex: 'man',
    old: '18'
  }
  var obj2=JSON.parse(JSON.stringif(obj));
  obj2["name"]="kka";
</script>
ログイン後にコピー
3. code>concat メソッドrrreee

コンセプト 4: オブジェクトのディープコピー

1. for ループを使用します

rrreee2. JSON
を使用して実装します

rrreee

この記事の事例を読んだ後は、その方法を習得したことになります。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。 推奨読書:

🎜vue Scaffolding と vue-cli のインストール🎜🎜🎜🎜🎜 vue プロジェクトでの watch の即時使用🎜🎜🎜

以上が実際のプロジェクトで JS の深いコピーと浅いコピーを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート