Maison interface Web js tutoriel Imutabilité en JavaScript

Imutabilité en JavaScript

Feb 20, 2025 am 11:59 AM

Immutability in JavaScript

Imutabilité: une pierre angulaire de la programmation fonctionnelle, offrant également des avantages importants à la programmation orientée objet. Cet article explore l'immutabilité en JavaScript, détaillant sa mise en œuvre et ses avantages.

Concepts clés:

  • Imutabilité: Une fois créé, l'état d'un objet immuable reste inchangé. Cela contraste avec les objets mutables, dont l'état peut être modifié. En JavaScript, les primitives comme les chaînes et les nombres sont immuables, tandis que les tableaux et les objets sont mutables.
  • Structures de données immuables: Atteindre l'immuabilité avec les tableaux et les objets nécessite de créer de nouvelles instances lors de la modification, au lieu de modifier l'original. JavaScript manque de support intégré, nécessitant des bibliothèques comme Mori ou Immutable.js.
  • Performance: Tout en apparaissant initialement à forte intensité de mémoire, l'immuabilité améliore souvent les performances par le «partage structurel». Il simplifie également le suivi des changements, crucial dans les cadres d'interface utilisateur.

Comprendre l'immutabilité:

La mutabilité, tout simplement, signifie que quelque chose est sujet à changer. En programmation, les objets mutables permettent des modifications de leur état. L'immuabilité est l'inverse: une valeur immuable reste constante après la création. De nombreuses valeurs courantes sont immuables. Par exemple:

const statement = "I am an immutable value";
const otherStr = statement.slice(8, 17); 
Copier après la connexion

otherStr est une nouvelle chaîne; statement reste inchangé. Les méthodes de chaîne créent de nouvelles chaînes; Ils ne modifient pas l'original. En effet, les cordes sont immuables. Les nombres partagent cette caractéristique.

Mutabilité en javascript:

Les chaînes et les nombres intégrés de JavaScript sont immuables. Cependant, les tableaux sont mutables:

let arr = [];
let v2 = arr.push(2); // arr is modified; v2 holds the new length
Copier après la connexion

an ImmutableArray se comporterait différemment:

const arr = new ImmutableArray([1, 2, 3, 4]);
const v2 = arr.push(5);

arr.toArray(); // [1, 2, 3, 4]
v2.toArray();  // [1, 2, 3, 4, 5]
Copier après la connexion

De même, un ImmutableMap (remplacement des objets) renvoie un nouvel objet lorsque les propriétés sont "définies":

const person = new ImmutableMap({name: "Chris", age: 32});
const olderPerson = person.set("age", 33);

person.toObject(); // {name: "Chris", age: 32}
olderPerson.toObject(); // {name: "Chris", age: 33}
Copier après la connexion

Imutabilité dans la pratique (en utilisant immuable.js):

Étant donné que JavaScript manque de structures immuables natives, nous utilisons une bibliothèque comme Immutable.js. Voyons un exemple de jeu de mines. La carte est une carte immuable, avec tiles comme liste immuable de cartes immuables (chaque tuile). L'initialisation utilise la fonction immutable.js S fromJS:

function createGame(options) {
  return Immutable.fromJS({
    cols: options.cols,
    rows: options.rows,
    tiles: initTiles(options.rows, options.cols, options.mines)
  });
}
Copier après la connexion

Les fonctions de logique de jeu prennent la structure immuable, renvoyant de nouvelles instances. revealTile signale une tuile comme révélé. Avec des données mutables:

function revealTile(game, tile) {
  game.tiles[tile].isRevealed = true; //Direct mutation
}
Copier après la connexion

Avec des données immuables, nous utilisons setIn:

function revealTile(game, tile) {
  return game.setIn(['tiles', tile, 'isRevealed'], true);
}
Copier après la connexion

setIn Renvoie une nouvelle instance immuable. Pour la robustesse, nous pouvons vérifier l'existence des tuiles en utilisant getIn:

function revealTile(game, tile) {
  return game.getIn(['tiles', tile]) ?
    game.setIn(['tiles', tile, 'isRevealed'], true) :
    game;
}
Copier après la connexion

Considérations de performance:

Bien que la création de nouveaux objets puisse sembler inefficace, le "partage structurel" minimise les frais généraux de mémoire. L'impact de la performance est souvent compensé par les avantages de l'immuabilité.

Amélioration du suivi des changements:

L'immuabilité simplifie le suivi des changements dans les cadres d'interface utilisateur. La comparaison des références (a === b) détermine efficacement si l'état a changé.

Conclusion:

L'immuabilité améliore la qualité et la maintenabilité du code. Tout en nécessitant une courbe d'apprentissage, ses avantages l'emportent souvent sur les défis initiaux. Explorez le code de code fourni (lien non fourni dans le texte d'origine) pour un exemple de dragueur de mines complet.

