一つの文は先端の対象の深いコピーと浅いコピーを分かります.

4120 ワード

フロントエンドの開発過程では、オブジェクトの深度コピーと浅いコピーをよく聞きます.初心者にとっては、ばかなのかもしれません.
一、javascriptのデータタイプ
  • 基礎データタイプ
  • 文字タイプ
  • デジタルタイプ
  • ブールタイプ
  • データタイプ(アドレスの参照)を参照する.
  • オブジェクト
  • 配列
  • 二、浅いコピーのコード
  • 、自分で浅いコピーを実現します.
  • 、浅いコピーの問題について
  • オブジェクトの浅いコピーは、針がベースデータタイプの場合、コピーできます.修正しても問題がありません.
  • javascriptにおける参照データタイプ(配列、オブジェクト)はアドレスのコピーだけであり、以前のデータを修正すれば、コピーしたデータも修正される.
  • 3、jsでは、ES6オブジェクトの静的な方法を直接使用してオブジェクトの浅いコピーを行い、自分で手書きでコピーする方法は必要ない.
  • 三、ディープコピー
    深いコピーは浅いコピーに対して、コピーした後の引用データのタイプにとって、真実なのは1つの新しいメモリの空間を切り開いたので、前の古いデータを改正して、コピーした後のデータも変化しません.
  • 1、深度コピーを実現する方法
    let obj1 = {name: '  ', gender: ' ', bookList: ['  ', '  ']};
    let obj2 = {};
    for (let key in obj1) {
    obj2[key] = obj1[key];
    }
    obj1.name = '  ';
    obj1.bookList.push('  ');
    console.log(obj1);
    console.log(obj2);
    
  • 四、Object.assign()を使用してJSON.parse()とオブジェクトをコピーする.
    let obj1 = {
      name: '  ',
      age: 20,
      bookList: ['    ', '   '],
      goodFriends: {
        name: '  ',
        age: 19,
        bookList: ['java']
      },
      birthday: new Date()
    }
    
    /**
     *       
     * @param toObj        
     * @param fromObj         
     */
    function deepCopyObject(toObj, fromObj) {
      //               ,     、  、    
      const _isObject = (obj) => Object.is(typeof obj, 'object');
    
      for (let key in fromObj) {
        let fromObjValue = fromObj[key];
        //                  
        if (!_isObject(fromObjValue)) {
          toObj[key] = fromObjValue;
        } else {
          //        
          let temObj = new fromObjValue.constructor;
          //     
          deepCopyObject(temObj, fromObjValue);
          toObj[key] = temObj;
        }
      }
    };
    
    let newObj = {};
    deepCopyObject(newObj, obj1);
    obj1.bookList.push('   ');
    console.log(newObj);
    console.log(obj1);
    
    五、実際のプロジェクト開発の過程でlodashjsを使う
  • 、深度コピー使用JSON.stringify()方法
  • 六、より多くの作者の文章