成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

immutability-helper 學(xué)習(xí)筆記 -2

stormzhang / 1773人閱讀

摘要：從運(yùn)行結(jié)果來(lái)看后者會(huì)覆蓋前者的部分屬性屬性名相同的情況下，比如屬性。不過(guò)與不同的是，通過(guò)傳入一個(gè)并將該的返回值更新到指定屬性值中去。我們借的例子重新寫一個(gè)例子輸出結(jié)果可以看出對(duì)應(yīng)的方法被傳入了被指定屬性的初始值，而后將返回值重新給了屬性。

呼...這已經(jīng)是今天第三篇博文了。很久沒(méi)寫了，突然寫那么多感覺(jué)有點(diǎn)腦袋昏了。出來(lái)混總要還的，誰(shuí)讓我之前那么懶沒(méi)有按照自己的計(jì)劃更新博文...好了閑話不多說(shuō)，我們接著上篇繼續(xù)說(shuō)咯。
上篇我們引出了一個(gè)很有實(shí)用價(jià)值的第三方插件immutability-helper，它已經(jīng)被大多數(shù)React開發(fā)者所接受并且已經(jīng)在React項(xiàng)目中使用，至于它的價(jià)值所在，我想我已經(jīng)在上篇博文中說(shuō)的很清楚了，所以在這里就不再贅述。
下面我們將上篇遺留下的5個(gè)指令介紹完。

immutability-helper指令 $merge

顧名思義，這個(gè)指令的作用就是合并。合并什么？合并字面量對(duì)象！以什么方式合并？淺合并！

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

輸出結(jié)果：

很簡(jiǎn)單，就是將$merge指令對(duì)應(yīng)的參數(shù)合并到update函數(shù)的第一個(gè)參數(shù)中并輸出一個(gè)內(nèi)容相同的另一個(gè)字面量對(duì)象。從運(yùn)行結(jié)果來(lái)看后者會(huì)覆蓋前者的部分屬性(屬性名相同的情況下，比如：屬性b)。

$apply

這個(gè)指令和$set有點(diǎn)類似，都可以用來(lái)更新對(duì)象的某個(gè)屬性值。不過(guò)與$set不同的是，$apply通過(guò)傳入一個(gè)function并將該function的返回值更新到指定屬性值中去。
我們借$set的例子重新寫一個(gè)例子

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

輸出結(jié)果：

可以看出$apply對(duì)應(yīng)的方法被傳入了被指定屬性的初始值，而后將返回值重新set給了name屬性。過(guò)程很簡(jiǎn)單！但是這個(gè)例子并不好，因?yàn)槲覀儾](méi)有拿傳入的屬性值做什么事情，所以$apply大多使用在set屬性值之前有一些邏輯運(yùn)算的情況下。比如值+1或者字符串轉(zhuǎn)成大寫等等...

接下來(lái)的兩個(gè)指令日常開發(fā)中幾乎用不到，至少博主是這樣的。

$add

$add用來(lái)向Map或者Set對(duì)象中添加元素，這里我們用Map來(lái)做演示。

let update = require("immutability-helper");
let myMap = new Map();
myMap.set("a", "1");
const myMap2 = update(myMap, {
    $add: [
        ["foo", "bar"], //每個(gè)數(shù)組的第一個(gè)元素作為key，第二個(gè)元素作為value
        ["baz", "boo"]
    ]
})

for (let key of myMap.keys()) {
    console.log(key);
}

console.log("-----------------");
for (let key of myMap2.keys()) {
    console.log(key);
}

因?yàn)镸ap和Set從ES6開始才有，所以...感人！
輸出結(jié)果：

$remove

$remove與$add完全相反，我們?cè)谏弦粋€(gè)例子的基礎(chǔ)上做點(diǎn)改進(jìn)

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"] //想要?jiǎng)h除的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);
}

輸出結(jié)果：


用法同樣簡(jiǎn)單明了。

到這里，immutability-helper就全部介紹完畢了。同時(shí)筆者也做個(gè)預(yù)告，接下來(lái)一大段時(shí)間內(nèi)的博客會(huì)以React的新特性為主干線，比如最新大熱的React Hook也會(huì)是筆者重點(diǎn)介紹的特性。大家拭目以待吧??！

下期見(jiàn)...

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/109046.html

相關(guān)文章

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

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

    Miyang 評(píng)論0 收藏0

  • React 入門學(xué)習(xí)筆記整理目錄

    摘要：入門學(xué)習(xí)筆記整理一搭建環(huán)境入門學(xué)習(xí)筆記整理二簡(jiǎn)介與語(yǔ)法入門學(xué)習(xí)筆記整理三組件入門學(xué)習(xí)筆記整理四事件入門學(xué)習(xí)筆記整理五入門學(xué)習(xí)筆記整理六組件通信入門學(xué)習(xí)筆記整理七生命周期入門學(xué)習(xí)筆記整理八入門學(xué)習(xí)筆記整理九路由React 入門學(xué)習(xí)筆記整理（一）——搭建環(huán)境 React 入門學(xué)習(xí)筆記整理（二）—— JSX簡(jiǎn)介與語(yǔ)法 React 入門學(xué)習(xí)筆記整理（三）—— 組件 React 入門學(xué)習(xí)筆記整理（...

    daryl 評(píng)論0 收藏0

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

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

    ARGUS 評(píng)論0 收藏0

  • 谷歌欲借機(jī)器學(xué)習(xí)技術(shù)在云服務(wù)領(lǐng)域趕超AWS與Azure

    摘要：實(shí)際上，在爭(zhēng)奪這個(gè)客戶過(guò)程中，這些高水平機(jī)器學(xué)習(xí)工具足以讓谷歌擊敗亞馬遜后者被普遍認(rèn)為是公有云平臺(tái)領(lǐng)域的領(lǐng)導(dǎo)者。他在大會(huì)上表示，谷歌和微軟是云端計(jì)算學(xué)習(xí)領(lǐng)域的領(lǐng)導(dǎo)者，而則在努力追趕。印象筆記并不是一家使用谷歌機(jī)器學(xué)習(xí)能力的公司。 北京時(shí)間9月15日消息，據(jù)國(guó)外媒體報(bào)道，谷歌過(guò)去幾年一直在提供公有云服務(wù)，但在客戶增長(zhǎng)方面，這家搜索巨頭仍然落后于主要競(jìng)爭(zhēng)對(duì)手亞馬遜和微軟。谷歌數(shù)據(jù)中心內(nèi)部一瞥在V...

    LMou 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<