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

Output
The barista position is hourly and is accepting applications.

The 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 オブジェクトのキーをキーの配列に変換します。 forEach() 配列メソッドを使用して、キーと値を反復処理できます。

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

	 console.log(`${key}: ${value}`);
});

Output
boss: 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);

Output
4

を使用して length プロパティ、私たちは数えることができました 4 の性質 employees.

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

Output
name: Ubuntu
version: 18.04
license: Open Source

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

スプレッド演算子を使用することも可能です（...）同じタスクを実行します。 以下のコードでは、宣言方法を変更します character をマージすることにより name と details オブジェクト。

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

Output
true

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

あるプロトタイプを別のオブジェクトに追加する、関連する Object.setPrototypeOf（）メソッドもあります。

結論

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

JavaScriptオブジェクトを確認する必要がある場合は、「JavaScriptのオブジェクトについて」をお読みください。 プロトタイプチェーンに精通したい場合は、「JavaScriptでのプロトタイプと継承の理解」をご覧ください。