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

Que sont les objets en JavaScript ?

Patricia Arquette
Libérer: 2024-12-29 04:26:19
original
174 Les gens l'ont consulté

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,
  }
Copier après la connexion
Copier après la connexion
  • 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
Copier après la connexion
Copier après la connexion

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
Copier après la connexion
  • 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 }
Copier après la connexion

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
  }
Copier après la connexion

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"
Copier après la connexion

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
Copier après la connexion
  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
   }
Copier après la connexion

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))
Copier après la connexion

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
Copier après la connexion

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
Copier après la connexion

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]}`)
}
Copier après la connexion

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,
  }
Copier après la connexion
Copier après la connexion

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
Copier après la connexion
Copier après la connexion

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!

source:dev.to
Déclaration de ce site Web
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
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal