JS 中原生的数组方法也可以做 immutable 的事情

用 Redux 的同学都知道，reducer 每次都应该返回一个全新的状态，而不应该去修改原来的状态。因此，很多时候会结合 immutable.js 和 redux 一起使用。immutable.js 的确提供了很丰富的 API， 但是你知道吗？其实在数组方面，原生的 JS 数组的方法就可以做到 immutable 的事情。下面我们就从添加、修改、删除这几个主要的操作来一起看下。

1.1 添加：mutable 版本

数组中的 **#push **和 **#unshift **方法都可以添加新的数组元素，但是会修改原数组，就像这样：

其中 push 方法会在数组最后添加新的元素，而 unshift 会在数组最开始的位置添加新元素。

1.2 添加：immutable 版本

其实我们两个办法可以实现 immutable 版本。第一个办法就是用 concat 方法，就像这样：

还有一个方法就是可以使用 spread 操作符，就像这样：

2.1 修改：mutable 版本

数组的 splice 方法就可以用来起到修改数组元素的作用，但是这个方法会修改原来的数组内容，就像这样：

2.2 修改：immutable 版本

immutable 版本虽然实现起来稍微有点麻烦，但是我们还是可以通过 map 方法来实现：

3.1 删除：mutable 版本

删除数组元素也有两个办法。一个就是使用 pop 和 shift：

还有一个办法就是可以使用 splice

以上两个办法都是会修改原数组的内容

3.2 删除：immutable 版本

同样的也有两个办法可以实现 immutable 版本的删除功能，第一个办法就是使用 filter 方法，就像这样：

另外一个办法就是使用 slice 方法，和 splice 方法不同，slice 方法不会修改原数组，但是也是有缺陷的，因为 slice 数组只能切割数组，有的时候你为了达到目的，可能要切割多次才行

​

以上就是使用原生的方法来实现 immutable 版本的 **添加、删除、修改 **数组功能。那么介绍这个有什么意义呢？一方面可以让初学者熟悉下这几个数组的方法哪些是会修改原数组的，哪些则是会返回新的数组，另外一方面呢，其实当数据操作是数组且不复杂的时候呢，可以直接使用这些原生方法封装一个更加轻量级的 immutable.js 来使用。