immutability-helper 学习笔记 -2

呼...这已是今天第三篇博文了。好久没写了，忽然写那么多感受有点脑壳昏了。出来混总要还的，谁让我以前那么懒没有按照本身的计划更新博文...好了闲话很少说，咱们接着上篇继续说咯。
上篇咱们引出了一个颇有实用价值的第三方插件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也会是笔者重点介绍的特性。你们拭目以待吧！！

下期见...