Javascript中不可变的另一个好处是减少了时间耦合，这对设计有很大的好处。考虑一个具有两个方法的对象的接口:

class Foo {

      baz() {
          // .... 
      }

      bar() {
          // ....
      }

}

const f = new Foo();

可能需要调用baz()来使对象处于有效状态，从而调用bar()才能正确工作。但你是怎么知道的?

f.baz();
f.bar(); // this is ok

f.bar();
f.baz(); // this blows up

要弄清楚这一点，您需要仔细检查类的内部结构，因为从检查公共接口中无法立即看出这一点。这个问题可能会在具有大量可变状态和类的大型代码库中爆发。

如果Foo是不可变的，那么这就不再是一个问题。假设我们可以以任何顺序调用baz或bar是安全的，因为类的内部状态不能改变。

不变性的主要优点是简单。

替换对象比修改现有对象简单。

它让你专注于一个地方的正确性。而不是每一个可能发生变化的地方。

如果你的对象处于无效状态，它更容易修复，因为错误必须发生在你创建它的时候(因为它是不可变的)

问题是，为什么不变性如此重要?改变对象有什么错?这不是让事情变得简单了吗?

事实上，情况恰恰相反:至少从长远来看，可变性会让事情变得更复杂。是的，它使你的初始编码更容易，因为你可以在任何你想要的地方修改东西，但当你的程序变大时，它就变成了一个问题——如果一个值改变了，是什么改变了它?

当你让所有东西都是不可变的，这意味着数据不能再被意外改变了。你肯定知道，如果你把一个值传递给一个函数，它就不能在那个函数中被改变。

简单地说:如果你使用不可变的值，它会让你的代码变得非常容易:每个人都有一个唯一的数据副本，所以它不会破坏它，破坏你代码的其他部分。想象一下，这使得在多线程环境中工作变得多么容易!

注1:不变性有潜在的性能成本，这取决于你在做什么，但像Immutable.js这样的东西会尽其所能优化。

注2:在你不确定的情况下，Immutable.js和ES6的const意味着非常不同的东西。

通常情况下，我可以将对象添加到数组中。在这种情况下我该如何实现呢?删除商店并重新创建它?向数组中添加对象难道不是一种成本较低的操作吗?PS:如果这个例子不是解释不变性的正确方式，请让我知道什么是正确的实际例子。

是的，你的新闻例子非常好，你的推理也非常正确:你不能只是修改现有的列表，所以你需要创建一个新的列表:

var originalItems = Immutable.List.of(1, 2, 3);
var newItems = originalItems.push(4, 5, 6);

问题是，为什么不变性如此重要?改变对象有什么错?这不是让事情变得简单了吗?

关于可变性

从技术角度来看，可变性并没有错。它是快速的，它是重复使用内存。开发人员从一开始就习惯了它(我记得)。可变性的使用存在问题，也会带来一些麻烦。

如果object不与任何东西共享，例如存在于函数的作用域中并且不对外公开，那么就很难看到不变性的好处。在这种情况下，不可变是没有意义的。一成不变的感觉始于某些东西被分享。

可变性头痛

可变的共享结构很容易产生许多陷阱。对访问引用的代码的任何部分的任何更改都会影响到具有此引用可见性的其他部分。这种影响将所有部分连接在一起，即使它们不应该意识到不同的模块。一个函数的突变可能会导致应用程序的完全不同部分崩溃。这样的事情是一个糟糕的副作用。

其次经常与突变的问题是损坏的状态。当突变过程中途失败，一些字段被修改，一些字段没有被修改时，就会发生损坏状态。

更重要的是，通过突变很难追踪变化。简单的参考检查不会显示出差异，要知道发生了什么变化需要做一些深入的检查。此外，为了监测变化，还需要引入一些可观察的模式。

最后，突变是信任缺失的原因。如果某个结构可以变异，你怎么能确定它有你想要的价值。

const car = { brand: 'Ferrari' };
doSomething(car);
console.log(car); // { brand: 'Fiat' }

如上例所示，传递可变结构总是可以通过具有不同的结构来完成。函数doSomething正在改变外部给定的属性。没有对代码的信任，你真的不知道你拥有什么，你将拥有什么。所有这些问题的发生是因为:可变结构表示指向内存的指针。

