前書き

JavaScriptのhttps://www.digitalocean.com/community/tutorials/understanding-objects-in-javascript[Objects]は、* key * / * value ペアのコレクションです。 値は properties および methods *で構成でき、文字列、数値、ブール値など、他のすべてのJavaScriptデータ型を含めることができます。

JavaScriptのすべてのオブジェクトは、親https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object [+ Object +]コンストラクターから派生します。 + Object +`には、個々のオブジェクトを簡単に操作するために使用およびアクセスできる多くの便利な組み込みメソッドがあります。 https://www.digitalocean.com/community/tutorials/how-to-use-array-methods-in-javascript-mutator-methodsと異なり、「+ sort()+」や「+ reverse( )+ `は配列インスタンスで使用され、Objectメソッドは + Object + `コンストラクターで直接使用され、オブジェクトインスタンスをパラメーターとして使用します。 これは静的メソッドとして知られています。

このチュートリアルでは、重要な組み込みオブジェクトメソッドについて説明します。以下の各セクションでは、特定のメソッドを扱い、使用例を示します。

前提条件

このチュートリアルを最大限に活用するには、オブジェクトの作成、変更、操作に精通している必要があります。これについては、「https://www.digitalocean.com/community/tutorials/understanding-objects- in-javascript [JavaScriptのオブジェクトについて]」の記事。

JavaScript全般に関する追加のガイダンスについては、_https://www.digitalocean.com/community/tutorial_series/how-to-code-in-javascript [JavaScriptのコーディング方法] _シリーズをご覧ください。

Object.create()

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create [+ Object.create()+]メソッドは、新しいオブジェクトを作成してリンクするために使用されます既存のオブジェクトのプロトタイプに。

`+ job +`オブジェクトインスタンスを作成し、より具体的なオブジェクトに拡張できます。

// Initialize an object with properties and methods
const job = {
   position: 'cashier',
   type: 'hourly',
   isAvailable: true,
   showDetails() {
       const accepting = this.isAvailable ? 'is accepting applications' : "is not currently accepting applications";

       console.log(`The ${this.position} position is ${this.type} and ${accepting}.`);
   }
};

// Use Object.create to pass properties
const barista = Object.create(job);

barista.position = "barista";
barista.showDetails();
OutputThe barista position is hourly and is accepting applications.

+ barista +`オブジェクトには1つのプロパティ-+ position `-がありますが、 ` job `の他のすべてのプロパティとメソッドはプロトタイプから利用できます。 ` Object.create()+`は、重複を最小限に抑えてコードをhttps://www.digitalocean.com/community/tutorials/digitalocean-community-glossary#dry-development[DRY]に保つのに役立ちます。

Object.keys()

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys [+ Object.keys()+]は、オブジェクトのキーを含む配列を作成します。

オブジェクトを作成し、キーの配列を印刷できます。

// Initialize an object
const employees = {
   boss: 'Michael',
   secretary: 'Pam',
   sales: 'Jim',
   accountant: 'Oscar'
};

// Get the keys of the object
const keys = Object.keys(employees);

console.log(keys);
Output["boss", "secretary", "sales", "accountant"]

`+ Object.keys`を使用して、オブジェクトのキーと値を反復処理できます。

// Iterate through the keys
Object.keys(employees).forEach(key => {
   let value = employees[key];

    console.log(`${key}: ${value}`);
});
Outputboss: Michael
secretary: Pam
sales: Jim
accountant: Oscar

`+ Object.keys +`はオブジェクトの長さをチェックするのにも役立ちます。

// Get the length of the keys
const length = Object.keys(employees).length;

console.log(length);
Output4

+ length`プロパティを使用して、 + employees`の `+ 4 +`プロパティをカウントできました。

Object.values()

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/values [+ Object.values()+]は、オブジェクトの値を含む配列を作成します。

// Initialize an object
const session = {
   id: 1,
   time: `26-July-2018`,
   device: 'mobile',
   browser: 'Chrome'
};

// Get all values of the object
const values = Object.values(session);

console.log(values);
Output[1, "26-July-2018", "mobile", "Chrome"]

`+ Object.keys()`および ` Object.values()+`を使用すると、オブジェクトからデータを返すことができます。

Object.entries()

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries [+ Object.entries()+]は、キー/値ペアのネストされた配列を作成しますオブジェクト。

// Initialize an object
const operatingSystem = {
   name: 'Ubuntu',
   version: 18.04,
   license: 'Open Source'
};

// Get the object key/value pairs
const entries = Object.entries(operatingSystem);

console.log(entries);
Output[
   ["name", "Ubuntu"]
   ["version", 18.04]
   ["license", "Open Source"]
]

キーと値のペアの配列を取得したら、 `+ forEach()+`メソッドを使用してループし、結果を処理できます。

// Loop through the results
entries.forEach(entry => {
   let key = entry[0];
   let value = entry[1];

   console.log(`${key}: ${value}`);
});
Outputname: Ubuntu
version: 18.04
license: Open Source

`+ Object.entries()+`メソッドはオブジェクトインスタンス自体のプロパティのみを返し、プロトタイプを通じて継承されるプロパティは返しません。

Object.assign()

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign [+ Object.assign()+]は、あるオブジェクトから別のオブジェクトに値をコピーするために使用されます。

2つのオブジェクトを作成し、それらを `+ Object.assign()+`とマージできます。

// Initialize an object
const name = {
   firstName: 'Philip',
   lastName: 'Fry'
};

// Initialize another object
const details = {
   job: 'Delivery Boy',
   employer: 'Planet Express'
};

// Merge the objects
const character = Object.assign(name, details);

console.log(character);
Output{firstName: "Philip", lastName: "Fry", job: "Delivery Boy", employer: "Planet Express"}

スプレッド演算子( + …​ +)を使用して同じタスクを実行することもできます。 以下のコードでは、「+ name」オブジェクトと「+ details of」オブジェクトをマージして、「+ character」の宣言方法を変更します。

// Initialize an object
const name = {
   firstName: 'Philip',
   lastName: 'Fry'
};

// Initialize another object
const details = {
   job: 'Delivery Boy',
   employer: 'Planet Express'
};

// Merge the object with the spread operator
const character = {...name, ...details}

console.log(character);
Output{firstName: "Philip", lastName: "Fry", job: "Delivery Boy", employer: "Planet Express"}

オブジェクトリテラル内のhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax#Spread_in_object_literals [スプレッド構文]は、浅い複製としても知られています。

Object.freeze()

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze [+ Object.freeze()+]は、オブジェクトのプロパティと値の変更を防ぎ、プロパティがオブジェクトに追加またはオブジェクトから削除されるのを防ぎます。

// Initialize an object
const user = {
   username: 'AzureDiamond',
   password: 'hunter2'
};

// Freeze the object
const newUser = Object.freeze(user);

newUser.password = '*******';
newUser.active = true;

console.log(newUser);
Output{username: "AzureDiamond", password: "hunter2"}

上記の例では、パスワード「+ hunter2 」を「 * 」で上書きしようとしましたが、「 password 」プロパティは同じままでした。 また、新しいプロパティ「 active +」を追加しようとしましたが、追加されませんでした。

`+ Object.isFrozen()+`は、オブジェクトが凍結されているかどうかを判断するために使用でき、ブール値を返します。

Object.seal()

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/seal [+ Object.seal()+]は、新しいプロパティがオブジェクトに追加されるのを防ぎますが、許可します既存のプロパティの変更。 このメソッドは、 `+ Object.freeze()+`に似ています。 エラーを回避するために、以下のコードを実装する前にコンソールを更新してください。

// Initialize an object
const user = {
   username: 'AzureDiamond',
   password: 'hunter2'
};

// Seal the object
const newUser = Object.seal(user);

newUser.password = '*******';
newUser.active = true;

console.log(newUser);
Output{username: "AzureDiamond", password: "*******"}

新しい `+ active `プロパティはシールされたオブジェクトに追加されませんでしたが、 ` password +`プロパティは正常に変更されました。

Object.getPrototypeOf()

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getPrototypeOf [+ Object.getPrototypeOf()+]は、内部の非表示の + [[Prototype ]] + `オブジェクトの + proto + `プロパティからもアクセスできます。

この例では、 `+ Array +`プロトタイプにアクセスできる配列を作成できます。

const employees = ['Ron', 'April', 'Andy', 'Leslie'];

Object.getPrototypeOf(employees);
Output[constructor: ƒ, concat: ƒ, find: ƒ, findIndex: ƒ, pop: ƒ, …]

出力では、 + employees +`配列のプロトタイプが `+ pop ++ find +、およびその他の配列プロトタイプメソッドにアクセスできることがわかります。 これは、 `+ employees `プロトタイプを ` Array.prototype +`に対してテストすることで確認できます。

Object.getPrototypeOf(employees) === Array.prototype;
Outputtrue

このメソッドは、オブジェクトに関する詳細情報を取得したり、別のオブジェクトのプロトタイプにアクセスできるようにするのに役立ちます。

関連するhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/setPrototypeOf [+ Object.setPrototypeOf()+]メソッドもあり、1つのプロトタイプを追加します別のオブジェクト。 より高速でパフォーマンスが高いため、代わりに `+ Object.create()+`を使用することをお勧めします。

結論

オブジェクトには、オブジェクトの変更、保護、反復処理に役立つ多くの便利なメソッドがあります。 このチュートリアルでは、新しいオブジェクトを作成して割り当てる方法、オブジェクトのキーや値を反復処理する方法、オブジェクトをフリーズまたはシールする方法を確認しました。

JavaScriptオブジェクトを確認する必要がある場合は、「https://www.digitalocean.com/community/tutorials/understanding-objects-in-javascript[JavaScriptのオブジェクトを理解する]」を読むことができます。プロトタイプに慣れたい場合チェーンについては、「https://www.digitalocean.com/community/tutorials/understanding-prototypes-and-inheritance-in-javascript[JavaScriptのプロトタイプと継承を理解する]」をご覧ください。