Déstructuration — extraire des valeurs d'objets et de tableaux

Tu ne veux que le numéro de commande et le total d'un objet commande ? Écrire order.orderId et order.total encore et encore rallonge le code. Plus tu as de champs à extraire, plus les lignes commencent toutes par le même order..

Cet article couvre la déstructuration, qui extrait d'un coup, dans des variables, les seules valeurs dont tu as besoin, en faisant correspondre des noms de clés ou des positions.

Extraire par nom uniquement ce dont tu as besoin — déstructurer un objet

Pour extraire le numéro de commande, le total et le nom du client d'un même objet commande, tu écrirais une ligne comme const orderId = order.orderId; pour chaque champ. À force de répéter le même order., on ne voit plus d'un coup d'œil quelle valeur chaque ligne va réellement chercher.

La déstructuration (une syntaxe qui extrait d'un coup plusieurs valeurs dans des variables, en faisant correspondre les noms de clés d'un objet ou les positions d'un tableau) permet d'écrire tout ça en une ligne : const { orderId, total } = order;. Les noms de clés écrits entre les {} de gauche deviennent directement des noms de variables, et chacune reçoit la valeur de la propriété qui porte le même nom.

Quand une clé est absente, tu ajoutes une valeur par défaut avec =, comme dans const { shippingFee = 500 } = order;. Pour recevoir la valeur sous un autre nom, tu écris const { orderId: id } = order;.

Depuis un objet imbriqué, tu peux extraire une valeur directement, avec la forme const { customer: { name } } = order;. Ce qui suit le : change de sens selon que c'est un nom de variable ou des accolades.

customer: name reçoit la valeur de customer dans une variable name, tandis que customer: { name } extrait le name situé à l'intérieur de customer. Cette seconde forme ne crée aucune variable customer.

const order = {
  orderId: "ORD-1268",
  total: 12800,
  customer: { name: "Maya Chen", email: "maya@example.com" },
};

// Les noms de clés deviennent directement les noms de variables
const { orderId, total } = order;
console.log(orderId);          // ORD-1268
console.log(total);            // 12800

// Ajoute une valeur par défaut avec = pour une clé manquante
const { couponCode = "aucun" } = order;
console.log(couponCode);       // aucun

// Écris un nom de variable différent après le :
const { total: totalAmount } = order;
console.log(totalAmount);      // 12800

// Extrais une valeur directement de l'intérieur d'un objet imbriqué
const { customer: { email } } = order;
console.log(email);            // maya@example.com

Extrais d'un objet commande, une ligne à la fois, les seules valeurs utiles à l'affichage. order est déjà déclaré.

① Extrais d'un coup le numéro de commande et le total, et affiche-les sous la forme « ORD-3120 / 8600 euros ».

② Extrais le nom du client directement depuis l'intérieur de l'objet imbriqué, et affiche-le.

③ Extrais les frais de port avec 500 comme valeur par défaut, et affiche-les. order n'a pas de champ de frais de port.

④ Reçois le numéro de commande sous le nom id, et affiche-le.

(Si tout s'exécute correctement, une explication apparaîtra.)

Recevoir par position — déstructuration de tableau et rest

Les tableaux n'ont pas de noms de clés : la correspondance se fait donc par la position d'où tu extrais. Tu veux traiter séparément le premier article d'un panier et le 2e ? Au lieu d'écrire cart[0] et cart[1], tu peux écrire les noms de variables les uns à la suite des autres et les recevoir d'un coup.

La syntaxe est const [firstItem, secondItem] = cart;. Les valeurs des index 0 et 1 sont affectées aux variables, de gauche à droite. Pour sauter une position, place simplement une virgule, comme dans const [, secondItem] = cart;.

Pour une position sans élément, tu peux ajouter une valeur par défaut avec = "(aucun)". Attention : la valeur par défaut ne s'applique que si la valeur à cette position est undefined.

Un null, lui, est conservé tel quel. Pour remplacer aussi null par une valeur par défaut, utilise ??, vu dans l'article précédent.

Pour récupérer d'un coup tout ce qui reste, utilise la syntaxe rest (l'ajout de ... dans le membre de gauche d'une déstructuration, pour regrouper tout ce que tu n'as pas reçu dans un seul tableau ou objet).

Si tu écris const [firstItem, ...restItems] = cart;, restItems reçoit tout à partir du 2e article, sous forme de tableau. ... ne peut se placer qu'à la toute fin du membre de gauche.

const cart = ["Souris sans fil", "Hub USB-C", "Bras d'écran"];

// Reçoit de gauche à droite
const [firstItem, secondItem] = cart;
console.log(firstItem);            // Souris sans fil
console.log(secondItem);           // Hub USB-C

// Une simple virgule saute cette position
const [, , thirdItem] = cart;
console.log(thirdItem);            // Bras d'écran

// ... reçoit tout ce qui reste comme un tableau (renommé puisque le 1er est déjà utilisé ci-dessus)
const [headItem, ...tailItems] = cart;
console.log(tailItems.join(", "));  // Hub USB-C, Bras d'écran

// Les objets peuvent aussi regrouper le reste
const product = { name: "Hub USB-C", price: 2480, stock: 12 };
const { name, ...spec } = product;
console.log(Object.keys(spec).join(", "));  // price, stock

Traite le contenu d'un panier en séparant le premier article de tout le reste. cart est déjà déclaré.

① Sépare-le en deux : le premier article d'un côté, le reste regroupé dans un tableau de l'autre, puis affiche le premier article.

② Affiche combien d'articles contient « le reste ».

③ Extrais uniquement le 2e article, avec une syntaxe qui saute le premier, et affiche-le.

④ Saute les 4 premiers éléments avec des virgules pour extraire le 5e, en lui donnant « (aucun) » comme valeur par défaut, puis affiche-le.

Traite un objet produit en séparant le champ utilisé pour l'affichage de tous les autres. product est déjà déclaré.

① Extrais uniquement le nom du produit, en regroupant le reste dans un objet à part, puis affiche le nom.

② Affiche les clés de l'objet qui regroupe le reste, séparées par « , ».

③ Extrais la quantité en stock avec 0 comme valeur par défaut pour le cas où la clé est absente, et affiche-la.