資訊專欄INFORMATION COLUMN
摘要：從運行結(jié)果來看后者會覆蓋前者的部分屬性屬性名相同的情況下，比如屬性。不過與不同的是，通過傳入一個并將該的返回值更新到指定屬性值中去。我們借的例子重新寫一個例子輸出結(jié)果可以看出對應(yīng)的方法被傳入了被指定屬性的初始值，而后將返回值重新給了屬性。
呼...這已經(jīng)是今天第三篇博文了。很久沒寫了，突然寫那么多感覺有點腦袋昏了。出來混總要還的，誰讓我之前那么懶沒有按照自己的計劃更新博文...好了閑話不多說，我們接著上篇繼續(xù)說咯。
上篇我們引出了一個很有實用價值的第三方插件immutability-helper，它已經(jīng)被大多數(shù)React開發(fā)者所接受并且已經(jīng)在React項目中使用，至于它的價值所在，我想我已經(jīng)在上篇博文中說的很清楚了，所以在這里就不再贅述。
下面我們將上篇遺留下的5個指令介紹完。
顧名思義，這個指令的作用就是合并。合并什么？合并字面量對象！以什么方式合并？淺合并！
var update = require("immutability-helper");
const data = { a: 5, b: 3 };
const data2 = update(data, { $merge: { b: 6, c: 7 } });
console.log(data2);
輸出結(jié)果：
很簡單，就是將$merge指令對應(yīng)的參數(shù)合并到update函數(shù)的第一個參數(shù)中并輸出一個內(nèi)容相同的另一個字面量對象。從運行結(jié)果來看后者會覆蓋前者的部分屬性(屬性名相同的情況下，比如：屬性b)。
這個指令和$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);
輸出結(jié)果：
可以看出$apply對應(yīng)的方法被傳入了被指定屬性的初始值，而后將返回值重新set給了name屬性。過程很簡單！但是這個例子并不好，因為我們并沒有拿傳入的屬性值做什么事情，所以$apply大多使用在set屬性值之前有一些邏輯運算的情況下。比如值+1或者字符串轉(zhuǎn)成大寫等等...
接下來的兩個指令日常開發(fā)中幾乎用不到，至少博主是這樣的。
$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"], //每個數(shù)組的第一個元素作為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開始才有，所以...感人！
輸出結(jié)果：
$remove與$add完全相反，我們在上一個例子的基礎(chǔ)上做點改進(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"] //想要刪除的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é)果：
用法同樣簡單明了。
到這里，immutability-helper就全部介紹完畢了。同時筆者也做個預(yù)告，接下來一大段時間內(nèi)的博客會以React的新特性為主干線，比如最新大熱的React Hook也會是筆者重點介紹的特性。大家拭目以待吧??！
下期見...
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/109046.html
摘要：引言之前項目中遇到數(shù)據(jù)拷貝引用之間數(shù)據(jù)層級嵌套過深，拷貝的值相互之間影響的問題，后來引入了，使用過程中的一些總結(jié)，跟大家分享下，至于為什么不是，請看下文分解，這里是平頭哥聯(lián)盟，我是首席填坑官蘇南。 showImg(https://segmentfault.com/img/bVbiLBX?w=1008&h=298); 引言 之前項目中遇到數(shù)據(jù)拷貝、引用之間數(shù)據(jù)層級嵌套過深，拷貝的值相...
摘要：入門學(xué)習(xí)筆記整理一搭建環(huán)境入門學(xué)習(xí)筆記整理二簡介與語法入門學(xué)習(xí)筆記整理三組件入門學(xué)習(xí)筆記整理四事件入門學(xué)習(xí)筆記整理五入門學(xué)習(xí)筆記整理六組件通信入門學(xué)習(xí)筆記整理七生命周期入門學(xué)習(xí)筆記整理八入門學(xué)習(xí)筆記整理九路由React 入門學(xué)習(xí)筆記整理（一）——搭建環(huán)境 React 入門學(xué)習(xí)筆記整理（二）—— JSX簡介與語法 React 入門學(xué)習(xí)筆記整理（三）—— 組件 React 入門學(xué)習(xí)筆記整理（...
摘要：只因技術(shù)種類繁雜眾多層出不窮，程序員只有靠不斷的學(xué)習(xí)才能不落后于技術(shù)，被工作淘汰。特此推薦給大家。 99%的程序員每天都是先學(xué)習(xí)，后工作，不然完成不了工作。只因技術(shù)種類繁雜眾多、層出不窮，程序員只有靠不斷的學(xué)習(xí)才能不落后于技術(shù)，被工作淘汰。我就是這其中一員，深得體會其中的「疼并快樂」，在...
摘要：實際上，在爭奪這個客戶過程中，這些高水平機器學(xué)習(xí)工具足以讓谷歌擊敗亞馬遜后者被普遍認(rèn)為是公有云平臺領(lǐng)域的領(lǐng)導(dǎo)者。他在大會上表示，谷歌和微軟是云端計算學(xué)習(xí)領(lǐng)域的領(lǐng)導(dǎo)者，而則在努力追趕。印象筆記并不是一家使用谷歌機器學(xué)習(xí)能力的公司。 北京時間9月15日消息，據(jù)國外媒體報道，谷歌過去幾年一直在提供公有云服務(wù)，但在客戶增長方面，這家搜索巨頭仍然落后于主要競爭對手亞馬遜和微軟。谷歌數(shù)據(jù)中心內(nèi)部一瞥在V...
閱讀 3400·2023-04-25 17:19
閱讀 700·2021-11-23 09:51
閱讀 1409·2021-11-08 13:19
閱讀 855·2021-09-29 09:34
閱讀 1754·2021-09-28 09:36
閱讀 1552·2021-09-22 14:59
閱讀 2777·2019-08-29 16:38
閱讀 2109·2019-08-26 13:40
