構造化クローンアルゴリズム：JavaScript オブジェクトを安全に複製する方法
2024-04-02
JavaScript オブジェクトを正しくクローンする方法
浅いクローンは、オブジェクトの参照を複製します。つまり、元のオブジェクトとクローンされたオブジェクトは、同じプロパティと値を持ちますが、独立したオブジェクトではありません。
方法
- Object.assign()
const originalObj = {
name: "John Doe",
age: 30,
};
const clonedObj = Object.assign({}, originalObj);
console.log(clonedObj); // { name: "John Doe", age: 30 }
- スプレッド構文
const originalObj = {
name: "John Doe",
age: 30,
};
const clonedObj = { ...originalObj };
console.log(clonedObj); // { name: "John Doe", age: 30 }
メリット
- 実行速度が速い
- コードがシンプル
- ネストされたオブジェクトは浅くしかクローンされない
- オブジェクトのプロパティが変更されると、元のオブジェクトとクローンされたオブジェクトの両方に影響を与える
深いクローンは、オブジェクトとそのすべてのネストされたプロパティを完全に複製します。元のオブジェクトとクローンされたオブジェクトは独立したオブジェクトであり、互いに影響を与えません。
- JSON.parse(JSON.stringify())
const originalObj = {
name: "John Doe",
age: 30,
address: {
city: "Tokyo",
country: "Japan",
},
};
const clonedObj = JSON.parse(JSON.stringify(originalObj));
console.log(clonedObj); // { name: "John Doe", age: 30, address: { city: "Tokyo", country: "Japan" } }
- ライブラリの使用
Lodash や Underscore.js などのライブラリには、深いクローンを作成するための関数があります。
const _ = require("lodash");
const originalObj = {
name: "John Doe",
age: 30,
address: {
city: "Tokyo",
country: "Japan",
},
};
const clonedObj = _.cloneDeep(originalObj);
console.log(clonedObj); // { name: "John Doe", age: 30, address: { city: "Tokyo", country: "Japan" } }
- ネストされたオブジェクトも含めて、オブジェクトを完全に複製できる
- コードが複雑になる
上記以外にも、特定の状況で使用できるその他の方法があります。
- 手動によるクローン
オブジェクトのプロパティを一つずつコピーして、新しいオブジェクトを作成する方法です。
- プロトタイプベースの継承
新しいオブジェクトを作成し、元のオブジェクトのプロトタイプを継承させる方法です。
- オブジェクトの構造
- パフォーマンス
- コードの簡潔性
一般的には、浅いクローンで十分な場合が多いですが、ネストされたオブジェクトを完全に複製したい場合は、深いクローンを使用する必要があります。
JavaScript オブジェクトをクローンするには、いくつかの方法があります。それぞれの方法にはメリットとデメリットがあり、状況によって使い分けることが重要です。
浅いクローン
// Object.assign() を使用した浅いクローン
const originalObj = {
name: "John Doe",
age: 30,
};
const clonedObj = Object.assign({}, originalObj);
console.log(clonedObj); // { name: "John Doe", age: 30 }
// スプレッド構文を使用した浅いクローン
const originalObj = {
name: "John Doe",
age: 30,
};
const clonedObj = { ...originalObj };
console.log(clonedObj); // { name: "John Doe", age: 30 }
深いクローン
// JSON.parse(JSON.stringify()) を使用した深いクローン
const originalObj = {
name: "John Doe",
age: 30,
address: {
city: "Tokyo",
country: "Japan",
},
};
const clonedObj = JSON.parse(JSON.stringify(originalObj));
console.log(clonedObj); // { name: "John Doe", age: 30, address: { city: "Tokyo", country: "Japan" } }
// Lodash を使用した深いクローン
const _ = require("lodash");
const originalObj = {
name: "John Doe",
age: 30,
address: {
city: "Tokyo",
country: "Japan",
},
};
const clonedObj = _.cloneDeep(originalObj);
console.log(clonedObj); // { name: "John Doe", age: 30, address: { city: "Tokyo", country: "Japan" } }
// 手動によるクローン
const originalObj = {
name: "John Doe",
age: 30,
};
const clonedObj = {};
for (const prop in originalObj) {
clonedObj[prop] = originalObj[prop];
}
console.log(clonedObj); // { name: "John Doe", age: 30 }
// プロトタイプベースの継承
const originalObj = {
name: "John Doe",
age: 30,
};
function ClonedObj() {}
ClonedObj.prototype = originalObj;
const clonedObj = new ClonedObj();
console.log(clonedObj); // { name: "John Doe", age: 30 }
JavaScript オブジェクトをクローンする方法：その他の方法
これは最も基本的な方法ですが、オブジェクトが複雑になるとコードが冗長になり、誤りも発生しやすくなります。
const originalObj = {
name: "John Doe",
age: 30,
address: {
city: "Tokyo",
country: "Japan",
},
};
const clonedObj = {};
for (const prop in originalObj) {
clonedObj[prop] = originalObj[prop];
}
console.log(clonedObj); // { name: "John Doe", age: 30, address: { city: "Tokyo", country: "Japan" } }
この方法は、オブジェクトのプロトタイプを継承することで新しいオブジェクトを作成します。
const originalObj = {
name: "John Doe",
age: 30,
};
function ClonedObj() {}
ClonedObj.prototype = originalObj;
const clonedObj = new ClonedObj();
console.log(clonedObj); // { name: "John Doe", age: 30 }
const _ = require("lodash");
const originalObj = {
name: "John Doe",
age: 30,
address: {
city: "Tokyo",
country: "Japan",
},
};
const clonedObj = _.cloneDeep(originalObj);
console.log(clonedObj); // { name: "John Doe", age: 30, address: { city: "Tokyo", country: "Japan" } }
構造化クローンアルゴリズム
JavaScript には、structuredClone() という新しい API があります。これは、オブジェクトとそのすべてのプロパティを完全に複製する構造化クローンアルゴリズムを実装しています。
const originalObj = {
name: "John Doe",
age: 30,
address: {
city: "Tokyo",
country: "Japan",
},
};
const clonedObj = structuredClone(originalObj);
console.log(clonedObj); // { name: "John Doe", age: 30, address: { city: "Tokyo", country: "Japan" } }
javascript clone javascript-objects
