Maison >interface Web >js tutoriel >Que sont les objets en JavaScript ?

Que sont les objets en JavaScript ?

Patricia Arquette
Patricia Arquetteoriginal
2024-12-29 04:26:19169parcourir

What are Objects in JavaScript?

  • Définition : Les objets stockent des collections de données à clé et des entités plus complexes.
  • Création :
    • Syntaxe du constructeur d'objet : let user = new Object();
    • Syntaxe littérale d'objet : let user = {}; (préféré et largement utilisé).

Litéraux et propriétés

  • Les objets sont des collections de propriétés. Une propriété est une paire clé : valeur.
  let user = {
    name: 'John',
    age: 30,
  }
  • Accès aux propriétés :
    • Notation par points : user.name renvoie "John".
    • Notation entre crochets : user["name"] renvoie également "John".
  • Ajout/suppression de propriétés :
  user.isAdmin = true // Adding
  delete user.age // Removing

Coffrets spéciaux avec clés

  • Clés multi-mots : Utilisez des guillemets et des crochets.
  user['likes birds'] = true
  alert(user['likes birds']) // true
  • Clés dynamiques (propriétés calculées) :
    • Vous pouvez utiliser des variables ou des expressions comme clés.
  let fruit = 'apple'
  let bag = { [fruit]: 5 } // Equivalent to { "apple": 5 }

Propriétés abrégées

  • Quand un nom de variable correspond au nom de la propriété :
  function makeUser(name, age) {
    return { name, age } // Same as name: name, age: age
  }

Règles de nom de propriété

  • Les propriétés de l'objet peuvent utiliser des mots réservés ou des caractères spéciaux.
  • Les clés autres que des chaînes (par exemple, des nombres) sont converties en chaînes :
  let obj = { 0: 'test' }
  alert(obj[0]) // "test"

Propriétés de test et d'itération

  1. Existence de la propriété :
    • Utilisez "key" dans obj pour vérifier si une clé existe.
   let user = { age: undefined }
   alert('age' in user) // true
  1. Itérer avec for..in :
   let user = { name: 'John', age: 30 }
   for (let key in user) {
     alert(key) // Outputs: "name", "age"
     alert(user[key]) // Outputs: "John", 30
   }

Ordre de propriété

  • Clés entières : Triées par ordre croissant.
  • Clés non entières : Conservent leur ordre de création.

Exemple de code réaliste : un profil utilisateur

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

Ajout et suppression de propriétés

Les propriétés peuvent être ajoutées ou supprimées dynamiquement après la création d'un objet.

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

Propriétés calculées

Lors de la création d'objets, le nom de la propriété peut être calculé dynamiquement à l'aide de crochets.

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

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

Itération sur les propriétés de l'objet

En utilisant for...in, vous pouvez parcourir toutes les clés d'un objet.

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

Exemple réaliste : inventaire de produits

Voici comment les objets peuvent être utilisés dans un scénario pratique, comme la gestion d'un inventaire de produits :

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

Utilisation dans l'opérateur

L'opérateur in vérifie si une propriété existe dans un objet. C’est particulièrement utile lors de la vérification de propriétés facultatives ou ajoutées dynamiquement.

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

Résumé

Les objets sont au cœur de JavaScript, offrant flexibilité et fonctionnalités :

  • Les clés peuvent être des chaînes ou des symboles.
  • Accédez aux propriétés en utilisant la notation par points ou par crochets.
  • Utilisez for..in pour parcourir les clés.
  • Comprenez l'ordre des propriétés entières et non entières.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn