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

Was sind Objekte in JavaScript?

Patricia Arquette
Freigeben: 2024-12-29 04:26:19
Original
184 Leute haben es durchsucht

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,
  }
Nach dem Login kopieren
Nach dem Login kopieren
  • 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
Nach dem Login kopieren
Nach dem Login kopieren

Sonderfälle mit Schlüsseln

  • Mehrwortschlüssel: Verwenden Sie Anführungszeichen und eckige Klammern.
  user['likes birds'] = true
  alert(user['likes birds']) // true
Nach dem Login kopieren
  • 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 }
Nach dem Login kopieren

Kurzeigenschaften

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

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"
Nach dem Login kopieren

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
Nach dem Login kopieren
  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
   }
Nach dem Login kopieren

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))
Nach dem Login kopieren

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
Nach dem Login kopieren

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
Nach dem Login kopieren

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]}`)
}
Nach dem Login kopieren

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,
  }
Nach dem Login kopieren
Nach dem Login kopieren

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
Nach dem Login kopieren
Nach dem Login kopieren

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!

Quelle:dev.to
Erklärung dieser Website
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
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage