【实用库小书】immutability-helper (02)

上一篇 中我们了解了 immutability-helper 的来历、价值和使用方法。

接下来继续将上一篇未介绍完的方法继续写完，给这个系列的博客画上圆满的句号。

immutability-helper指令

$merge

顾名思义，这个指令的作用就是合并。合并什么？合并字面量对象！以什么方式合并？浅合并！

const update = require("immutability-helper");
const data = { a: 5, b: 3 };
const data2 = update(data, { $merge: { b: 6, c: 7 } });
console.log(data2);

输出结果：

$apply

这个指令和$set有点类似，都可以用来更新对象的某个属性值。不过与$set不同的是，$apply通过传入一个function并将该function的返回值更新到指定属性值中去。
我们借$set的例子重新写一个例子

const 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来做演示。

const 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);
}

输出结果：

$remove

$remove与$add完全相反，我们在上一个例子的基础上做点改进

const 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就全部介绍完毕了。感谢大家的支持！！

咱们下期见...