从JS对象开始，谈一谈究竟什么是“不可变数据”和函数式编程

作为前端开发者，你会感受到js中对象(object)这个概念的强大。我们说“js中一切皆对象”。最核心的特性，例如从string，到数组，再到浏览器的apis，对象这个概念无处不在。这里你可以了解到js objects中的一切。

同时，随着react的强势崛起，不管你有没有关注过这个框架，也一定听说过一个概念—不可变数据(immutable.js)。究竟什么是不可变数据？这篇文章会从js源头—对象谈起，让你逐渐了解这个函数式编程里的重要概念。

js中的对象是那么美妙：我们可以随意复制他们，改变并删除他们的某项属性等。但是要记住一句话：

“伴随着特权，随之而来的是更大的责任。” (with great power comes great responsibility)

的确，js objects里概念太多了，我们切不可随意使用对象。下面，我就从基本对象说起，聊一聊不可变数据和js的一切。

这篇文章缘起于daniel leite在本月16日的文章：things you should know about objects and

immutability in javascript，我进行了翻译，并改写了用到的例子，以及进行了大量更多的扩展。

不可变数据其实是函数式编程相关的重要概念。相对的，函数式编程中认为可变性是万恶之源。但是，为什么会有这样的结论呢？

这个问题可能很多程序员都会有。其实，如果你的代码逻辑可变，这并不是“政治错误”的。比如js中的数组操作，很对都会对原数组进行直接改变，这当然并没有什么问题。比如：

let arr = [1, 2, 3, 4, 5]; arr.splice(1, 1); // 返回[2]; console.log(arr); // [1, 3, 4, 5];

这是我们常用的“删除数组某一项”的操作。好吧，他一点问题也没有。

问题其实出现在“滥用”可变性上，这样会给你的程序带来“副作用”。先不必关心什么是“副作用”，他又是一个函数式编程的概念。

我们先来看一下代码实例：

我们发现，尽管创建了一个新的对象student2，但是老的对象student1也被改动了。这是因为js对象中的赋值是“引用赋值”，即在赋值过程中，传递的是在内存中的引用(memory

reference)。具体说就是“栈存储”和“堆存储”的问题。具体图我就不画了，理解不了可以单找我。

我们说的“不可变”，其实是指保持一个对象状态不变。这样做的好处是使得开发更加简单，可回溯，测试友好，减少了任何可能的副作用。

函数式编程认为：

只有纯的没有副作用的函数，才是合格的函数。

好吧，现在开始解释下“副作用”(side effect)：在计算机科学中，函数副作用指当调用函数时，除了返回函数值之外，还对主调用函数产生附加的影响。例如修改全局变量（函数外的变量）或修改参数。

函数副作用会给程序设计带来不必要的麻烦，给程序带来十分难以查找的错误，并降低程序的可读性。严格的函数式语言要求函数必须无副作用。

那么我们避免副作用，创建不可变数据的主要实现思路就是：一次更新过程中，不应该改变原有对象，只需要新创建一个对象用来承载新的数据状态。

我们使用纯函数(pure functions)来实现不可变性。纯函数指无副作用的函数。

那么，具体怎么构造一个纯函数呢？我们可以看一下代码实现，我对上例进行改造：

需要注意的是，我使用了es6中的解构(destructuring)赋值。

这样，我们达到了想要的效果：根据参数，产生了一个新对象，并正确赋值，最重要的就是并没有改变原对象。

现在，我们知道了“不可变”到底指的是什么。接下来，我们就要分析一下纯函数应该如何实现，进而生产不可变数据。

其实创建不可变数据方式有很多，在使用原生js的基础上，我推荐的方法是使用现有的objects api和es6当中的解构赋值（上例已经演示）。现在看一下objects.assign的实现方式：

同样，如果是处理数组相关的内容，我们可以使用：.map, .filter或者.reduce去达成目标。这些apis的共同特点就是不会改变原数组，而是产生并返回一个新数组。这和纯函数的思想不谋而合。

但是，再说回来，使用object.assign请务必注意以下几点：

1）他的复制，是将所有可枚举属性，复制到目标对象。换句话说，不可枚举属性是无法完成复制的。

2）对象中如果包含undefined和null类型内容，会报错。

3）最重要的一点：object.assign方法实行的是浅拷贝，而不是深拷贝。

第三点很重要，也就是说，如果源对象某个属性的值是对象，那么目标对象拷贝得到的是这个对象的引用。这也就意味着，当对象存在嵌套时，还是有问题的。比如下面代码：

对student2 friends列表当中的friend1的修改，同时也影响了student1 friends列表当中的friend1。

以上，我们分析了纯js如何实现不可变数据。这样处理带来的一个负面影响在于：一些经典apis都是shallow处理，比如上文提到的object.assign。如果遇到嵌套很深的结构，我们就需要手动递归。这样做呢，又会存在性能上的问题。

比如我自己动手用递归实现一个深拷贝，需要考虑循环引用的“死环”问题，另外，当使用大规模数据结构时，性能劣势尽显无疑。我们熟悉的jquery

extends方法，某一版本（最新版本情况我不太了解）的实现是进行了三层拷贝，也没有达到完备的deep copy。

总之，实现不可变数据，我们必然要关心性能问题。针对于此，我推荐一款已经“大名鼎鼎”的——immutable.js类库来处理不可变数据。

他的实现原理很有意思，下面这段话，我摘自camsong前辈的文章：

immutable实现的原理是persistent data structure（持久化数据结构），也就是使用旧数据创建新数据时，要保证旧数据同时可用且不变。 同时为了避免deepcopy把所有节点都复制一遍带来的性能损耗，immutable使用了structural sharing（结构共享），即如果对象树中一个节点发生变化，只修改这个节点和受它影响的父节点，其它节点则进行共享。

感兴趣的读者可以深入研究下，这是很有意思的。

我们使用javascript操纵对象，这样的方式很简单便捷。但是，这样操控的基础是在javascript灵活的对象机制的熟练掌握上。不然很容易使你“头大”。

在我开发的百度某部门私信项目中，因为使用了react+redux技术栈，并且数据结构较为负责，也采用了immutable.js实现。

最后，在前端开发中，函数式编程越来越热，并且在某种程度上已经取代了“过程式”编程和面向对象思想。

我的感想是在某些特定的场景下，不要畏惧变化，拥抱未来。

就像我很喜欢的葡萄牙诗人安德拉德一首诗中那样说的：

我同样不知道什么是海， 赤脚站在沙滩上， 急切地等待着黎明的到来。