国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

immutability-helper 學習筆記 -2

stormzhang / 1754人閱讀

摘要：從運行結果來看后者會覆蓋前者的部分屬性屬性名相同的情況下，比如屬性。不過與不同的是，通過傳入一個并將該的返回值更新到指定屬性值中去。我們借的例子重新寫一個例子輸出結果可以看出對應的方法被傳入了被指定屬性的初始值，而后將返回值重新給了屬性。

呼...這已經是今天第三篇博文了。很久沒寫了，突然寫那么多感覺有點腦袋昏了。出來混總要還的，誰讓我之前那么懶沒有按照自己的計劃更新博文...好了閑話不多說，我們接著上篇繼續說咯。
上篇我們引出了一個很有實用價值的第三方插件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也會是筆者重點介紹的特性。大家拭目以待吧！！

下期見...

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/109046.html

相關文章

  • immutability因React官方出鏡之使用總結分享！

    摘要：引言之前項目中遇到數據拷貝引用之間數據層級嵌套過深，拷貝的值相互之間影響的問題，后來引入了，使用過程中的一些總結，跟大家分享下，至于為什么不是，請看下文分解，這里是平頭哥聯盟，我是首席填坑官蘇南。 showImg(https://segmentfault.com/img/bVbiLBX?w=1008&h=298); 引言 　　之前項目中遇到數據拷貝、引用之間數據層級嵌套過深，拷貝的值相...

    Miyang 評論0 收藏0

  • React 入門學習筆記整理目錄

    摘要：入門學習筆記整理一搭建環境入門學習筆記整理二簡介與語法入門學習筆記整理三組件入門學習筆記整理四事件入門學習筆記整理五入門學習筆記整理六組件通信入門學習筆記整理七生命周期入門學習筆記整理八入門學習筆記整理九路由React 入門學習筆記整理（一）——搭建環境 React 入門學習筆記整理（二）—— JSX簡介與語法 React 入門學習筆記整理（三）—— 組件 React 入門學習筆記整理（...

    daryl 評論0 收藏0

  • 大部分程序員都記不住的注解，Idea 云筆記卻能輕松記住

    摘要：只因技術種類繁雜眾多層出不窮，程序員只有靠不斷的學習才能不落后于技術，被工作淘汰。特此推薦給大家。 99%的程序員每天都是先學習，后工作，不然完成不了工作。只因技術種類繁雜眾多、層出不窮，程序員只有靠不斷的學習才能不落后于技術，被工作淘汰。我就是這其中一員，深得體會其中的「疼并快樂」，在...

    ARGUS 評論0 收藏0

  • 谷歌欲借機器學習技術在云服務領域趕超AWS與Azure

    摘要：實際上，在爭奪這個客戶過程中，這些高水平機器學習工具足以讓谷歌擊敗亞馬遜后者被普遍認為是公有云平臺領域的領導者。他在大會上表示，谷歌和微軟是云端計算學習領域的領導者，而則在努力追趕。印象筆記并不是一家使用谷歌機器學習能力的公司。 北京時間9月15日消息，據國外媒體報道，谷歌過去幾年一直在提供公有云服務，但在客戶增長方面，這家搜索巨頭仍然落后于主要競爭對手亞馬遜和微軟。谷歌數據中心內部一瞥在V...

    LMou 評論0 收藏0

發表評論

0條評論

stormzhang

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<