JavaScript におけるオブジェクトのディープクローンのマスター

はじめに

この実験では、JavaScript でオブジェクトのディープクローンを作成する方法を学びます。クラスインスタンスを除外しながら、再帰を使ってプリミティブ型、配列、およびオブジェクトをクローンします。この実験が終了すると、元のオブジェクトを変更することなく、オブジェクトの完全なコピーを作成できるようになります。

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("JavaScript")) -.-> javascript/BasicConceptsGroup(["Basic Concepts"]) javascript(("JavaScript")) -.-> javascript/AdvancedConceptsGroup(["Advanced Concepts"]) javascript/BasicConceptsGroup -.-> javascript/variables("Variables") javascript/BasicConceptsGroup -.-> javascript/data_types("Data Types") javascript/BasicConceptsGroup -.-> javascript/arith_ops("Arithmetic Operators") javascript/BasicConceptsGroup -.-> javascript/comp_ops("Comparison Operators") javascript/BasicConceptsGroup -.-> javascript/cond_stmts("Conditional Statements") javascript/BasicConceptsGroup -.-> javascript/array_methods("Array Methods") javascript/BasicConceptsGroup -.-> javascript/obj_manip("Object Manipulation") javascript/AdvancedConceptsGroup -.-> javascript/destr_assign("Destructuring Assignment") subgraph Lab Skills javascript/variables -.-> lab-28260{{"オブジェクトをディープクローンする"}} javascript/data_types -.-> lab-28260{{"オブジェクトをディープクローンする"}} javascript/arith_ops -.-> lab-28260{{"オブジェクトをディープクローンする"}} javascript/comp_ops -.-> lab-28260{{"オブジェクトをディープクローンする"}} javascript/cond_stmts -.-> lab-28260{{"オブジェクトをディープクローンする"}} javascript/array_methods -.-> lab-28260{{"オブジェクトをディープクローンする"}} javascript/obj_manip -.-> lab-28260{{"オブジェクトをディープクローンする"}} javascript/destr_assign -.-> lab-28260{{"オブジェクトをディープクローンする"}} end

オブジェクトをディープクローンする手順

オブジェクトをディープクローンするには、次の手順に従います。

新しいターミナル/SSH インスタンスを作成し、コーディングの練習を始めるために node と入力します。
再帰を使って、クラスインスタンスを除くプリミティブ型、配列、およびオブジェクトをクローンします。
渡されたオブジェクトが null であるかどうかを確認し、その場合は null を返します。
Object.assign() と空のオブジェクト ({}) を使って、元のオブジェクトのシャロークローンを作成します。
Object.keys() と Array.prototype.forEach() を使って、どのキーと値のペアがディープクローンする必要があるかを判断します。
オブジェクトが Array の場合、clone の length を元のものに設定し、Array.from() を使ってクローンを作成します。
次のコードを使ってディープクローニングを実装します。

const deepClone = (obj) => {
  if (obj === null) return null;
  let clone = Object.assign({}, obj);
  Object.keys(clone).forEach(
    (key) =>
      (clone[key] =
        typeof obj[key] === "object" ? deepClone(obj[key]) : obj[key])
  );
  if (Array.isArray(obj)) {
    clone.length = obj.length;
    return Array.from(clone);
  }
  return clone;
};

次のコードを使って、ディープクローニング関数をテストします。

const a = { foo: "bar", obj: { a: 1, b: 2 } };
const b = deepClone(a); // a!== b, a.obj!== b.obj

まとめ

おめでとうございます！あなたはディープクローンオブジェクトの実験を完了しました。あなたのスキルを向上させるために、LabExでさらに多くの実験を行って練習することができます。