Maison >interface Web >js tutoriel >Imutabilité en JavaScript

Imutabilité en JavaScript

William Shakespeare
William Shakespeareoriginal
2025-02-20 11:59:11434parcourir

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:

<code class="language-javascript">const statement = "I am an immutable value";
const otherStr = statement.slice(8, 17); </code>

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:

<code class="language-javascript">let arr = [];
let v2 = arr.push(2); // arr is modified; v2 holds the new length</code>

an ImmutableArray se comporterait différemment:

<code class="language-javascript">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]</code>

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

<code class="language-javascript">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}</code>

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:

<code class="language-javascript">function createGame(options) {
  return Immutable.fromJS({
    cols: options.cols,
    rows: options.rows,
    tiles: initTiles(options.rows, options.cols, options.mines)
  });
}</code>

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:

<code class="language-javascript">function revealTile(game, tile) {
  game.tiles[tile].isRevealed = true; //Direct mutation
}</code>

Avec des données immuables, nous utilisons setIn:

<code class="language-javascript">function revealTile(game, tile) {
  return game.setIn(['tiles', tile, 'isRevealed'], true);
}</code>

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

<code class="language-javascript">function revealTile(game, tile) {
  return game.getIn(['tiles', tile]) ?
    game.setIn(['tiles', tile, 'isRevealed'], true) :
    game;
}</code>

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:
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