シャローコピーとディープコピー
CoddyのJavaScriptジャーニー「論理とフロー」セクションの一部 — レッスン 25/65。
オブジェクトをコピーする場合、2種類のコピーがあります：
- シャローコピー (Shallow Copy) - 第1レベルのみをコピーします
- ディープコピー (Deep Copy) - すべてのネストされたレベルをコピーします
シャローコピーの方法:
スプレッド演算子の使用:
const original = { a: 1, b: { x: 2 } };
const spreadCopy = { ...original };ソースオブジェクトからターゲットオブジェクトへプロパティをコピーすることで新しいオブジェクトを作成する Object.assign() を使用する場合：
const assignCopy = Object.assign({}, original);シャローコピーの問題点:
original.b.x = 3;
console.log(spreadCopy.b.x); // 3
// (ネストされたオブジェクトは参照を共有します)
console.log(assignCopy.b.x); // 3JSONメソッドとディープコピーの理解
JSON.stringify() は JavaScript オブジェクトを JSON 文字列に変換します:
const obj = { name: "John", age: 30 };
const jsonString = JSON.stringify(obj);
console.log(jsonString); // "{"name":"John","age":30}"JSON.parse() は、JSON文字列をJavaScriptオブジェクトに変換します：
const backToObject = JSON.parse(jsonString);
console.log(backToObject); // { name: "John", age: 30 }JSONを使用したディープコピー:
const original = { a: 1, b: { x: 2 } };
const deepCopy = JSON.parse(JSON.stringify(original));
original.b.x = 3;
console.log(deepCopy.b.x); // 2 (完全に独立)
チャレンジ
簡単processCart という名前の関数を作成してください。この関数は、ショッピングカートを表す JSON 文字列を受け取ります。カートには、名前と価格を持つ商品の配列が含まれています。あなたのタスクは以下の通りです：
- JSON 文字列を JavaScript オブジェクトにパースする
- そこから 2 つの別々のカートを作成する
- 2 つ目のカートにおいて：
- 各アイテムに
discountedプロパティを追加し、falseに設定する priceが 50 より大きいすべてのアイテムに 10% の割引を適用する- 割引が適用されたアイテムの 'discounted' を
trueに設定する
- 各アイテムに
- 両方のカートを含む配列を返す
チートシート
オブジェクトをコピーする場合、2種類のコピー方法があります：
- シャローコピー（浅いコピー） - 第1レベルのみをコピーします
- ディープコピー（深いコピー） - すべてのネストされたレベルをコピーします
シャローコピーの方法：
スプレッド構文を使用する場合：
const original = { a: 1, b: { x: 2 } };
const spreadCopy = { ...original };Object.assign() を使用する場合：
const assignCopy = Object.assign({}, original);シャローコピーの問題点：
original.b.x = 3;
console.log(spreadCopy.b.x); // 3 (ネストされたオブジェクトは参照を共有します)JSONメソッド：
JSON.stringify() はJavaScriptオブジェクトをJSON文字列に変換します：
const obj = { name: "John", age: 30 };
const jsonString = JSON.stringify(obj);
console.log(jsonString); // "{"name":"John","age":30}"JSON.parse() はJSON文字列をJavaScriptオブジェクトに戻します：
const backToObject = JSON.parse(jsonString);
console.log(backToObject); // { name: "John", age: 30 }JSONを使用したディープコピー：
const original = { a: 1, b: { x: 2 } };
const deepCopy = JSON.parse(JSON.stringify(original));
original.b.x = 3;
console.log(deepCopy.b.x); // 2 (完全に独立しています)自分で試してみよう
function processCart(jsonString) {
// ここにコードを記述してください
}
// 関数の外には何も書かないでください
腕試しこのレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。
