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

はじめに

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

これは Guided Lab です。学習と実践を支援するためのステップバイステップの指示を提供します。各ステップを完了し、実践的な経験を積むために、指示に注意深く従ってください。過去のデータによると、この初級レベルの実験の完了率は 92%です。学習者から 100% の好評価を得ています。

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

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

新しいターミナル/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 でさらに多くの実験を行って練習することができます。