JavaScriptでオブジェクトメソッドを使用する方法
序章
JavaScriptのObjectsは、 key / valueペアのコレクションです。 値は、プロパティおよびメソッドで構成でき、文字列、数値、ブール値など、他のすべてのJavaScriptデータ型を含めることができます。
JavaScriptのすべてのオブジェクトは、親のObjectコンストラクターの子孫です。 Object
には、個々のオブジェクトを簡単に操作するために使用およびアクセスできる便利な組み込みメソッドが多数あります。 配列インスタンスで使用されるsort()
やreverse()
のような配列プロトタイプメソッドとは異なり、オブジェクトメソッドはObject
コンストラクターで直接使用され、パラメータとしてのオブジェクトインスタンス。 これは静的メソッドとして知られています。
このチュートリアルでは、重要な組み込みオブジェクトメソッドについて説明します。以下の各セクションでは、特定のメソッドを扱い、使用例を示します。
前提条件
このチュートリアルを最大限に活用するには、オブジェクトの作成、変更、および操作に精通している必要があります。これについては、「JavaScriptでのオブジェクトの理解」の記事を参照してください。
JavaScript全般に関する追加のガイダンスについては、JavaScriptでコーディングする方法シリーズを確認してください。
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
オブジェクトにはposition
という1つのプロパティがありますが、job
の他のすべてのプロパティとメソッドはプロトタイプから利用できます。 Object.create()
は、重複を最小限に抑えてコードDRYを保持するのに役立ちます。
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
はオブジェクトのキーをキーの配列に変換するため、forEach()
配列メソッドを使用して、キーと値を反復処理できます。
// 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
は、length
プロパティを使用して変換された配列の長さを確認する場合にも役立ちます。
// Get the length of the keys const length = Object.keys(employees).length; console.log(length);
Output4
length
プロパティを使用して、employees
の4
プロパティをカウントすることができました。
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()
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()
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
オブジェクトをマージすることにより、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"}
オブジェクトリテラルのこの拡散構文は、シャロークローニングとも呼ばれます。
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()
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()
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
このメソッドは、オブジェクトに関する詳細情報を取得したり、別のオブジェクトのプロトタイプにアクセスできるようにしたりするのに役立ちます。
あるプロトタイプを別のオブジェクトに追加する、関連する Object.setPrototypeOf()メソッドもあります。
結論
オブジェクトには、オブジェクトの変更、保護、反復に役立つ多くの便利なメソッドがあります。 このチュートリアルでは、新しいオブジェクトを作成して割り当てる方法、オブジェクトのキーや値を反復処理する方法、オブジェクトをフリーズまたはシールする方法を確認しました。
JavaScriptオブジェクトを確認する必要がある場合は、「JavaScriptのオブジェクトについて」をお読みください。 プロトタイプチェーンに精通したい場合は、「JavaScriptでのプロトタイプと継承の理解」をご覧ください。