JavaScriptで再帰的にDeep Copyする方法

こんにちはフロントエンドエンジニアのまさにょんです！

今回は、JavaScriptで再帰的にDeep Copyする方法について解説していきます。

1 JavaScriptで再帰的にDeep Copyする方法
- 1.1 再帰的に DeepCopy する Functionを作成して使用する方法
- 1.2 JSON.parse(JSON.stringify(TargetData)) を使用する方法
2 JavaScript書籍 Ver. 中級-上級者向け
3 JavaScript書籍 Ver. 初級者向け
4 Twitterやってます！Follow Me！
5 最近の投稿

JavaScriptで再帰的にDeep Copyする方法

JavaScriptで再帰的にDeep Copyする方法には、次の2つがあります。

再帰的に DeepCopy する Functionを作成して、使用する。
JSON.parse(JSON.stringify(data));を使用して、DeepCopyする。

それぞれの方法を解説していきます。

再帰的に DeepCopy する Functionを作成して使用する方法

次の SampleCodeは、Objectや配列を再帰的に DeepCopy する Functionになります。

// 1. 再帰的に、DeepCopy する Function
function deepCopy(obj) {
  if (typeof obj !== "object" || obj === null) {
    return obj;
  }

  let copy;

  if (Array.isArray(obj)) {
    copy = [];
    for (let i = 0; i < obj.length; i++) {
      copy[i] = deepCopy(obj[i]);
    }
  } else {
    copy = {};
    for (let key in obj) {
      if (obj.hasOwnProperty(key)) {
        copy[key] = deepCopy(obj[key]);
      }
    }
  }
  return copy;
}

試しに、次の SampleCodeをコピペして、Consoleで実行してみてください。

// ロボ玉_Object
const robotama = {
  name: "ロボ玉",
  type: "ハムスター",
  purupuruFlag: true,
  ham: () => {
    console.log("ロボ玉なのだ！");
  },
  parameter: {
    power: 1000,
    defense: 1000,
    speed: 3000,
  },
};

// 白桃_Object
const hakutou = {
  name: "白桃さん",
  type: "ねこ",
  purupuruFlag: false,
  parameter: {
    power: 3000,
    defense: 3000,
    speed: 3000,
  },
};

// 2つのObjを持つ配列
const animalList = [robotama, hakutou];

// 1. 再帰的に、DeepCopy する Function
function deepCopy(obj) {
  if (typeof obj !== "object" || obj === null) {
    return obj;
  }

  let copy;

  if (Array.isArray(obj)) {
    copy = [];
    for (let i = 0; i < obj.length; i++) {
      copy[i] = deepCopy(obj[i]);
    }
  } else {
    copy = {};
    for (let key in obj) {
      if (obj.hasOwnProperty(key)) {
        copy[key] = deepCopy(obj[key]);
      }
    }
  }
  return copy;
}

const copyRobotama1 = deepCopy(robotama);
console.log("copyRobotama1", copyRobotama1);

const copyHakutou1 = deepCopy(hakutou);
console.log("copyHakutou1", copyHakutou1);

const copyAnimalList1 = deepCopy(animalList);
console.log("copyAnimalList1", copyAnimalList1);

次のように、綺麗に Objectや配列を DeepCopyできているはずです。

JSON.parse(JSON.stringify(TargetData)) を使用する方法

こちらも試しに、次の SampleCodeをコピペして、Consoleで実行してみてください。

// ロボ玉_Object
const robotama = {
  name: "ロボ玉",
  type: "ハムスター",
  purupuruFlag: true,
  ham: () => {
    console.log("ロボ玉なのだ！");
  },
  parameter: {
    power: 1000,
    defense: 1000,
    speed: 3000,
  },
};

// 白桃_Object
const hakutou = {
  name: "白桃さん",
  type: "ねこ",
  purupuruFlag: false,
  parameter: {
    power: 3000,
    defense: 3000,
    speed: 3000,
  },
};

// 2つのObjを持つ配列
const animalList = [robotama, hakutou];

// 2. JSON.parse(JSON.stringify(data)); を使用する
// =>  関数だけは、Copyできないので、要注意です
const copyRobotama2 = JSON.parse(JSON.stringify(robotama));
console.log("copyRobotama2", copyRobotama2);

const copyHakutou2 = JSON.parse(JSON.stringify(hakutou));
console.log("copyHakutou2", copyHakutou2);

const copyAnimalList2 = JSON.parse(JSON.stringify(animalList));
console.log("copyAnimalList2", copyAnimalList2);

次のように、Objectや配列を DeepCopyできているはずです。

ただ、この方法には、注意点があって関数のCopyができないというデメリットがあります。

Console に表示された内容を見ると、関数は、Copyできていないことがわかります。