JavaScript オブジェクトをマスターする: 動的プログラミングのバックボーン-jsチュートリアル-php.cn

Mastering JavaScript Objects: The Backbone of Dynamic Programming

JavaScript オブジェクト: 包括的なガイド

JavaScript オブジェクトは言語の基本的な構成要素であり、関連するデータと機能をグループ化する方法を提供します。これらは構造化データの操作の中心であり、JavaScript でのオブジェクト指向プログラミングの基礎です。

1. JavaScript のオブジェクトとは何ですか?

JavaScript のオブジェクトはプロパティのコレクションであり、各プロパティにはキー (または名前) と値があります。値は、他のオブジェクトや関数を含む任意のデータ型にすることができます。

例：

const person = {
  name: "Alice",
  age: 30,
  greet: function () {
    console.log("Hello, " + this.name);
  }
};

ログイン後にコピー

2.オブジェクトの作成

a.オブジェクトリテラル

オブジェクトを作成する最も一般的で簡単な方法。

const car = {
  brand: "Tesla",
  model: "Model S",
  year: 2023
};

ログイン後にコピー

b. new Object()の使用

Object コンストラクターを使用してオブジェクトを作成します。

const book = new Object();
book.title = "JavaScript: The Good Parts";
book.author = "Douglas Crockford";

ログイン後にコピー

c.コンストラクター関数の使用

同様のオブジェクトを作成するためのカスタムコンストラクター。

function Person(name, age) {
  this.name = name;
  this.age = age;
}
const user = new Person("Bob", 25);

ログイン後にコピー

d.クラスの使用

ES6 クラスを使用したオブジェクト作成のための最新の構文。

class Animal {
  constructor(type, sound) {
    this.type = type;
    this.sound = sound;
  }
}
const dog = new Animal("Dog", "Bark");

ログイン後にコピー

3.オブジェクトのプロパティへのアクセス

次を使用してプロパティにアクセスできます:

ドット表記:

  console.log(person.name);

ログイン後にコピー

括弧表記: 動的キーまたは特殊文字を含むキーに便利です。

  console.log(person["name"]);

ログイン後にコピー

4.プロパティの追加、更新、削除

追加または更新:

  person.hobby = "Reading"; // Adding a new property
  person.age = 31; // Updating an existing property

ログイン後にコピー

削除:

  delete person.hobby;

ログイン後にコピー

5.オブジェクト内のメソッド

メソッドは、オブジェクトに関連付けられた関数です。

const person = {
  name: "Alice",
  age: 30,
  greet: function () {
    console.log("Hello, " + this.name);
  }
};

ログイン後にコピー

6.プロパティを確認しています

オペレーター内:

const car = {
  brand: "Tesla",
  model: "Model S",
  year: 2023
};

ログイン後にコピー

hasOwnProperty メソッド:

const book = new Object();
book.title = "JavaScript: The Good Parts";
book.author = "Douglas Crockford";

ログイン後にコピー

7.オブジェクトのプロパティを反復処理する

for...in Loop: すべての列挙可能なプロパティを繰り返します。

function Person(name, age) {
  this.name = name;
  this.age = age;
}
const user = new Person("Bob", 25);

ログイン後にコピー

Object.keys: プロパティ名の配列を返します。

class Animal {
  constructor(type, sound) {
    this.type = type;
    this.sound = sound;
  }
}
const dog = new Animal("Dog", "Bark");

ログイン後にコピー

Object.values: プロパティ値の配列を返します。

  console.log(person.name);

ログイン後にコピー

Object.entries: キーと値のペアの配列を返します。

  console.log(person["name"]);

ログイン後にコピー

8.ネストされたオブジェクト

オブジェクトには、他のオブジェクトをプロパティとして含めることができます。

  person.hobby = "Reading"; // Adding a new property
  person.age = 31; // Updating an existing property

ログイン後にコピー

9.オブジェクトの分割

オブジェクトから値を変数に抽出します。

  delete person.hobby;

ログイン後にコピー

10.オブジェクトを使用したスプレッド演算子とレスト演算子

拡散演算子:

const calculator = {
  add: function (a, b) {
    return a + b;
  },
  subtract(a, b) {
    return a - b; // Shorthand syntax
  }
};
console.log(calculator.add(5, 3));

ログイン後にコピー

残りの演算子:

  console.log("name" in person); // true

ログイン後にコピー

11.オブジェクトメソッド (静的)

JavaScript はオブジェクトに対して多くの静的メソッドを提供します。

a. Object.assign

あるオブジェクトから別のオブジェクトにプロパティをコピーします。

  console.log(person.hasOwnProperty("age")); // true

ログイン後にコピー

b. Object.freeze

オブジェクトへの変更を禁止します。

  for (let key in person) {
    console.log(key, person[key]);
  }

ログイン後にコピー

c.オブジェクト.シール

更新は許可されますが、プロパティの追加または削除は禁止されます。

  console.log(Object.keys(person));

ログイン後にコピー

d. Object.create

指定されたプロトタイプを使用して新しいオブジェクトを作成します。

  console.log(Object.values(person));

ログイン後にコピー

12.オブジェクト参照とクローン作成

オブジェクトは、値ではなく参照によって保存および操作されます。

浅いクローン:

  console.log(Object.entries(person));

ログイン後にコピー

ディープクローン (JSON.parse と JSON.stringify を使用):

const company = {
  name: "Tech Corp",
  address: {
    city: "San Francisco",
    zip: "94105"
  }
};
console.log(company.address.city); // Access nested object

ログイン後にコピー

13.プロトタイプと継承

JavaScript のオブジェクトにはプロトタイプがあり、プロパティとメソッドの継承が可能です。

const { name, age } = person;
console.log(name, age);

ログイン後にコピー

14.オブジェクトの一般的な使用例

キーと値のペアの保存: オブジェクトは、動的プロパティのストレージに最適です。

  const newPerson = { ...person, gender: "Female" };

ログイン後にコピー

現実世界の実体を表す:

オブジェクトは多くの場合、ユーザーや製品などのデータ構造をモデル化します。
グループ化関数:

オブジェクトはモジュールまたは名前空間として機能します。

const person = {
  name: "Alice",
  age: 30,
  greet: function () {
    console.log("Hello, " + this.name);
  }
};

ログイン後にコピー

15.パフォーマンスに関する考慮事項

パフォーマンスを向上させるために、深いネストを最小限に抑えます。
パフォーマンスが重要なコードではオブジェクトを頻繁に作成しないようにします。
パフォーマンスが重要な場合は、大きなキーと値のペアのデータには Map または Set を使用します。

結論

JavaScript オブジェクトは強力かつ柔軟で、ほとんどのアプリケーションのバックボーンを形成します。それらの機能を理解することで、開発者は効率的で保守可能でスケーラブルなコードを作成できるようになります。オブジェクトを使いこなすことは、JavaScript に習熟するための基本的なステップです。

こんにちは、アバイ・シン・カタヤットです!
私はフロントエンドとバックエンドの両方のテクノロジーの専門知識を持つフルスタック開発者です。私はさまざまなプログラミング言語やフレームワークを使用して、効率的でスケーラブルでユーザーフレンドリーなアプリケーションを構築しています。
ビジネス用メールアドレス kaashshorts28@gmail.com までお気軽にご連絡ください。

以上がJavaScript オブジェクトをマスターする: 動的プログラミングのバックボーンの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。