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也會是筆者重點介紹的特性。你們拭目以待吧！！

下期見...