Immutable 在 JavaScript 中的应用


Posted in Javascript onMay 02, 2016

Mutable 对象
在 JavaScript 中,对象是引用类型的数据,其优点在于频繁的修改对象时都是在原对象的基础上修改,并不需要重新创建,这样可以有效的利用内存,不会造成内存空间的浪费,对象的这种特性可以称之为 Mutable,中文的字面意思是「可变」。
对于 Mutable 的对象,其灵活多变的优点有时可能会成为其缺点,越是灵活多变的数据越是不好控制,对于一个复杂结构的对象来说,一不小心就在某个不经意间修改了数据,假如该对象又在多个作用域中用到,此时很难预见到数据是否改变以及何时改变的。

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

针对这种问题,常规的解决办法可以通过将对象进行深拷贝的形式复制出一个新的对象,再在新对象上做修改的操作,这样能确保数据的可控性,但是频繁的复制会造成内存空间的大量浪费。

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

Immutable 对象
为了能更好的解决上述的问题,出现了 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。

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 的作用一样

在实际的开发应用中,性能并不总是最关键和重要的,对于普通的 JavaScript 的项目来说,由于 Immutable 的特性带来的数据的可控性比起性能来说更有优势,对于 Mutable 对象适合在封闭的作用域小范围使用,而 Immutable 对象适合数据需要跨多个作用域传递时使用。

Mutable 和 Immutable 在使用上的区别

immutable.js 提供了多种 Immutable 的数据结构:包含了 List Stack Map OrderedMap Set OrderedSet Record,这些数据结构与原生的 Mutable 的数据结构大致对应。
各数据结构的用法这里不细说,主要说说 Immutable 对象与 Mutable 对象在使用上的区别吧。
原生的 Mutable 对象在「读」和「写」上非常方便。

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

而 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 对象。

Javascript 相关文章推荐
js计算精度问题小结
Apr 22 Javascript
IE下Ajax缓存问题的快速解决方法(get方式)
Jan 09 Javascript
JavaScript实现数组在指定位置插入若干元素的方法
Apr 06 Javascript
jQuery菜单插件用法实例
Jul 25 Javascript
JS实现的竖向折叠菜单代码
Oct 21 Javascript
全面解析多种Bootstrap图片轮播效果
May 27 Javascript
利用vue-router实现二级菜单内容转换
Nov 30 Javascript
vue指令以及dom操作详解
Mar 04 Javascript
浅谈Vue.js应用的四种AJAX请求数据模式
Aug 30 Javascript
vue的全局提示框组件实例代码
Feb 26 Javascript
JavaScript中常用的简洁高级技巧总结
Mar 10 Javascript
微信小程序自定义扫码功能界面的实现代码
Jul 02 Javascript
基于javascript数组实现图片轮播
May 02 #Javascript
Javascript HTML5 Canvas实现的一个画板
Apr 12 #Javascript
bootstrap3 兼容IE8浏览器!
May 02 #Javascript
javascript实现列表切换效果
May 02 #Javascript
基于javascript编写简单日历
May 02 #Javascript
Bootstrap媒体对象的实现
May 01 #Javascript
Bootstrap进度条组件知识详解
May 01 #Javascript
You might like
php 过滤危险html代码
2009/06/29 PHP
php 执行系统命令的方法
2009/07/07 PHP
PHP+ajaxfileupload+jcrop插件完美实现头像上传剪裁
2014/06/09 PHP
安装ImageMagick出现error while loading shared libraries的解决方法
2014/09/23 PHP
php获取本机真实IP地址实例代码
2016/03/31 PHP
PHP实现JS中escape与unescape的方法
2016/07/11 PHP
javascript EXCEL 操作类代码
2009/07/30 Javascript
javascript 设置某DIV区域内的checkbox复选框
2009/11/30 Javascript
Javascript开发之三数组对象实例介绍
2012/11/12 Javascript
jQuery插件-jRating评分插件源码分析及使用方法
2012/12/28 Javascript
JS动态添加与删除select中的Option对象(示例代码)
2013/12/25 Javascript
JavaScript快速切换繁体中文和简体中文的方法及网站支持简繁体切换的绝招
2016/03/07 Javascript
Javascript OOP之面向对象
2016/07/31 Javascript
用JS实现简单的登录验证功能
2017/07/28 Javascript
关于Vue.nextTick()的正确使用方法浅析
2017/08/25 Javascript
微信小程序实现的涂鸦功能示例【附源码下载】
2018/01/12 Javascript
通过jQuery学习js类型判断的技巧
2019/05/27 jQuery
解决pycharm双击但是无法打开的情况
2020/10/31 Javascript
antd中table展开行默认展示,且不需要前边的加号操作
2020/11/02 Javascript
Python实现给文件添加内容及得到文件信息的方法
2015/05/28 Python
python 3利用Dlib 19.7实现摄像头人脸检测特征点标定
2018/02/26 Python
python 获取list特定元素下标的实例讲解
2018/04/09 Python
Python基于递归算法实现的汉诺塔与Fibonacci数列示例
2018/04/18 Python
Python自定义一个异常类的方法
2019/06/27 Python
MNIST数据集转化为二维图片的实现示例
2020/01/10 Python
django 解决model中类写不到数据库中,数据库无此字段的问题
2020/05/20 Python
Python利用Xpath选择器爬取京东网商品信息
2020/06/01 Python
Python timeit模块原理及使用方法
2020/10/10 Python
Html5如何唤起百度地图App的方法
2019/01/27 HTML / CSS
HTML5到底会有什么发展?HTML5的前景展望
2015/07/07 HTML / CSS
社会实践先进工作者事迹材料
2014/05/06 职场文书
文明礼貌演讲稿
2014/05/12 职场文书
总经理任命书范本
2014/06/05 职场文书
会计求职自荐信
2014/06/20 职场文书
群众路线教育实践活动学习笔记
2014/11/05 职场文书
JavaScript实现淘宝商品图切换效果
2021/04/29 Javascript