共计 1911 个字符，预计需要花费 5 分钟才能阅读完成。
呼 … 这已经是今天第三篇博文了。很久没写了，突然写那么多感觉有点脑袋昏了。出来混总要还的，谁让我之前那么懒没有按照自己的计划更新博文 … 好了闲话不多说，我们接着上篇继续说咯。上篇我们引出了一个很有实用价值的第三方插件 immutability-helper，它已经被大多数 React 开发者所接受并且已经在 React 项目中使用，至于它的价值所在，我想我已经在上篇博文中说的很清楚了，所以在这里就不再赘述。下面我们将上篇遗留下的 5 个指令介绍完。
immutability-helper 指令
$merge
顾名思义，这个指令的作用就是合并。合并什么？合并字面量对象！以什么方式合并？浅合并！
var update = require(“immutability-helper”);
const data = {a: 5, b: 3};
const data2 = update(data, { $merge: { b: 6, c: 7} });
console.log(data2);
输出结果：很简单，就是将 $merge 指令对应的参数合并到 update 函数的第一个参数中并输出一个内容相同的另一个字面量对象。从运行结果来看后者会覆盖前者的部分属性 (属性名相同的情况下，比如：属性 b)。
$apply
这个指令和 $set 有点类似，都可以用来更新对象的某个属性值。不过与 $set 不同的是，$apply 通过传入一个 function 并将该 function 的返回值更新到指定属性值中去。我们借 $set 的例子重新写一个例子
var update = require(“immutability-helper”);
const data = {‘id’: 0, name: ‘xiaoming’};
const data2 = update(data, { name: { $apply: function(name) {console.log(name); return ‘Miss Li’ } } });
console.log(data, data2);
输出结果：可以看出 $apply 对应的方法被传入了被指定属性的初始值，而后将返回值重新 set 给了 name 属性。过程很简单！但是这个例子并不好，因为我们并没有拿传入的属性值做什么事情，所以 $apply 大多使用在 set 属性值之前有一些逻辑运算的情况下。比如值 + 1 或者字符串转成大写等等 …
接下来的两个指令日常开发中几乎用不到，至少博主是这样的。
$add
$add 用来向 Map 或者 Set 对象中添加元素，这里我们用 Map 来做演示。
let update = require(“immutability-helper”);
let myMap = new Map();
myMap.set(‘a’, ‘1’);
const myMap2 = update(myMap, {
$add: [
[‘foo’, ‘bar’], // 每个数组的第一个元素作为 key，第二个元素作为 value
[‘baz’, ‘boo’]
]
})
for (let key of myMap.keys()) {
console.log(key);
}
console.log(‘—————–‘);
for (let key of myMap2.keys()) {
console.log(key);
}
因为 Map 和 Set 从 ES6 开始才有，所以 … 感人！输出结果：
$remove
$remove 与 $add 完全相反，我们在上一个例子的基础上做点改进
let update = require(“immutability-helper”);
let myMap = new Map();
myMap.set(‘a’, ‘1’);
const myMap2 = update(myMap, {
$add: [
[‘foo’, ‘bar’],
[‘baz’, ‘boo’]
]
})
const myMap3 = update(myMap2, {
$remove:
[‘foo’] // 想要删除的 key 的集合
})
for (let key of myMap.keys()) {
console.log(key);
}
console.log(‘—————–‘);
for (let key of myMap2.keys()) {
console.log(key);
}
console.log(‘—————–‘);
for (let key of myMap3.keys()) {
console.log(key);
}
输出结果：
用法同样简单明了。
到这里，immutability-helper 就全部介绍完毕了。同时笔者也做个预告，接下来一大段时间内的博客会以 React 的新特性为主干线，比如最新大热的 React Hook 也会是笔者重点介绍的特性。大家拭目以待吧！！
下期见 …
