Heim >Web-Frontend >js-Tutorial >Was sind Objekte in JavaScript?

Was sind Objekte in JavaScript?

Patricia Arquette
Patricia ArquetteOriginal
2024-12-29 04:26:19177Durchsuche

What are Objects in JavaScript?

  • Definition:Objekte speichern verschlüsselte Datensammlungen und komplexere Entitäten.
  • Erstellung:
    • Objektkonstruktorsyntax: let user = new Object();
    • Objektliteral-Syntax: let user = {}; (bevorzugt und weit verbreitet).

Literale und Eigenschaften

  • Objekte sind Sammlungen von Eigenschaften. Eine Eigenschaft ist ein Schlüssel:Wert-Paar.
  let user = {
    name: 'John',
    age: 30,
  }
  • Auf Eigenschaften zugreifen:
    • Punktnotation: user.name gibt „John“ zurück.
    • Notation in eckigen Klammern: user["name"] gibt auch „John“ zurück.
  • Eigenschaften hinzufügen/entfernen:
  user.isAdmin = true // Adding
  delete user.age // Removing

Sonderfälle mit Schlüsseln

  • Mehrwortschlüssel: Verwenden Sie Anführungszeichen und eckige Klammern.
  user['likes birds'] = true
  alert(user['likes birds']) // true
  • Dynamische Schlüssel (berechnete Eigenschaften):
    • Sie können Variablen oder Ausdrücke als Schlüssel verwenden.
  let fruit = 'apple'
  let bag = { [fruit]: 5 } // Equivalent to { "apple": 5 }

Kurzeigenschaften

  • Wenn ein Variablenname mit dem Eigenschaftsnamen übereinstimmt:
  function makeUser(name, age) {
    return { name, age } // Same as name: name, age: age
  }

Regeln für Objektnamen

  • Objekteigenschaften können reservierte Wörter oder Sonderzeichen verwenden.
  • Nicht-String-Schlüssel (z. B. Zahlen) werden in Strings umgewandelt:
  let obj = { 0: 'test' }
  alert(obj[0]) // "test"

Eigenschaften testen und iterieren

  1. Eigenschaftsexistenz:
    • Verwenden Sie „key“ in obj, um zu prüfen, ob ein Schlüssel vorhanden ist.
   let user = { age: undefined }
   alert('age' in user) // true
  1. Iterieren mit for..in:
   let user = { name: 'John', age: 30 }
   for (let key in user) {
     alert(key) // Outputs: "name", "age"
     alert(user[key]) // Outputs: "John", 30
   }

Eigentumsordnung

  • Ganzzahlschlüssel:Aufsteigend sortiert.
  • Nicht-ganzzahlige Schlüssel:Behalten Sie ihre Erstellungsreihenfolge bei.

Realistisches Codebeispiel: Ein Benutzerprofil

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

Hinzufügen und Löschen von Eigenschaften

Eigenschaften können dynamisch hinzugefügt oder entfernt werden, nachdem ein Objekt erstellt wurde.

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

Berechnete Eigenschaften

Beim Erstellen von Objekten kann der Eigenschaftsname mithilfe von eckigen Klammern dynamisch berechnet werden.

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

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

Iterieren über Objekteigenschaften

Mit for...in können Sie alle Schlüssel in einem Objekt durchlaufen.

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

Realistisches Beispiel: Produktinventar

So können Objekte in einem praktischen Szenario verwendet werden, beispielsweise bei der Verwaltung eines Produktbestands:

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

Verwendung im Operator

Der in-Operator prüft, ob eine Eigenschaft in einem Objekt vorhanden ist. Dies ist besonders nützlich, wenn optionale oder dynamisch hinzugefügte Eigenschaften überprüft werden.

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

Zusammenfassung

Objekte sind für JavaScript von zentraler Bedeutung und bieten Flexibilität und Funktionalität:

  • Schlüssel können Zeichenfolgen oder Symbole sein.
  • Zugriff auf Eigenschaften mithilfe der Punkt- oder Klammernotation.
  • Verwenden Sie for..in, um über Schlüssel zu iterieren.
  • Verstehen Sie die Reihenfolge ganzzahliger und nicht ganzzahliger Eigenschaften.

Das obige ist der detaillierte Inhalt vonWas sind Objekte in JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn