时间:2021-05-28
Mutable 对象
在 JavaScript 中,对象是引用类型的数据,其优点在于频繁的修改对象时都是在原对象的基础上修改,并不需要重新创建,这样可以有效的利用内存,不会造成内存空间的浪费,对象的这种特性可以称之为 Mutable,中文的字面意思是「可变」。
对于 Mutable 的对象,其灵活多变的优点有时可能会成为其缺点,越是灵活多变的数据越是不好控制,对于一个复杂结构的对象来说,一不小心就在某个不经意间修改了数据,假如该对象又在多个作用域中用到,此时很难预见到数据是否改变以及何时改变的。
针对这种问题,常规的解决办法可以通过将对象进行深拷贝的形式复制出一个新的对象,再在新对象上做修改的操作,这样能确保数据的可控性,但是频繁的复制会造成内存空间的大量浪费。
var obj = { };// copy 出一个新的 obj2// 但是 copy 操作会浪费内存空间var obj2 = deepClone(obj);doSomething(obj2);// 上面的函数之行完后,无论 obj2 是否变化,obj 肯定还是原来那个 objImmutable 对象
为了能更好的解决上述的问题,出现了 Immutable 对象,Immutable 从字面上翻译成中文是「不可变」。每次修改一个 Immutable 对象时都会创建一个新的不可变的对象,在新对象上操作并不会影响到原对象的数据。这种特殊的对象并不是 JavaScript 新出的功能特性,而是业界为了解决这种问题提供的一套解决方案,并且涌现出了一些优秀的开源类库,其中最有名的就是 Facebook 的 Lee Byron 开源的 immutable.js。当然,Immutable 的这种解决方案并不是独创的,而是来源于 Clojure 和 Scala。
Mutable 和 Immutable 的性能对比
对于 Mutable 的对象的低效率操作主要体现在复制和比较上,而 Immutable 对象就是解决了这两大低效的痛点。
普通的 Mutable 对象的深拷贝操作会将一整份数据都复制一遍,而 Immutable 对象在修改数据时并不会复制一整份数据,而是将变化的节点与未变化的节点的父子关系转移到一个新节点上,类似于链表的结构。从 “复制” 的角度来看,做到了最小化的复制,未变化的部分都是共享的,Mutable 在复制的时候是 “全量”,而 Immutable 复制的是 “增量”,对于内存空间的使用率的比较高低立判。
并且基于每次修改一个 Immutable 对象都会创建一个新的 Immutable 对象的这种特性可以将数据的修改状态保存成一组快照,这也是挺方便的。
再来说说比较操作。对于 Mutable 的对象,如果要比较两个对象是否相等,必须遍历对象的每个节点进行比较,对于结构复杂的对象来说,其效率肯定高不到哪去。对于 Immutable 对象,immutable.js 提供了直接判断两个 Immutable 对象的「值」是否相等的 API。
在实际的开发应用中,性能并不总是最关键和重要的,对于普通的 JavaScript 的项目来说,由于 Immutable 的特性带来的数据的可控性比起性能来说更有优势,对于 Mutable 对象适合在封闭的作用域小范围使用,而 Immutable 对象适合数据需要跨多个作用域传递时使用。
Mutable 和 Immutable 在使用上的区别
immutable.js 提供了多种 Immutable 的数据结构:包含了 List Stack Map OrderedMap Set OrderedSet Record,这些数据结构与原生的 Mutable 的数据结构大致对应。
各数据结构的用法这里不细说,主要说说 Immutable 对象与 Mutable 对象在使用上的区别吧。
原生的 Mutable 对象在「读」和「写」上非常方便。
而 Immutable 对象需要通过 set 和 get 来对数据进行「读」和「写」。
var immutableObj1 = Immutable.Map();// 写入数据var immutableObj2 = immutableObj1.set('foo', 'bar');// 读取数据console.log(immutableObj2.get('foo')); // => 'bar'上面的例子为了说明 set 方法的使用才在一开始创建了一个空对象,实际上可以在实例化的时候传初始值。
var immutableObj = Immutable.Map({'foo', 'bar'});对于层级比较深的数据,immutable.js 提供的访问接口很方便。
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'如果是原生的 Mutable 对象,在链式访问一个深层级的数据时可能会报对象 undefined 的错误,而 Immutable 对象在碰到这种情况时不会报错,返回的是 undefined。
在调试的时候,如果想查看一个 Immutable 对象的内部结构,建议使用 toJSON() 先转换为普通的 Mutable 对象。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
有人说Immutable可以给React应用带来数十倍的提升,也有人说Immutable的引入是近期JavaScript中伟大的发明,因为同期React太火,它
在Java中通过final关键字来声明对象具有不变性(immutable),这里的对象包括变量,方法,类,与C++中的const关键字效果类似。immutabl
StringString:字符串常量,字符串长度不可变。Java中String是immutable(不可变)的。String类的包含如下定义:/**Theval
ajax技术在web程序开发中的交互方式。在web程序的开发应用过程中,ajax通常以XMLHttpRequest的Javascript对象作为起始点。Java
在实际应用中,我们很多时候都可能需要去除数组中的重复元素,下面就是javascript数组去重的方法实现:以上这篇javascript中去除数组重复元素的实现方