ホームページ >ウェブフロントエンド >jsチュートリアル >JavaScript のオブジェクトとは何ですか?

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

Patricia Arquette
Patricia Arquetteオリジナル
2024-12-29 04:26:19169ブラウズ

What are Objects in JavaScript?

  • 定義: オブジェクトは、データとより複雑なエンティティのキ​​ー付きコレクションを保存します。
  • 作成:
    • オブジェクト コンストラクターの構文: let user = new Object();
    • オブジェクト リテラル構文: let user = {}; (推奨され、広く使用されています)。

リテラルとプロパティ

  • オブジェクトはプロパティのコレクションです。プロパティはキーと値のペアです。
  let user = {
    name: 'John',
    age: 30,
  }
  • プロパティへのアクセス:
    • ドット表記: user.name は「John」を返します。
    • 角かっこ表記: user["name"] も「John」を返します。
  • プロパティの追加/削除:
  user.isAdmin = true // Adding
  delete user.age // Removing

キー付きの特殊ケース

  • マルチワード キー: 引用符と角括弧を使用します。
  user['likes birds'] = true
  alert(user['likes birds']) // true
  • 動的キー (計算されたプロパティ):
    • 変数または式をキーとして使用できます。
  let fruit = 'apple'
  let bag = { [fruit]: 5 } // Equivalent to { "apple": 5 }

短縮プロパティ

  • 変数名がプロパティ名と一致する場合:
  function makeUser(name, age) {
    return { name, age } // Same as name: name, age: age
  }

プロパティ名のルール

  • オブジェクトのプロパティでは予約語または特殊文字を使用できます。
  • 文字列以外のキー (数字など) は文字列に変換されます。
  let obj = { 0: 'test' }
  alert(obj[0]) // "test"

プロパティのテストと反復

  1. プロパティの存在:
    • obj で「key」を使用して、キーが存在するかどうかを確認します。
   let user = { age: undefined }
   alert('age' in user) // true
  1. for..in: の反復処理
   let user = { name: 'John', age: 30 }
   for (let key in user) {
     alert(key) // Outputs: "name", "age"
     alert(user[key]) // Outputs: "John", 30
   }

物件の注文

  • 整数キー: 昇順に並べ替えられます。
  • 非整数キー: 作成順序を保持します。

現実的なコードサンプル: ユーザープロファイル

let userProfile = {
  firstName: 'Jane',
  lastName: 'Smith',
  email: 'jane.smith@example.com',
  isVerified: true,
  address: {
    street: '123 Elm Street',
    city: 'Metropolis',
    postalCode: '12345',
  },
  interests: ['reading', 'hiking', 'coding'],

  // Method inside an object
  getFullName() {
    return `${this.firstName} ${this.lastName}`
  },

  // Dynamically updating properties
  updateEmail(newEmail) {
    this.email = newEmail
    console.log(`Email updated to ${this.email}`)
  },
}

// Accessing properties
console.log(userProfile.getFullName()) // Output: Jane Smith

// Updating email using the method
userProfile.updateEmail('jane.doe@example.com') // Output: Email updated to jane.doe@example.com

// Accessing nested properties
console.log(userProfile.address.city) // Output: Metropolis

// Iterating over interests
console.log('User Interests:')
userProfile.interests.forEach((interest) => console.log(interest))

プロパティの追加と削除

オブジェクトの作成後にプロパティを動的に追加または削除できます。

// Adding a new property
userProfile.phoneNumber = '555-1234'
console.log(userProfile.phoneNumber) // Output: 555-1234

// Deleting a property
delete userProfile.isVerified
console.log(userProfile.isVerified) // Output: undefined

計算されたプロパティ

オブジェクトを作成するとき、角括弧を使用してプロパティ名を動的に計算できます。

let key = 'favoriteColor'
let userPreferences = {
  [key]: 'blue',
  [key + 'Secondary']: 'green',
}

console.log(userPreferences.favoriteColor) // Output: blue
console.log(userPreferences.favoriteColorSecondary) // Output: green

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

for...in を使用すると、オブジェクト内のすべてのキーをループできます。

for (let key in userProfile) {
  console.log(`${key}: ${userProfile[key]}`)
}

現実的な例: 製品在庫

製品在庫の管理など、実際のシナリオでオブジェクトを使用する方法を次に示します。

  let user = {
    name: 'John',
    age: 30,
  }

演算子での使用

in 演算子は、オブジェクト内にプロパティが存在するかどうかを確認します。これは、オプションのプロパティまたは動的に追加されたプロパティを検証する場合に特に役立ちます。

  user.isAdmin = true // Adding
  delete user.age // Removing

概要

オブジェクトは JavaScript の中心であり、柔軟性と機能性を提供します。

  • キーには文字列または記号を使用できます。
  • ドットまたは括弧表記を使用してプロパティにアクセスします。
  • for..in を使用してキーを反復処理します。
  • 整数プロパティと非整数プロパティの順序を理解します。

以上がJavaScript のオブジェクトとは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。