不可变性(Immutability)是函数式编程的中心准绳，在面向对象编程里也有大批运用。在这篇文章里，我会给人人秀一下究竟什么是不可变性(Immutability)、她为何还这么屌、以及在JavaScript中怎样运用。

什么是不可变性(Immutability)？

照样先来看看关于可变性(Mutability)的教条式定义：“liable or subject to change or alteration(译者注：真他妈难翻，就简朴明白成’易于转变的’吧)”。在编程范畴里，我们用可变性(Mutability)来形貌如许一种对象，它在建立以后状况照旧可被转变。那当我们说不可变(Immutable)时，就是可变(Mutable)的对立面了(译者注：谅解我翻的空话又多起来) － 意义是，建立以后，就再也不能被修正了。

假如我说的又让你以为诡异了，谅解我小小的提示一下，实在我们日常平凡运用的许多东西现实上都是不可变的哦！

var statement = 'I am an immutable value';
var otherStr = statement.slice(8, 17);

我猜没人会受惊，statement.slice(8, 17)并没有转变statement变量吧(译者注：假如你受惊了，赶忙去补基本学问吧)？现实上，string对象上的一切要领里，没有一个会修正原string，它们一概返回新的string。缘由简朴了，由于string就是是不可变的(Immutable) – 它们不能被修正，我们能做的就是基于原string操纵后获得一个新string。

注重了，string可不是JavaScript里唯一内置的不可变(Immutable)数据类型哦。number也是不可变(Immutable)的。不然的话，你试想下这个表达式2 + 3，假如2的寄义能被修正，那代码该怎样写啊\|_\|。听起来谬妄吧，但我们在编程中却经常对object和array做出这类事儿。

JavaScript充溢变化

在JavaScript中，string和number从设想之初就是不可变(Immutable)的。然则，看看下面这个关于array例子：

var arr = [];
var v2 = arr.push(2);

来我问你，v2的值是什么？假如array和string、number一样也是不可变(Immutable)的，那此时v2必定是一个包含了一个数字2的新array。现实上，还真就不是那样的。这里arr援用的array被修正了，内里添了一个数字2，这时刻v2的值(也就是arr.push(2)的返回值)，现实上是arr此时的长度 － 就是1。

试想我们具有一个不可变的数组(ImmutableArray)。就像string、number那样，她应当能像以下如许被运用：

var arr = new ImmutableArray([1, 2, 3, 4]);
var v2 = arr.push(5);

arr.toArray(); // [1, 2, 3, 4]
v2.toArray();  // [1, 2, 3, 4, 5]

相似的，也能够有一个不可变的Map(ImmutableMap)，理论上能够替换object应当于多半场景，她应当有一个set要领，不过这个set要领不会塞任何东西到原Map里，而是返回一个包含了塞入值的新Map：

var person = new ImmutableMap({name: 'Chris', age: 32});
var olderPerson = person.set('age', 33);

person.toObject(); // {name: 'Chris', age: 32}
olderPerson.toObject(); // {name: 'Chris', age: 33}

就像2 + 3这个表达式里，我们不能够转变2或是3所代表的寄义，一个person在庆贺他33岁的华诞，并不会影响他曾经是32岁的现实。

JavaScript不可变性(Immutability)实战

JavaScript里如今还没有不可变的list和map，所以临时我们照样须要三方库的协助。有两个很不错的，一个是Mori － 她把ClojureScript里耐久化数据构造的API支撑带到了JavaScript里；另一个是Facebook出品的immutable.js。背面的示例里，我将运用immutable.js，由于她的API关于JavaScript开发者更友爱一些。

下面的例子里，我们运用不可变(Immutable)学问来构建一个扫雷小游戏。扫雷的游戏面板我们用一个不可变的map来构建，个中tiles(雷区区块)部份值得关注哦，它是一个由不可变map构成的不可变list(译者注：又最先绕了)，个中每个不可变的map示意一个tile(雷区块)。全部这个雷区面板都是由JavaScript的object和array构成的，末了由immutable.js的fromJS要领对其举行不可变化处置惩罚：

function createGame(options) {
  return Immutable.fromJS({
    cols: options.cols,
    rows: options.rows,
    tiles: initTiles(options.rows, options.cols, options.mines)
  });
}

剩下的重要逻辑部份就是“扫雷”了，传入扫雷游戏对象(一个不可变构造)做为第一个参数，以及要“扫”的谁人tile(雷区块)对象，末了返回新的扫雷游戏实例。以下我们就要讲到这个revealTile函数。当它被调用时，tile(雷区块)的状况就要被重置为“扫过”的状况。假如是可变编程，代码很简朴：

function revealTile(game, tile) {
  game.tiles[tile].isRevealed = true;
}

然后再来看看假如用上面引见的不可变数据构造来编码，坦白讲，一最先代码变得都点丑了：

function revealTile(game, tile) {
  var updatedTile = game.get('tiles').get(tile).set('isRevealed', true);
  var updatedTiles = game.get('tiles').set(tile, updatedTile);
  return game.set('tiles', updatedTiles);
}

我去，丑爆了有木有！

万幸，不可变性不止于此，一定有解围！这类需求很罕见，所以东西早就斟酌到了，能够这么操纵：

function revealTile(game, tile) {
  return game.setIn(['tiles', tile, 'isRevealed'], true);
}

如今revealTile返回一个新的实例了，新实例里个中一个tile(雷区块)的isRevealed就和之前谁人game实例里的不一样了。这内里用到的setIn是一个null-safe(空值平安)的函数，恣意keyPath中的key不存在时，都邑在这个位置建立一个新的不可变map(译者注：这句略绕，个人以为既然这里不是主讲immutable.js，那就没必要非提一下它的这个特征，反而不清不楚，原作没细说，那我也就不多说了，有兴致的能够来这里本身琢磨)。这个null-safe特征关于我们如今扫雷游戏这个例子并不适宜，由于“扫”一个不存在的tile(雷区块)示意我们正在试图扫雷区之外的处所，那明显不对！这里须要多做一步搜检，经由过程getIn要领搜检tile(雷区块)是不是存在，然后再“扫”它：

function revealTile(game, tile) {
  return game.getIn(['tiles', tile]) ?
    game.setIn(['tiles', tile, 'isRevealed'], true) :
    game;
}

假如tile(雷区块)不存在，我们就返回原扫雷游戏实例。这就是个可敏捷上手的关于不可变性(Immutability)的演习，想深切相识的能够看codepen，完全的完成都在内里了。

Performance怎样?

你能够以为，这他妈Performance应当low爆了吧，我只能说某些情况下你是对的。每当你想增加点东西到一个不可变(Immutable)对象里时，她一定是先拷贝以存在值到新实例里，然后再给新实例增加内容，末了返回新实例。比拟可变对象，这必将会有更多内存、盘算量斲丧。

由于不可变(Immutable)对象永久稳定，现实上有一种完成战略叫“构造同享”，使得她的内存斲丧远比你设想的少。虽然和内置的array、object的“变化”比拟依然会有分外的开支，但这个最先恒定，相对能够被不可变性(Immutability)带来的别的浩瀚上风所消磨、削减。在实践中，不可变性(Immutability)带来的上风能够极大的优化顺序的团体机能，纵然个中的某些一般操纵开支变大了。

革新变动追踪

种种UI框架里，最难的部份永久是变动追踪(译者注：或许叫“脏搜检”)。这是JavaScript社区里的广泛题目，所以EcmaScript 7里供应了零丁的API在保证Performance的前提下能够追踪变化：Object.observe()。许多工资之冲动，但也有不少人以为这个API然并卵。他们以为，在任何情况下，这个API都没很好的处理变动追踪题目：

var tiles = [{id: 0, isRevealed: false}, {id: 1, isRevealed: true}];
Object.observe(tiles, function () { /* ... */ });

tiles[0].id = 2;

上面例子里，tiles[0]的变动并没有触发observer，所以实在这个提案即便是最简朴的变动追踪也没做到。那不可变性(Immutability)又是怎样处理的？假设有一个运用状况a，然后它内部有值被转变了，因而就获得了一个新的实例b：

if (a === b) {
  // 数据没变，住手操纵
}

假如运用状况a没有被修正，那b就是a，它们指向同一个实例，===就够了，不必做其他事儿。固然这须要我们追踪运用状况的援用，但全部题目的复杂度被大大简化了，如今只需推断一下它们是不是同一个实例的援用就好了，至心不必再去深切调查内里的某某字段是不是是变了。

结束语

愿望本文能某种程度上帮你相识不可变性(Immutability)是怎样帮我们优化/革新代码的，也愿望这些例子从实践角度说清楚了运用体式格局。不可变性(Immutability)的热度在延续增高，我肯定这绝不是你本年看到的关于不可变性(Immutability)的末了一文。同志们，是时刻来一发了，我相信你用事后一定会high至的，就像我如今一样^^。

原文地点：Immutability in JavaScript