ES6 en action: littéraux d'objets améliorés

ES6 Amélioration littérale des objets: simplifiez les opérations d'objets JavaScript

Les caractéristiques littérales d'objet améliorées introduites par ES6 simplifient considérablement le traitement d'objet dans JavaScript, principalement reflétée dans les noms d'attribut abrégés, les noms de méthode abrégés et les noms d'attribut calculés.

Les noms d'attributs abrégés rendent les définitions d'attribut plus concises;

Les littéraux d'objets améliorés peuvent être utilisés en conjonction avec d'autres fonctionnalités ES6 telles que les fonctions de flèche, les littéraux de modèle et les affectations déconstruites pour écrire plus concise et plus facile à lire.

Il convient de noter que les littéraux d'objets améliorés ne sont pas compatibles avec tous les navigateurs plus anciens, mais vous pouvez utiliser un traducteur tel que Babel pour convertir le code ES6 en code ES5 pour résoudre les problèmes de compatibilité.

Cet article explore les possibilités des littéraux d'objets JavaScript, en particulier les améliorations apportées par les mises à jour ECMAScript récentes. La création d'objets JavaScript utilisant la notation littérale est très puissante. Les nouvelles fonctionnalités introduites dans ES2015 (ES6) rendent le traitement des objets plus pratique dans tous les navigateurs modernes (sauf IE) et Node.js. Dans certaines langues, si une classe doit être déclarée avant la création d'un objet, il augmente le coût du temps de développement et de la puissance de traitement. Et dans JavaScript, les objets peuvent être créés dynamiquement facilement. Par exemple:

// ES5 兼容代码
var myObject = {
  prop1: 'hello',
  prop2: 'world',
  output: function() {
    console.log(this.prop1 + ' ' + this.prop2);
  }
};

myObject.output(); // hello world

Dans de nombreux cas, des objets ponctuels seront utilisés, tels que les paramètres de configuration, les définitions de modules, les paramètres de la méthode, les valeurs de retour de fonction, etc. ES2015 (ES6) ajoute une gamme de fonctionnalités pour améliorer les littéraux des objets.

Initialiser l'objet de la variable

Les propriétés de l'objet

sont généralement créées par des variables avec le même nom. Par exemple:

// ES5 代码
var a = 1, b = 2, c = 3;
var obj = {
  a: a,
  b: b,
  c: c
};

// obj.a = 1, obj.b = 2, obj.c = 3

Aucune répétition n'est requise dans ES6!

// ES6 代码
const a = 1, b = 2, c = 3;
const obj = { a, b, c };

// obj.a = 1, obj.b = 2, obj.c = 3

Ceci est utile lors du retour d'objets en utilisant un modèle de module révélateur (Effectivement espaces de noms pour le code pour éviter de nommer les conflits). Par exemple:

// ES6 代码
const lib = (() => {
  function sum(a, b) { return a + b; }
  function mult(a, b) { return a * b; }
  return { sum, mult };
})();

console.log(lib.sum(2, 3));  // 5
console.log(lib.mult(2, 3)); // 6

Vous avez peut-être vu des usages similaires dans le module ES6:

// lib.js
function sum(a, b) { return a + b; }
function mult(a, b) { return a * b; }
export { sum, mult };

Abréviation de la définition de la méthode d'objet

Les méthodes d'objet dans ES5 nécessitent des déclarations de fonction. Par exemple:

// ES5 代码
var lib = {
  sum: function(a, b) { return a + b; },
  mult: function(a, b) { return a * b; }
};

console.log(lib.sum(2, 3));  // 5
console.log(lib.mult(2, 3)); // 6

n'est plus nécessaire dans ES6, la syntaxe d'abréviation suivante peut être utilisée:

// ES6 代码
const lib = {
  sum(a, b) { return a + b; },
  mult(a, b) { return a * b; }
};

console.log(lib.sum(2, 3));  // 5
console.log(lib.mult(2, 3)); // 6

La fonction de flèche ES6 => ne peut pas être utilisée ici car la méthode nécessite un nom. Autrement dit, si vous nommez chaque méthode directement (similaire à ES5), vous pouvez utiliser la fonction de flèche. Par exemple:

// ES6 代码
const lib = {
  sum: (a, b) => a + b,
  mult: (a, b) => a * b
};

console.log(lib.sum(2, 3));  // 5
console.log(lib.mult(2, 3)); // 6

clé d'attribut dynamique

Dans ES5, les variables ne peuvent pas être utilisées comme noms de clés, bien qu'il puisse être ajouté après la création de l'objet par . Par exemple:

Dans

// ES5 代码
var key1 = 'one';
var obj = { two: 2, three: 3 };
obj[key1] = 1;

// obj.one = 1, obj.two = 2, obj.three = 3

es6, vous pouvez attribuer dynamiquement les touches d'objet en plaçant l'expression dans

carré crochets [. Par exemple: ]

// ES6 代码
const key1 = 'one';
const obj = { [key1]: 1, two: 2, three: 3 };

// obj.one = 1, obj.two = 2, obj.three = 3

Toute expression peut être utilisée pour créer une clé. Par exemple:

// ES6 代码
const i = 1;
const obj = { ['i' + i]: i };
console.log(obj.i1); // 1

Les clés dynamiques peuvent être utilisées pour les méthodes et les propriétés. Par exemple:

// ES5 兼容代码
var myObject = {
  prop1: 'hello',
  prop2: 'world',
  output: function() {
    console.log(this.prop1 + ' ' + this.prop2);
  }
};

myObject.output(); // hello world

si des propriétés et des méthodes dynamiques doivent être créées est une autre question. Le code peut être difficile à lire, il est préférable de créer une usine ou une classe d'objet.

(Le contenu suivant sera brièvement résumé en raison des limitations de l'espace, et les points de base seront conservés)

déconstruction (obtenir des variables des propriétés des objets)

La déconstruction

ES6 simplifie le processus d'extraction des valeurs d'attribut des objets aux variables.

Paramètres de fonction par défaut

Les paramètres par défaut ES6 et la déconstruction se combinent pour simplifier le traitement des paramètres de fonction, en particulier lors du traitement des paramètres facultatifs.

ES2018 (ES9) Attribut REST / SPREAT

L'opérateur REST / Scread de

ES2018 s'étend aux objets, permettant plus de flexibilité dans la gestion des propriétés des objets.

Résumé: ES6 Les littéraux d'objets améliorés ne changent pas la manière dont JavaScript fonctionne, mais il enregistre l'effort d'écriture de code et rend le code plus clair et plus concis.

(Une partie du contenu FAQ a été omise en raison des limitations de l'espace. Si nécessaire, vous pouvez poser des questions pour des questions spécifiques.)

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!