不可变性与价值有关

不可变性意味着改变不是在相同的对象、结构上完成的，而是在新的对象、结构中表示的。这是因为引用不仅表示内存指针的值。每一次改变都会创造新的价值，而不会改变旧的价值。这样清晰的规则给予了信任和代码的可预测性。函数使用起来是安全的，因为它们处理的不是突变，而是具有自己值的自己的版本。

使用值而不是内存容器可以确定每个对象都表示特定的不可更改的值，并且使用它是安全的。

不可变结构表示值。

我将在一篇中型文章(https://medium.com/@macsikora/the-state-of- immutabil-169d2cd11310)中更深入地探讨这个主题

不同的看法……

我的另一个答案是从非常实际的角度来解决这个问题的，我仍然喜欢它。我决定把这个作为另一个答案，而不是对那个答案的补充，因为它是一个无聊的哲学咆哮，希望它也回答了这个问题，但并不真正符合我现有的答案。

博士TL;

即使在小型项目中，不变性也很有用，但不要认为它的存在就是为你准备的。

答案要长得多

注意:为了这个回答的目的，我使用“纪律”这个词来表示为了某些好处而自我否定。

这在形式上类似于另一个问题:“我应该使用Typescript吗?”为什么类型在JavaScript中如此重要?”它也有类似的答案。考虑以下场景:

你是5000行JavaScript/CSS/HTML代码库的唯一作者和维护者。你半技术性的老板读了一些关于typescript的最新热点，并建议我们可能想要改用它，但把决定留给你。所以你读到它，玩它，等等。

现在你要做一个选择，你是转到Typescript?

Typescript has some compelling advantages: intellisense, catching errors early, specifying your APIs upfront, ease of fixing things when refactoring breaks them, fewer tests. Typescript also has some costs: certain very natural and correct JavaScript idioms can be tricky to model in it's not-especially-powerful type system, annotations grow the LoC, time and effort of rewriting existing codebase, extra step in the build pipeline, etc. More fundamentally, it carves out a subset of possible correct JavaScript programs in exchange for the promise that your code is more likely to be correct. It's arbitrarily restrictive. That's the whole point: you impose some discipline that limits you (hopefully from shooting yourself in the foot).

回到上一段所提到的问题:值得这样做吗?

在上述场景中，我认为，如果您非常熟悉中小型JS代码库，那么选择使用Typescript更具有美感而非实用性。这很好，美学并没有错，只是它们不一定引人注目。

场景2:

你换了工作，现在是Foo公司的一名业务线程序员。你和一个10人团队一起工作，开发90000个LoC(还在不断增加)JavaScript/HTML/CSS代码库，以及一个相当复杂的构建管道，包括babel、webpack、一套polyfills、react与各种插件、一个状态管理系统、大约20个第三方库、大约10个内部库、编辑器插件(如带有内部风格指南规则的linter)等等。

Back when you were 5k LoC guy/girl, it just didn't matter that much. Even documentation wasn't that big a deal, even coming back to a particular portion of the code after 6 months you could figure it out easily enough. But now discipline isn't just nice but necessary. That discipline may not involve Typescript, but will likely involve some form of static analysis as well as all the other forms of coding discipline (documentation, style guide, build scripts, regression testing, CI). Discipline is no longer a luxury, it is a necessity.

所有这些都适用于1978年的GOTO:你的C语言的小21点游戏可以使用GOTO和意大利面逻辑，选择你自己的冒险方式并不是什么大不了的事情，但随着程序变得越来越大，野心越来越大，那么，无序地使用GOTO就不能持续下去了。所有这些都适用于今天的不变性。

就像静态类型一样，如果你不是在一个由工程师团队维护/扩展的大型代码库上工作，那么使用不可变性的选择更多的是美观而不是实用:它的好处仍然存在，但可能还没有超过成本。

但就像所有有用的学科一样，到了一定程度，它就不再是可有可无的了。如果我想保持健康的体重，那么关于冰淇淋的纪律可能是可有可无的。但如果我想成为一名有竞争力的运动员，我对是否吃冰淇淋的选择就包含在我对目标的选择之中。如果你想用软件改变世界，不可变性可能是你避免它在自身重压下崩溃所需要的一部分。

我最近也在研究同样的话题。我会尽我最大的努力回答你的问题，并尝试分享我到目前为止学到的东西。

问题是，为什么不变性如此重要?有什么问题 变异的对象?这不是让事情变得简单了吗?

基本上可以归结为这样一个事实:不可变性增加了可预测性、性能(间接地)，并允许突变跟踪。

可预测性

突变隐藏了更改，而更改会产生(意想不到的)副作用，从而导致严重的bug。当您强制执行不可变性时，您可以保持应用程序架构和心理模型的简单性，这使您更容易对应用程序进行推理。

性能

尽管向不可变对象添加值意味着需要创建一个新实例，其中需要复制现有值，并且需要向新对象添加新值，这会消耗内存，但不可变对象可以利用结构共享来减少内存开销。

所有更新都返回新值，但内部结构共享给 大幅度减少内存使用(和GC抖动)。这意味着如果 你附加到一个有1000个元素的向量，它实际上并不创建 一个新的向量，长度为1001个元素。最有可能的是，内部只有几个 分配小对象。

你可以在这里阅读更多相关内容。

突变跟踪

除了减少内存使用外，不可变性还允许您通过使用引用和值相等来优化应用程序。这使得查看是否有任何更改非常容易。例如，react组件的状态变化。您可以使用shouldComponentUpdate通过比较状态对象来检查状态是否相同，并防止不必要的呈现。 你可以在这里阅读更多相关内容。

额外的资源:

不变之道 不可变数据结构和JavaScript JavaScript中的不可变性

如果我在初始值中设置一个对象数组。我不能 对它进行操作。这就是不可变原理，对吧?(正确的 如果我错了，请告诉我)。但是，如果我有一个新的News对象 被更新吗?通常情况下，我可以将对象添加到 数组中。在这种情况下我该如何实现呢?删除商店并重新创建它? 向数组中添加对象难道不是一种成本较低的操作吗?

是的，这是正确的。如果你对如何在你的应用程序中实现这一点感到困惑，我建议你看看redux是如何做到这一点的，以熟悉核心概念，它对我有很大帮助。

我喜欢使用Redux作为例子，因为它包含了不变性。它有一个单一的不可变的状态树(称为存储)，其中所有的状态变化都是通过分派操作来显式的，这些操作由reducer处理，reducer接受前一个状态和所述操作(一次一个)并返回应用程序的下一个状态。你可以在这里阅读更多关于它的核心原则。

在egghead上有一门很好的redux课程。redux的作者Dan Abramov解释了这些原则如下(我修改了一些代码以更好地适应场景):

import React from 'react';
import ReactDOM from 'react-dom';

// Reducer.
const news = (state=[], action) => {
  switch(action.type) {
    case 'ADD_NEWS_ITEM': {
      return [ ...state, action.newsItem ];
    }
    default: {
        return state;
    }
  }
};

// Store.
const createStore = (reducer) => {
  let state;
  let listeners = [];

  const subscribe = (listener) => {
    listeners.push(listener);

    return () => {
      listeners = listeners.filter(cb => cb !== listener);
    };
  };

  const getState = () => state;

  const dispatch = (action) => {
    state = reducer(state, action);
    listeners.forEach( cb => cb() );
  };

  dispatch({});

  return { subscribe, getState, dispatch };
};

// Initialize store with reducer.
const store = createStore(news);

// Component.
const News = React.createClass({
  onAddNewsItem() {
    const { newsTitle } = this.refs;

    store.dispatch({
      type: 'ADD_NEWS_ITEM',
      newsItem: { title: newsTitle.value }
    });
  },

  render() {
    const { news } = this.props;

    return (
      <div>
        <input ref="newsTitle" />
        <button onClick={ this.onAddNewsItem }>add</button>
        <ul>
          { news.map( ({ title }) => <li>{ title }</li>) }
        </ul>
      </div>
    );
  }
});

// Handler that will execute when the store dispatches.
const render = () => {
  ReactDOM.render(
    <News news={ store.getState() } />,
    document.getElementById('news')
  );
};

// Entry point.
store.subscribe(render);
render();

此外，这些视频进一步详细演示了如何实现不变性:

数组 对象