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

Imutabilité en JavaScript

William Shakespeare
Libérer: 2025-02-20 11:59:11
original
430 Les gens l'ont consulté

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
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal