Es6-objects

提供：Dev Guides
移動先:案内、検索

ES6-オブジェクト

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

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

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

オブジェクト初期化子

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

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

上記の例では、オブジェクトpersonを定義しています。 オブジェクトには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

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

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

例

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

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

Ford

コンストラクター関数

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

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

以下は同じ構文です。 

function function_name() {
   this.property_name = value
}

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

  • ステップ2 *-新しい構文でオブジェクトのインスタンスを作成します。
var Object_name= new function_name()
//Access the property value

Object_name.property_name

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

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

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)

例-オブジェクトの複製 

"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

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

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 }

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

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

プロパティを削除する

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"

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

false

コードスニペットは、オブジェクトからプロパティを削除します。 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

上記の例では、 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

上記の例では、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)

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

John
3

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

「https://www.finddevguides.com/index.php?title=Es6-objects&oldid=28513」から取得
Powered by MediaWiki