JavaScriptでオブジェクトメソッドを使用する方法

前書き

JavaScriptのObjectsは、key /valueのペアのコレクションです。値はpropertiesとmethodsで構成でき、文字列、数値、ブール値など、他のすべてのJavaScriptデータ型を含めることができます。

JavaScriptのすべてのオブジェクトは、親のObjectコンストラクターの子孫です。 Objectには、個々のオブジェクトの操作を簡単にするために使用およびアクセスできる便利な組み込みメソッドが多数あります。配列インスタンスで使用されるsort()やreverse()のようなArray prototype methodsとは異なり、ObjectメソッドはObjectコンストラクターで直接使用され、オブジェクトインスタンスをパラメーターとして使用します。これは静的メソッドとして知られています。

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

前提条件

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

JavaScript全般に関する追加のガイダンスについては、How To Code in 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オブジェクトには1つのプロパティ（position）がありますが、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を使用して、オブジェクトのキーと値を反復処理できます。

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

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

オブジェクトリテラルのこのspread syntaxは、シャロークローニングとも呼ばれます。

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()メソッドもあります。より高速でパフォーマンスが高いため、代わりに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のプロトタイプと継承を理解する]」をご覧ください。

TOC