En utilisant ce site, vous acceptez la Politique de confidentialité et les Conditions Générales de Vente.
Accepter
Le Blog de BBND – Actualités et nouvelles tendances du webLe Blog de BBND – Actualités et nouvelles tendances du web
  • News
  • Catégories
    • Actualités Numériques
    • Blockchain
    • Business Intelligence
    • Cybersécurité
    • Data
    • Développement Web
    • Hardware
    • Intelligence Artificielle
    • Mobile
    • Technologie
    • Web Design
    • Web Marketing
  • BBND
  • Qui sommes-nous
  • Initiatives
  • Réalisations
  • Formations
  • Recrutement
  • Contact
En cours de lecture : Maîtriser JavaScript 4/5 : destructuration de tableaux et d’objets, et speed operator
Partager
Notification Voir mes signets
Dernières actualités
Illustration représentant Rclone, un outil de synchronisation cloud en ligne de commande, avec une icône de cloud et flèches de transfert
Rclone : Guide complet pour synchroniser, sauvegarder et monter vos fichiers cloud
Technologie
Schéma comparatif entre IPMI, PiKVM et NanoKVM pour le contrôle à distance
IPMI, PiKVM ou NanoKVM : Quelle solution KVM choisir ?
Hardware
Des packages npm malveillants compromettent Cursor, volent des identifiants et cryptomonnaies, et déploient des chevaux de Troie. Détail des campagnes.
Une faille dans Cursor : plus de 3 200 développeurs infectés via des packages npm malveillants
Cybersécurité
Filament v3 laravel
Pourquoi Filament V3 change-t-il la donne pour les développeurs Laravel ?
Développement Web
Illustration d’un cerveau connecté à une intelligence artificielle, symbolisant la recherche contre Alzheimer
L’IA dévoile une cause possible d’Alzheimer et identifie une piste thérapeutique prometteuse
Intelligence Artificielle
Aa
Le Blog de BBND – Actualités et nouvelles tendances du webLe Blog de BBND – Actualités et nouvelles tendances du web
Aa
Recherche
  • News
  • Catégories
    • Actualités Numériques
    • Blockchain
    • Business Intelligence
    • Cybersécurité
    • Data
    • Développement Web
    • Hardware
    • Intelligence Artificielle
    • Mobile
    • Technologie
    • Web Design
    • Web Marketing
  • BBND
    • Qui sommes-nous
    • Initiatives
    • Réalisations
    • Formations
    • Recrutement
    • Contact
Suivez-nous
  • Personnaliser mes sujets d’intérêts
  • Mes signets
© 2023 BBND All Rights Reserved.
Le Blog de BBND – Actualités et nouvelles tendances du web > Tous les articles > Développement Web > Maîtriser JavaScript 4/5 : destructuration de tableaux et d’objets, et speed operator
Développement Web

Maîtriser JavaScript 4/5 : destructuration de tableaux et d’objets, et speed operator

Hamza L.
De Hamza L. 22 septembre 2023
Partager
4 min de lecture
logo js avec texte en jaune sur fond noir
Logo Javascript surmonté du texte maîtrisez Javascript 4/5
Partager

Les techniques abrégées en JavaScript simplifient considérablement votre code et lui apportent meilleure lisibilité. Cet article explore quelques techniques puissantes de raccourcissement en JavaScript qui, en plus d’améliorer vos compétences en programmation, augmenteront aussi votre productivité.

Affectation par destructuration

L’affectation par destructuration décompose les valeurs des tableaux ou les propriétés des objets en variables distinctes, facilitant ainsi le travail avec des structures de données complexes.

// La version longue
const person = { firstName: 'John', lastName: 'Doe' };
const firstName = person.firstName;
const lastName = person.lastName;

// La version optimisée
const person = { firstName: 'John', lastName: 'Doe' };
const { firstName, lastName } = person;

Destructuration de tableaux

La déstructuration de tableau extrait des éléments individuels d’un tableau et les assigne à des variables distinctes.

const numbers = [1, 2, 3];
const [first, second, third] = numbers;

console.log(first);  // 1
console.log(second); // 2
console.log(third);  // 3

Destructuration d’objets

Similaire à la déstructuration de tableaux, la déstructuration d’objets décompose les propriétés d’un objet en variables, simplifiant l’accès aux propriétés.

const person = { firstName: 'John', lastName: 'Doe' };
const { firstName, lastName } = person;

console.log(firstName); // 'John'
console.log(lastName);  // 'Doe'

Abréviation d’objets

L’abréviation d’objets simplifie le processus de création d’objets avec des propriétés ayant le même nom que des variables.

const name = 'Alice';
const age = 30;

const person = { name, age };

console.log(person); // { name: 'Alice', age: 30 }

Propagation de tableaux

