immutability-helper 插件的基本使用（附源码）

本文介绍了 immutability-helper 插件的基本使用，详细介绍了相关 API 的用法及注意事项。

---

概念

先理解一下 Immutable 的概念，Immutable数据就是一旦创建，就不能更改的数据。每当对Immutable对象进行修改的时候，就会返回一个新的Immutable对象，以此来保证数据的不可变。但是由于 Immutable 的 API 和用法学习起来比较困难，所以可以使用 immutability-helper 这个工具来对原生JS对象进行操作。本文主要是对 immutability-helper 的用法做一个讲解。

---

源码

源码位置

欢迎 Star！欢迎 Watch！

---

注意事项总结

• immutability-helper 不会对原有对象进行修改，只是会返回一个新的对象

• $push、$unshift、$splice 的使用目标必须是数组，否则会报错

• $add、$remove 的使用目标必须是 Set 或 Map

• 其余 API 的使用目标可以是任意数据

• $splice 的参数是一个操作数组，可以对目标数组一次进行多次操作，但是参数 arrays 中的项是按顺序执行的，所以使用时需要注意顺序

• 任意 API 均可在多层结构内使用。可查看扩展用法示例

• 可以同时执行多个 API 操作，但是请注意：多个 API 在一个语句中执行时，只会执行最后一个！！！。可查看注意用法示例

---

常用 API

• {$push: array} 同数组的 push 方法，将参数 array 中的所有项 push 到目标数组中

• {$unshift: array} 同数组的 unshift 方法，将参数 array 中的所有项 unshift 到目标数组中

• {$splice: array of arrays} 同数组的 splice 方法，对于参数 arrays 中的每一项，使用该项提供的参数对目标数组调用 splice()

  PS: 参数 arrays 中的项是按顺序应用的，所以顺序很重要。在操作过程中，目标的指针可能会发生变化

• {$set: any} 使用 any 值替换目标

• {$toggle: array of strings} 将参数 array 中提供的下标或者属性的值切换成相反的布尔值

• {$unset: array of strings} 从目标对象中移除参数 array 中的键列表

• {$merge: object} 将参数 object 的键与目标合并

• {$apply: function} 将当前值传递给函数并用新的返回值更新它

• {$add: array of objects} 向 Set 或 Map 中添加值。添加到 Set 时，参数 array 为要添加的对象数组，添加到 Map 时，参数 array 为 [key, value] 数组

• {$remove: array of strings} 从 Set 或 Map 中移除参数 array 中的键列表

---

API 用法及示例

初始化四个变量，之后的各种 API 操作都是基于这四个变量

const initialObject = {
   
    name: 'Jack',
    age: 22,
    gender: 'Man'
};
const initialArray = ['a', 'b', 'c', 'd', 'e'];
const initialSet = new Set(['2', '0', '1', '9', '猪', '年', '快', '乐']);
const initialMap = new Map([['id', '1'], ['color', 'blue'], ['alias', 'map']]);

{$push: array}

/**
 * API: {$push: array}
 * 同数组的 push 方法，将数组 array 中包含的所有元素添加到 initialArray 的后面，作为一个新数组返回
 */
const pushArray = update(initialArray, {
    $push: ['f'] });
console.log('pushArray：', pushArray);  // => [ 'a', 'b', 'c', 'd', 'e', 'f' ]

{$unshift: array}

/**
 * API: {$unshift: array}
 * 同数组的 unshift 方法，将数组 ['f'] 中包含的所有元素添加到 initialArray 的前面，作为一个新数组返回
 */
const unshiftArray = update