ES6-オブジェクト

JavaScriptはデータ型の拡張をサポートしています。JavaScriptオブジェクトは、カスタムデータ型を定義するための優れた方法です。

アン objectキーと値のペアのセットを含むインスタンスです。プリミティブデータ型とは異なり、オブジェクトは複数または複雑な値を表すことができ、その存続期間中に変化する可能性があります。値は、スカラー値または関数、あるいは他のオブジェクトの配列にすることができます。

オブジェクトを定義するための構文上のバリエーションについては、さらに説明します。

オブジェクトイニシャライザー

プリミティブ型と同様に、オブジェクトにはリテラル構文があります。 curly bracesv（{そして}）。以下は、オブジェクトを定義するための構文です。

var identifier = {
   Key1:value, Key2: function () { 
      //functions 
   }, 
   Key3: [“content1”,” content2”] 
}

オブジェクトの内容は呼び出されます properties （またはメンバー）、およびプロパティは、 name （またはキー）および value。プロパティ名は文字列または記号である必要があり、値は任意のタイプ（他のオブジェクトを含む）にすることができます。

すべてのJavaScript変数と同様に、オブジェクト名（通常の変数の場合もあります）とプロパティ名の両方で大文字と小文字が区別されます。単純なドット表記でオブジェクトのプロパティにアクセスします。

以下は、オブジェクトのプロパティにアクセスするための構文です。

objectName.propertyName

例：オブジェクトイニシャライザー

var person = { 
   firstname:"Tom", 
   lastname:"Hanks", 
   func:function(){return "Hello!!"},    
}; 
//access the object values 
console.log(person.firstname)   
console.log(person.lastname) 
console.log(person.func())

上記の例では、オブジェクトの人を定義しています。オブジェクトには3つのプロパティがあります。3番目のプロパティは関数を参照します。

上記のコードが正常に実行されると、次の出力が表示されます。

Tom 
Hanks 
Hello!!

ES6では、プロパティ名と一致するプロパティ値を割り当てると、プロパティ値を省略できます。

例

var foo = 'bar' 
var baz = { foo } 
console.log(baz.foo)

上記のコードスニペットはオブジェクトを定義します baz。オブジェクトにはプロパティがありますfoo。ES6は変数fooの値をオブジェクトのキーfooに暗黙的に割り当てるため、プロパティ値はここでは省略されています。

以下は、上記のコードに相当するES5です。

var foo = 'bar' 
var baz = { foo:foo } 
console.log(baz.foo)

上記のコードが正常に実行されると、次の出力が表示されます。

bar

この省略構文を使用すると、JSエンジンは、含まれているスコープで同じ名前の変数を探します。見つかった場合、その変数の値がプロパティに割り当てられます。見つからない場合は、参照エラーがスローされます。

Object（）コンストラクタ

JavaScriptは、と呼ばれる特別なコンストラクター関数を提供します Object()オブジェクトを構築します。new演算子は、オブジェクトのインスタンスを作成するために使用されます。オブジェクトを作成するには、new演算子の後にコンストラクターメソッドを続けます。

以下は、オブジェクトを定義するための構文です。

var obj_name = new Object(); 
obj_name.property = value;    
OR             
obj_name["key"] = value

以下は、プロパティにアクセスするための構文です。

Object_name.property_key                    
OR              
Object_name["property_key"]

例

var myCar = new Object(); 
myCar.make = "Ford"; //define an object 
myCar.model = "Mustang"; 
myCar.year = 1987;  

console.log(myCar["make"]) //access the object property 
console.log(myCar["model"]) 
console.log(myCar["year"])

上記のコードが正常に実行されると、次の出力が表示されます。

Ford 
Mustang 
1987

オブジェクトの割り当てられていないプロパティは未定義です。

例

var myCar = new Object(); 
myCar.make = "Ford"; 
console.log(myCar["model"])

上記のコードが正常に実行されると、次の出力が表示されます。

undefined

Note−オブジェクトプロパティ名は、任意の有効なJavaScript文字列、または空の文字列を含む文字列に変換できる任意の文字列にすることができます。ただし、有効なJavaScript識別子ではないプロパティ名（たとえば、スペースやハイフンが含まれる、または数字で始まるプロパティ名）には、角括弧表記を使用してのみアクセスできます。

プロパティには、変数に格納されている文字列値を使用してアクセスすることもできます。つまり、オブジェクトのプロパティキーは動的な値にすることができます。例：変数。上記の概念は、次の例に示されています。

例

var myCar = new Object()  
var propertyName = "make"; 
myCar[propertyName] = "Ford"; 
console.log(myCar.make)

上記のコードが正常に実行されると、次の出力が表示されます。

Ford

コンストラクター関数

オブジェクトは、次の2つの手順を使用して作成できます-

Step 1 −コンストラクター関数を記述してオブジェクトタイプを定義します。

以下はその構文です。

function function_name() { 
   this.property_name = value 
}

ザ・ ‘this’ キーワードは、現在使用中のオブジェクトを参照し、オブジェクトのプロパティを定義します。

Step 2 −新しい構文でオブジェクトのインスタンスを作成します。

var Object_name= new function_name() 
//Access the property value  

Object_name.property_name

newキーワードは、関数コンストラクターを呼び出し、関数のプロパティキーを初期化します。

Example − Using a Function Constructor

function Car() { 
   this.make = "Ford" 
   this.model = "F123" 
}  
var obj = new Car() 
console.log(obj.make) 
console.log(obj.model)

上記の例では、関数コンストラクターを使用してオブジェクトを定義しています。

上記のコードが正常に実行されると、次の出力が表示されます。

Ford 
F123

新しいプロパティは、以前に定義したオブジェクトにいつでも追加できます。たとえば、次のコードスニペットについて考えてみます。

function Car() { 
   this.make = "Ford" 
} 
var obj = new Car() 
obj.model = "F123" 
console.log(obj.make) 
console.log(obj.model)

上記のコードが正常に実行されると、次の出力が表示されます。

Ford 
F123

Object.createメソッド

オブジェクトは、を使用して作成することもできます Object.create()方法。コンストラクター関数を定義しなくても、必要なオブジェクトのプロトタイプを作成できます。

例

var roles = { 
   type: "Admin", // Default value of properties 
   displayType : function() {  
      // Method which will display type of role 
      console.log(this.type); 
   } 
}  
// Create new role type called super_role 
var super_role = Object.create(roles); 
super_role.displayType(); // Output:Admin  

// Create new role type called Guest 
var guest_role = Object.create(roles); 
guest_role.type = "Guest"; 
guest_role.displayType(); // Output:Guest

上記の例では、オブジェクト-rolesを定義し、プロパティのデフォルト値を設定しています。オブジェクトのデフォルトのプロパティ値を上書きする2つの新しいインスタンスが作成されます。

上記のコードが正常に実行されると、次の出力が表示されます。

Admin 
Guest

Object.assign（）関数

ザ・ Object.assign()メソッドは、列挙可能なすべての独自プロパティの値を1つ以上のソースオブジェクトからターゲットオブジェクトにコピーするために使用されます。ターゲットオブジェクトを返します。

以下はその構文です。

Object.assign(target, ...sources)

Example − Cloning an Object

"use strict" 
var det = { name:"Tom", ID:"E1001" }; 
var copy = Object.assign({}, det); 
console.log(copy);  
for (let val in copy) { 
   console.log(copy[val]) 
}

上記のコードが正常に実行されると、次の出力が表示されます。

Tom 
E1001

Example − Merging Objects

var o1 = { a: 10 }; 
var o2 = { b: 20 }; 
var o3 = { c: 30 }; 
var obj = Object.assign(o1, o2, o3); 
console.log(obj);  
console.log(o1);

上記のコードが正常に実行されると、次の出力が表示されます。

{ a: 10, b: 20, c: 30 } 
{ a: 10, b: 20, c: 30 }

Note−オブジェクトのコピーとは異なり、オブジェクトがマージされると、大きい方のオブジェクトはプロパティの新しいコピーを維持しません。むしろ、元のオブジェクトに含まれているプロパティへの参照を保持します。次の例では、この概念について説明します。

var o1 = { a: 10 }; 
var obj = Object.assign(o1); 
obj.a++ 
console.log("Value of 'a' in the Merged object after increment  ") 
console.log(obj.a);  
console.log("value of 'a' in the Original Object after increment ") 
console.log(o1.a);

上記のコードが正常に実行されると、次の出力が表示されます。

Value of 'a' in the Merged object after increment 
11  
value of 'a' in the Original Object after increment 
11

プロパティの削除

削除演算子を使用してプロパティを削除できます。次のコードは、プロパティを削除する方法を示しています。

例

// Creates a new object, myobj, with two properties, a and b. 
var myobj = new Object; 
myobj.a = 5; 
myobj.b = 12; 

// Removes the ‘a’ property 
delete myobj.a; 
console.log ("a" in myobj) // yields "false"

上記のコードが正常に実行されると、次の出力が表示されます。

false

コードスニペットは、オブジェクトからプロパティを削除します。in演算子がオブジェクト内のプロパティを見つけられないため、この例はfalseを出力します。

オブジェクトの比較

JavaScriptでは、オブジェクトは参照型です。同じプロパティを持っていても、2つの異なるオブジェクトが等しくなることはありません。これは、完全に異なるメモリアドレスを指しているためです。共通の参照を共有するオブジェクトのみが、比較時にtrueになります。

Example 1 − Different Object References

var val1 = {name: "Tom"}; 
var val2 = {name: "Tom"}; 
console.log(val1 == val2)  // return false 
console.log(val1 === val2)  // return false

上記の例では、 val1 そして val22つの異なるメモリアドレスを参照する2つの異なるオブジェクトです。したがって、等しいかどうかを比較すると、演算子はfalseを返します。

Example 2 − Single Object Reference

var val1 = {name: "Tom"}; 
var val2 = val1  

console.log(val1 == val2) // return true 
console.log(val1 === val2) // return true

上記の例では、val1の内容がval2に割り当てられています。つまり、val1のプロパティの参照はval2と共有されています。オブジェクトはプロパティへの参照を共有するようになったため、等式演算子は、2つの異なるメモリアドレスを参照する2つの異なるオブジェクトに対してtrueを返します。したがって、等しいかどうかを比較すると、演算子はfalseを返します。

オブジェクトの構造化

用語 destructuringエンティティの構造を分割することを指します。JavaScriptの非構造化代入構文により、配列またはオブジェクトから個別の変数にデータを抽出できます。同じことが次の例に示されています。

例1

オブジェクトを破棄するときは、変数名とオブジェクトプロパティ名が一致している必要があります。

<script>
let student = {
   rollno:20,
   name:'Prijin',
   cgpa:7.2
}

//destructuring to same property name
   let {name,cgpa} = student
   console.log(name)
   console.log(cgpa)

//destructuring to different name
   let {name:student_name,cgpa:student_cgpa}=student
   console.log(student_cgpa)
   console.log("student_name",student_name)
</script>

上記のコードの出力は次のようになります-

Prijin
7.2
7.2
student_name Prijin

例2

変数と割り当てが2つの異なるステップにある場合、破壊オブジェクトの構文は次のように囲まれます。 () 例に示すように ({rollno} = student) −

<script>
   let student = {
      rollno:20,
      name:'Prijin',
      cgpa:7.2
   }

   // destructuring to already declared variable
   let rollno;
   ({rollno} = student)
   console.log(rollno)

   // assign default values to variables

   let product ={ id:1001,price:2000} //discount is not product property
   let {id,price,discount=.10} = product
   console.log(id)
   console.log(price)
   console.log(discount)
</script>

上記のコードの出力は以下のようになります-

20
1001
2000
0.1

例3

以下の例は destructuring を使用して rest operator ネストされたオブジェクトを破棄する方法。

<script>
   // rest operator with object destructuring
   let customers= {
      c1:101,
      c2:102,
      c3:103
   }

   let {c1,...others} = customers
   console.log(c1)
   console.log(others)

   //nested objects
   let emp = {
      id:101,
      address:{
         city:'Mumbai',
         pin:1234
      }
   }
   let {address} = emp;

   console.log(address)
   let {address:{city,pin}} = emp
   console.log(city)
</script>

上記のコードの出力は以下のようになります-

101
{c2: 102, c3: 103}
{city: "Mumbai", pin: 1234}
Mumbai