L’opérateur de propagation de tableaux peut être utilisé pour créer un nouveau tableau en fusionnant des tableaux existants ou en ajoutant des éléments à un tableau.

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];

const mergedArray = [...array1, ...array2];

console.log(mergedArray); // [1, 2, 3, 4, 5, 6]

Syntaxe de propagation

La syntaxe de propagation (…) décompacte les éléments des tableaux ou les propriétés des objets dans de nouveaux tableaux ou objets. Elle simplifie des tâches telles que le clonage de tableaux, la fusion et les arguments de fonctions.

const nombres = [1, 2, 3];
const clone = [...nombres];
const fusionTableau = [...nombres, 4, 5, 6];

Propagation d’objets

Similairement à la propagation de tableaux, vous pouvez, avec la propagation d’objets, fusionner des objets ou d’ajouter des propriétés à un objet facilement.

const user = { nom: 'Eric', age: 45 };
const updatedUser = { ...user, age: 32 };


Les affectations par déstructuration, la syntaxe de propagation et l’abréviation d’objets vous facilitent la manipulation des structures de données complexes et de réduisent le code redondant. En appliquant ces techniques abrégées dans vos projets, vous constaterez une meilleure lisibilité et une productivité accrue dans votre parcours de développement JavaScript.

Vous souhaitez approfondir les techniques pour améliorer votre code JavaScript ? Consultez le dernier article de cette série, sur Async/Await, les fonctions fléchées et les exports/imports.

Vous devriez également aimer

Pourquoi Filament V3 change-t-il la donne pour les développeurs Laravel ?

Tailwind CSS v4.0 : La révolution de la productivité Front-End

JavaScript Temporal : La révolution de la gestion des dates enfin arrivée

Pourquoi TypeScript est l’avenir du développement web

VSCode et npm : la menace des extensions frauduleuses

Partager cet article
Facebook Twitter LinkedIn Copier le lien Imprimer
Qu´en avez-vous pensé ?
Ennuyant0
Triste0
Révoltant0
Drôle0
Accablant0
Plaisant0
Malin0
Surprenant0
Waouh0
Article précédent Affichage du bandeau du site bun Bun, la révolution Javascript qui pourrait bien détrôner NodeJS
Article suivant OpenBSD, la puissance de l’open source en cybersécurité
Laisser un avis

Laisser un avis Annuler la réponse

Vous devez vous connecter pour publier un commentaire.

Restez connecté

Facebook Like
Twitter Suivre
Instagram Suivre
Youtube S´inscrire
banner banner
Faites confiance à BBND
Développez tous vos projets digitaux grâce à une équipe d'experts
En savoir plus

Dernières actualités

Illustration représentant Rclone, un outil de synchronisation cloud en ligne de commande, avec une icône de cloud et flèches de transfert
Rclone : Guide complet pour synchroniser, sauvegarder et monter vos fichiers cloud
Technologie
Schéma comparatif entre IPMI, PiKVM et NanoKVM pour le contrôle à distance
IPMI, PiKVM ou NanoKVM : Quelle solution KVM choisir ?
Hardware
Des packages npm malveillants compromettent Cursor, volent des identifiants et cryptomonnaies, et déploient des chevaux de Troie. Détail des campagnes.
Une faille dans Cursor : plus de 3 200 développeurs infectés via des packages npm malveillants
Cybersécurité
Filament v3 laravel
Pourquoi Filament V3 change-t-il la donne pour les développeurs Laravel ?
Développement Web
//

Le blog BBND
Actualités et nouvelles tendances du numérique

Catégories news

  • Actualités Numériques
  • Blockchain
  • Business Intelligence
  • Cybersécurité
  • Data
  • Développement Web
  • Intelligence Artificielle
  • Hardware
  • Mobile
  • Technologie
  • Web Design
  • Web Marketing

Notre société

  • Qui sommes-nous
  • Initiatives
  • Réalisations
  • Formations
  • Recrutement
  • Contact

Liens utiles

  • Mentions légales
  • CGV
  • Politique de confidentialité

Nos services

  • Développement web/mobile/desktop
  • SEO
  • Stratégie de communication & Community management
  • Audit d’ergonomie
  • Solutions de cybersécurité
  • Outils de cybersécurité
  • E-droit & E-réputation
  • Innovation de service & Innovation technologique
  • Intelligence Artificielle & Business Intellligence
  • Design graphique
  • Jeux mobile
  • Motion design
  • Impression tout support
Le Blog de BBND – Actualités et nouvelles tendances du webLe Blog de BBND – Actualités et nouvelles tendances du web
Suivez-nous

© 2023 BBND. All Rights Reserved.

Un projet digital ?

Notre équipe d'experts couvre de larges domaines du numérique

Contactez-nous pour nous en faire part !

Supprimé de la liste de lecture

Annuler
Welcome Back!

Sign in to your account

Mot de passe perdu ?