オブジェクトの浅いクローン

JavaScriptJavaScriptBeginner
今すぐ練習

This tutorial is from open-source community. Access the source code

💡 このチュートリアルは英語版からAIによって翻訳されています。原文を確認するには、 ここをクリックしてください

はじめに

この実験では、JavaScript における浅いクローンの概念を探ります。浅いクローンは、元のオブジェクトのすべてのプロパティを持つ新しいオブジェクトを作成しますが、プロパティ自体はクローンされません。代わりに、参照によってコピーされます。これは、元のオブジェクトのプロパティに対して行われた変更が、クローンされたオブジェクトにも反映されることを意味します。この実験を通じて、JavaScript の Object.assign() メソッドを使用してオブジェクトの浅いクローンを作成する方法を理解します。


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("JavaScript")) -.-> javascript/BasicConceptsGroup(["Basic Concepts"]) javascript(("JavaScript")) -.-> javascript/AdvancedConceptsGroup(["Advanced Concepts"]) javascript/BasicConceptsGroup -.-> javascript/variables("Variables") javascript/BasicConceptsGroup -.-> javascript/data_types("Data Types") javascript/BasicConceptsGroup -.-> javascript/arith_ops("Arithmetic Operators") javascript/BasicConceptsGroup -.-> javascript/comp_ops("Comparison Operators") javascript/AdvancedConceptsGroup -.-> javascript/destr_assign("Destructuring Assignment") subgraph Lab Skills javascript/variables -.-> lab-28613{{"オブジェクトの浅いクローン"}} javascript/data_types -.-> lab-28613{{"オブジェクトの浅いクローン"}} javascript/arith_ops -.-> lab-28613{{"オブジェクトの浅いクローン"}} javascript/comp_ops -.-> lab-28613{{"オブジェクトの浅いクローン"}} javascript/destr_assign -.-> lab-28613{{"オブジェクトの浅いクローン"}} end

オブジェクトの浅いクローンを作成する方法

オブジェクトの浅いクローンを作成するには、Object.assign() と空のオブジェクト ({}) を使用します。以下の手順に従ってください。

  1. ターミナル/SSH を開き、コーディングの練習を始めるために node と入力します。
  2. 次のコードを使用して、元のオブジェクトの浅いクローンを作成します。
const shallowClone = (obj) => Object.assign({}, obj);
  1. オブジェクトをクローンするには、次のように shallowClone() 関数を使用します。
const a = { x: true, y: 1 };
const b = shallowClone(a); // a!== b

この例では、ab は 2 つの異なるオブジェクトですが、同じ値を持っています。

まとめ

おめでとうございます!浅いクローンオブジェクトの実験を完了しました。スキルを向上させるために、LabEx でさらに多くの実験を行って練習してください。