Es6-objects

ES6-オブジェクト

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

• オブジェクト*は、キーと値のペアのセットを含むインスタンスです。 プリミティブデータ型とは異なり、オブジェクトは複数の値または複雑な値を表すことができ、ライフタイムにわたって変化することがあります。 値は、スカラー値または関数、または他のオブジェクトの配列です。

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

オブジェクト初期化子

プリミティブ型と同様に、オブジェクトにはリテラル構文があります：*中括弧v *（\ {and}）。 以下は、オブジェクトを定義するための構文です。

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

Copy

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

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

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

objectName.propertyName

Copy

例：オブジェクト初期化子

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())

Copy

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

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

Tom
Hanks
Hello!!

Copy

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

例

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

Copy

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

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

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

Copy

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

bar

Copy

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

Object（）コンストラクター

JavaScriptは、オブジェクトを作成するための* Object（）*という特別なコンストラクター関数を提供します。 new演算子は、オブジェクトのインスタンスを作成するために使用されます。 オブジェクトを作成するには、new演算子の後にコンストラクターメソッドが続きます。

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

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

Copy

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

Object_name.property_key
OR
Object_name["property_key"]

Copy

例

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"])

Copy

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

Ford
Mustang
1987

Copy

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

例

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

Copy

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

undefined

Copy

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

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

例

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

Copy

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

Ford

Copy

コンストラクター関数

オブジェクトは、次の2つのステップを使用して作成することができます-

• ステップ1 *-コンストラクター関数を記述して、オブジェクトタイプを定義します。

以下は同じ構文です。

function function_name() {
   this.property_name = value
}

Copy

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

• ステップ2 *-新しい構文でオブジェクトのインスタンスを作成します。

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

Object_name.property_name

Copy

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

例-関数コンストラクターの使用

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

Copy

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

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

Ford
F123

Copy

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

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

Copy

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

Ford
F123

Copy

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

Copy

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

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

Admin
Guest

Copy

Object.assign（）関数

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

以下は同じ構文です。

Object.assign(target, ...sources)

Copy

例-オブジェクトの複製

"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])
}

Copy

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

Tom
E1001

Copy

例-オブジェクトのマージ

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);

Copy

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

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

Copy

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

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);

Copy

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

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

Copy

プロパティを削除する

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

例

//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"

Copy

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

false

Copy

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

オブジェクトの比較

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

例1-異なるオブジェクト参照

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

Copy

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

例2-単一オブジェクト参照

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

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

Copy

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

オブジェクトの非構造化

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

例

var emp = { name: 'John', Id: 3 }
var {name, Id} = emp
console.log(name)
console.log(Id)

Copy

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

John
3

Copy

注意-破壊を有効にするには、 _ nodeのファイルをノードとして実行します– harmony_destructuring file_name_