Noms de propriétés calculés en JavaScript : comment les crochets définissent-ils les propriétés des objets ?

Dévoilement des noms de propriétés calculés : que se cache-t-il entre les crochets ?

Dans le domaine de JavaScript, où les littéraux d'objet règnent en maître, un curieux une syntaxe a émergé : des crochets entourant les noms de propriétés. Cette notation énigmatique, ornée de « noms de propriétés calculés », a récemment orné les pages des spécifications ES6.

Introduite de manière énigmatique dans l'exemple fourni, la propriété dist domine un objet interne, avec sa propriété files hébergeant un spécimen syntaxique particulier :

dist: {
    files: {
      [bpr + 'lib/Monster.min.js']: ['<%= concat.dist.dest %>']
    }
  }
}

Intrigués par cette expression énigmatique, nous plongeons plus profondément dans le monde énigmatique de la propriété calculée

Démystifier les noms de propriétés calculés

Comme MDN le proclame de manière éclairante : "À partir d'ECMAScript 2015, la syntaxe d'initialisation d'objet prend également en charge les noms de propriétés calculés. Cela vous permet de mettre une expression entre parenthèses [], qui sera calculée comme nom de propriété."

Essentiellement, ces les crochets nous donnent le pouvoir de générer dynamiquement des noms de propriétés basés sur les résultats des expressions évaluées. Cette capacité s'avère inestimable lors de la construction de propriétés d'objet dont les noms ne peuvent pas être déterminés de manière statique.

Éclairer la syntaxe

La syntaxe des noms de propriétés calculés est simple : entourez l'expression qui détermine le nom de la propriété entre crochets. Cette expression peut aller de simples références de variable à des calculs complexes :

const propertyName = 'age';
const object = {
  [propertyName]: 25
};

Dans cet exemple, le nom de la propriété est généré dynamiquement par la valeur de la variable propertyName.

Empowering Dynamic Construction d'objets

Les noms de propriétés calculés permettent la création d'objets dynamiques où les noms de propriétés sont déterminés au moment de l'exécution. Cette flexibilité devient particulièrement utile lors de la génération de structures de données basées sur des données externes ou des entrées utilisateur :

const data = {
  firstName: 'John',
  lastName: 'Doe',
  [`${firstName} ${lastName}`]: 'John Doe'
};

Ce code crée dynamiquement une propriété en utilisant la concaténation des propriétés firstName et lastName. L'objet résultant aura une propriété nommée "John Doe", facilitant l'accès au nom complet.

En résumé

Noms de propriétés calculés, introduits avec ES6, améliorez les capacités de construction d'objets de JavaScript en permettant la génération dynamique de noms de propriétés via des expressions évaluées. Cette flexibilité ouvre une vaste gamme de possibilités pour construire des structures de données sophistiquées et expressives basées sur des objets.

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!