(Section FAQS supprimée pour la concision, car il s'agit d'une répétition d'informations déjà présentes dans le texte principal. Si vous le souhaitez, veuillez me le faire savoir.)

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!

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

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

Video Face Swap

Video Face Swap

Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Que dois-je faire si je rencontre l'impression de code brouillé pour les reçus en papier thermique frontal? Que dois-je faire si je rencontre l'impression de code brouillé pour les reçus en papier thermique frontal? Apr 04, 2025 pm 02:42 PM

Des questions et des solutions fréquemment posées pour l'impression de billets thermiques frontaux pour le développement frontal, l'impression de billets est une exigence commune. Cependant, de nombreux développeurs mettent en œuvre ...

Démystifier javascript: ce qu'il fait et pourquoi c'est important Démystifier javascript: ce qu'il fait et pourquoi c'est important Apr 09, 2025 am 12:07 AM

JavaScript est la pierre angulaire du développement Web moderne, et ses principales fonctions incluent la programmation axée sur les événements, la génération de contenu dynamique et la programmation asynchrone. 1) La programmation axée sur les événements permet aux pages Web de changer dynamiquement en fonction des opérations utilisateur. 2) La génération de contenu dynamique permet d'ajuster le contenu de la page en fonction des conditions. 3) La programmation asynchrone garantit que l'interface utilisateur n'est pas bloquée. JavaScript est largement utilisé dans l'interaction Web, les applications à une page et le développement côté serveur, améliorant considérablement la flexibilité de l'expérience utilisateur et du développement multiplateforme.

Qui est payé plus de python ou de javascript? Qui est payé plus de python ou de javascript? Apr 04, 2025 am 12:09 AM

Il n'y a pas de salaire absolu pour les développeurs Python et JavaScript, selon les compétences et les besoins de l'industrie. 1. Python peut être davantage payé en science des données et en apprentissage automatique. 2. JavaScript a une grande demande dans le développement frontal et complet, et son salaire est également considérable. 3. Les facteurs d'influence comprennent l'expérience, la localisation géographique, la taille de l'entreprise et les compétences spécifiques.

Comment fusionner les éléments du tableau avec le même ID dans un seul objet en utilisant JavaScript? Comment fusionner les éléments du tableau avec le même ID dans un seul objet en utilisant JavaScript? Apr 04, 2025 pm 05:09 PM

Comment fusionner les éléments du tableau avec le même ID dans un seul objet en JavaScript? Lors du traitement des données, nous rencontrons souvent la nécessité d'avoir le même ID ...

JavaScript est-il difficile à apprendre? JavaScript est-il difficile à apprendre? Apr 03, 2025 am 12:20 AM

Apprendre JavaScript n'est pas difficile, mais c'est difficile. 1) Comprendre les concepts de base tels que les variables, les types de données, les fonctions, etc. 2) Master la programmation asynchrone et les implémenter via des boucles d'événements. 3) Utilisez les opérations DOM et promettez de gérer les demandes asynchrones. 4) Évitez les erreurs courantes et utilisez des techniques de débogage. 5) Optimiser les performances et suivre les meilleures pratiques.

Comment réaliser des effets de défilement de parallaxe et d'animation des éléments, comme le site officiel de Shiseido?
ou:
Comment pouvons-nous réaliser l'effet d'animation accompagné d'un défilement de page comme le site officiel de Shiseido? Comment réaliser des effets de défilement de parallaxe et d'animation des éléments, comme le site officiel de Shiseido? ou: Comment pouvons-nous réaliser l'effet d'animation accompagné d'un défilement de page comme le site officiel de Shiseido? Apr 04, 2025 pm 05:36 PM

La discussion sur la réalisation des effets de défilement de parallaxe et d'animation des éléments dans cet article explorera comment réaliser le site officiel de Shiseido (https://www.shiseido.co.jp/sb/wonderland/) ...

L'évolution de JavaScript: tendances actuelles et perspectives d'avenir L'évolution de JavaScript: tendances actuelles et perspectives d'avenir Apr 10, 2025 am 09:33 AM

Les dernières tendances de JavaScript incluent la montée en puissance de TypeScript, la popularité des frameworks et bibliothèques modernes et l'application de WebAssembly. Les prospects futurs couvrent des systèmes de type plus puissants, le développement du JavaScript côté serveur, l'expansion de l'intelligence artificielle et de l'apprentissage automatique, et le potentiel de l'informatique IoT et Edge.

La différence dans Console.Log de sortie Résultat: Pourquoi les deux appels sont-ils différents? La différence dans Console.Log de sortie Résultat: Pourquoi les deux appels sont-ils différents? Apr 04, 2025 pm 05:12 PM

Discussion approfondie des causes profondes de la différence de sortie Console.log. Cet article analysera les différences dans les résultats de sortie de la fonction Console.log dans un morceau de code et expliquera les raisons derrière. � ...

See all articles