Application d'Immuable dans les compétences JavaScript_javascript

Objet mutable
En JavaScript, les objets sont des données de type référence. L'avantage est que lorsque les objets sont fréquemment modifiés, ils sont modifiés sur la base de l'objet d'origine et n'ont pas besoin d'être recréés. Cela peut utiliser efficacement la mémoire et n'entraînera pas de gaspillage de mémoire. espace. Objets Cette fonctionnalité peut être appelée Mutable, ce qui signifie littéralement « variable » en chinois.
Pour les objets Mutable, leurs avantages d'être flexibles et modifiables peuvent parfois devenir leurs inconvénients. Plus les données sont flexibles et modifiables, plus il est difficile de les contrôler. Pour un objet avec une structure complexe, il peut être modifié par inadvertance quelque part sans données. si l'objet est utilisé dans plusieurs étendues, il est difficile de prédire si et quand les données changeront.

var obj = { /* 一个复杂结构的对象 */ };
doSomething(obj);
// 上面的函数之行完后，此时的 obj 还是最初的那个 obj 吗？

Pour résoudre ce problème, la solution conventionnelle consiste à copier l'objet dans un nouvel objet sous la forme d'une copie complète, puis à effectuer des opérations de modification sur le nouvel objet. Cela peut garantir la contrôlabilité des données, mais des copies fréquentes. peut entraîner un gaspillage important d’espace mémoire.

var obj = { /* 一个复杂结构的对象 */ };
// copy 出一个新的 obj2
// 但是 copy 操作会浪费内存空间
var obj2 = deepClone(obj);
doSomething(obj2);
// 上面的函数之行完后，无论 obj2 是否变化，obj 肯定还是原来那个 obj

Objet immuable
Afin de mieux résoudre les problèmes ci-dessus, l'objet Immutable est apparu. Immuable se traduit littéralement en chinois par « immuable ». Chaque fois qu'un objet Immuable est modifié, un nouvel objet immuable est créé et les opérations sur le nouvel objet n'affecteront pas les données de l'objet d'origine. Cet objet spécial n'est pas une nouvelle fonctionnalité de JavaScript, mais un ensemble de solutions fournies par l'industrie pour résoudre ce problème, et d'excellentes bibliothèques open source ont émergé, dont la plus célèbre est l'open source Lee Byron de Facebook immuable. js. Bien entendu, la solution d'Immutable n'est pas originale, mais vient de Clojure et Scala.
Comparaison des performances entre Mutable et Immuable
Les opérations inefficaces sur les objets Mutable se reflètent principalement dans la copie et la comparaison, et les objets Immuables résolvent ces deux problèmes inefficaces.
L'opération de copie approfondie d'un objet Mutable ordinaire copiera toutes les données, mais l'objet Immutable ne copiera pas toutes les données lors de la modification des données, mais transférera la relation parent-enfant entre le nœud modifié et le nœud inchangé sur un nouveau. nœud, une structure similaire à une liste chaînée. Du point de vue de la « copie », une copie minimale est obtenue et les parties inchangées sont partagées en « montants complets », tandis que les copies immuables sont « incrémentées ». Concernant l'utilisation de l'espace mémoire, le jugement sera basé sur la comparaison des. tarifs.
Et sur la base de la fonctionnalité selon laquelle un nouvel objet Immutable est créé à chaque fois qu'un objet Immutable est modifié, l'état de modification des données peut être enregistré sous la forme d'un ensemble d'instantanés, ce qui est également très pratique.
Parlons des opérations de comparaison. Pour les objets Mutable, si vous souhaitez comparer si deux objets sont égaux, vous devez parcourir chaque nœud de l'objet pour comparaison. Pour les objets avec des structures complexes, l'efficacité n'est certainement pas beaucoup plus élevée. Pour les objets Immutable, immutable.js fournit une API pour déterminer directement si les « valeurs » de deux objets Immutable sont égales.

var map1 = Immutable.Map({a:1, b:1, c:1});
var map2 = Immutable.Map({a:1, b:1, c:1});
assert(map1 !== map2); // 不同的 Immutable 实例，此时比较的是引用地址
assert(Immutable.is(map1, map2)); // map1 和 map2 的值相等，比较的是值
assert(map1.equals(map2)); // 与 Immutable.is 的作用一样

Dans les applications de développement réelles, les performances ne sont pas toujours les plus critiques et les plus importantes. Pour les projets JavaScript ordinaires, la contrôlabilité des données apportée par les caractéristiques d'Immutable est plus avantageuse que les performances. Les objets mutables conviennent à une utilisation dans une petite plage. de portées fermées, tandis que les objets Immuables conviennent lorsque les données doivent être transmises à travers plusieurs portées.

La différence d'utilisation entre Mutable et Immuable

immutable.js fournit une variété de structures de données immuables : y compris List Stack Map OrderedMap Set OrderedSet Record. Ces structures de données correspondent à peu près aux structures de données Mutables natives.
L'utilisation de chaque structure de données ne sera pas expliquée en détail ici. Parlons principalement de la différence d'utilisation entre les objets Immuables et les objets Mutable.
Les objets Native Mutable sont très pratiques pour « lire » et « écrire ».

var mutableObj = {};
// 写入数据
mutableObj.foo = 'bar';
// 读取数据
console.log(mutableObj.foo);

L'objet Immuable doit « lire » et « écrire » des données via set et get.

var immutableObj1 = Immutable.Map();
// 写入数据
var immutableObj2 = immutableObj1.set('foo', 'bar');
// 读取数据
console.log(immutableObj2.get('foo')); // => 'bar'

L'exemple ci-dessus crée uniquement un objet vide au début pour illustrer l'utilisation de la méthode set. En fait, la valeur initiale peut être transmise lors de l'instanciation.

var immutableObj = Immutable.Map({'foo', 'bar'});

Pour les données de niveau approfondi, l'interface d'accès fournie par immutable.js est très pratique.

var immutableObj1 = Immutable.fromJS({
 a: {
  b: 'c'
 },
 d: [1, 2, 3]
});
// 读取深层级的数据
console.log(immutableObj1.getIn(['a', 'b'])); // => 'c'
console.log(immutableObj1.getIn(['d', 1])); // => 2
// 修改深层级的数据
var immutableObj2 = immutableObj1.setIn(['a', 'b'], 'd');
console.log(immutableObj2.getIn(['a', 'b'])); // => 'd'

S'il s'agit d'un objet Mutable natif, une erreur d'objet non définie peut être signalée lors du chaînage de l'accès à des données de niveau profond. Cependant, l'objet Immuable ne signalera pas d'erreur lorsqu'il rencontrera cette situation et renverra un résultat indéfini.
Lors du débogage, si vous souhaitez afficher la structure interne d'un objet Immutable, il est recommandé d'utiliser toJSON() pour le convertir d'abord en un objet Mutable ordinaire.