JavaScriptでオブジェクトを効率的にディープクローンする方法


  1. JSON.stringifyとJSON.parseを使用する方法:

    const clonedObject = JSON.parse(JSON.stringify(originalObject));

    この方法は簡単であり、多くの場合うまく機能します。ただし、クローンするオブジェクト内に関数や循環参照が含まれている場合、それらは正しくクローンされません。

  2. 再帰的なクローニングを使用する方法:

    function deepClone(obj) {
     if (typeof obj !== 'object' || obj === null) {
       return obj;
     }
     let clone;
     if (Array.isArray(obj)) {
       clone = [];
       for (let i = 0; i < obj.length; i++) {
         clone[i] = deepClone(obj[i]);
       }
     } else {
       clone = {};
       for (let key in obj) {
         if (obj.hasOwnProperty(key)) {
           clone[key] = deepClone(obj[key]);
         }
       }
     }
     return clone;
    }
    const clonedObject = deepClone(originalObject);

    この方法は再帰的にオブジェクトを探索し、プロパティごとにクローンを作成します。これにより、関数や循環参照を含むオブジェクトも正しくクローンすることができます。

  3. ライブラリを使用する方法: オブジェクトのディープクローニングにはいくつかの便利なライブラリが存在します。例えば、LodashやjQueryなどのライブラリは、cloneDeepextendといったメソッドを提供しています。

    // Lodashを使用する例
    const clonedObject = _.cloneDeep(originalObject);

これらの方法の選択は、使用するオブジェクトの複雑さや特定の要件に依存します。 JSON.stringifyとJSON.parseの方法は一般的に簡単で効果的ですが、関数や循環参照を正しくクローンする必要がある場合は、再帰的なクローニングやライブラリを検討することをお勧めします。