immutability-helper 学习笔记 -2

stormzhang 发布于2019-08-26 13:33 / 1581人阅读

摘要：从运行结果来看后者会覆盖前者的部分属性属性名相同的情况下，比如属性。不过与不同的是，通过传入一个并将该的返回值更新到指定属性值中去。我们借的例子重新写一个例子输出结果可以看出对应的方法被传入了被指定属性的初始值，而后将返回值重新给了属性。

呼...这已经是今天第三篇博文了。很久没写了，突然写那么多感觉有点脑袋昏了。出来混总要还的，谁让我之前那么懒没有按照自己的计划更新博文...好了闲话不多说，我们接着上篇继续说咯。
上篇我们引出了一个很有实用价值的第三方插件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也会是笔者重点介绍的特性。大家拭目以待吧！！

下期见...

海外云主机云服务器学习笔记学习笔记一基础学习笔记深度学习笔记

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/109046.html

immutability因React官方出镜之使用总结分享！

摘要：引言之前项目中遇到数据拷贝引用之间数据层级嵌套过深，拷贝的值相互之间影响的问题，后来引入了，使用过程中的一些总结，跟大家分享下，至于为什么不是，请看下文分解，这里是平头哥联盟，我是首席填坑官苏南。 showImg(https://segmentfault.com/img/bVbiLBX?w=1008&h=298); 引言　　之前项目中遇到数据拷贝、引用之间数据层级嵌套过深，拷贝的值相...

Miyang 2019-08-23 12:44 评论0 收藏0
React 入门学习笔记整理目录

摘要：入门学习笔记整理一搭建环境入门学习笔记整理二简介与语法入门学习笔记整理三组件入门学习笔记整理四事件入门学习笔记整理五入门学习笔记整理六组件通信入门学习笔记整理七生命周期入门学习笔记整理八入门学习笔记整理九路由React 入门学习笔记整理（一）——搭建环境 React 入门学习笔记整理（二）—— JSX简介与语法 React 入门学习笔记整理（三）—— 组件 React 入门学习笔记整理（...

daryl 2019-04-23 11:57 评论0 收藏0
大部分程序员都记不住的注解，Idea 云笔记却能轻松记住

摘要：只因技术种类繁杂众多层出不穷，程序员只有靠不断的学习才能不落后于技术，被工作淘汰。特此推荐给大家。 99%的程序员每天都是先学习，后工作，不然完成不了工作。只因技术种类繁杂众多、层出不穷，程序员只有靠不断的学习才能不落后于技术，被工作淘汰。我就是这其中一员，深得体会其中的「疼并快乐」，在...

ARGUS 2021-11-15 11:38 评论0 收藏0
谷歌欲借机器学习技术在云服务领域赶超AWS与Azure

摘要：实际上，在争夺这个客户过程中，这些高水平机器学习工具足以让谷歌击败亚马逊后者被普遍认为是公有云平台领域的领导者。他在大会上表示，谷歌和微软是云端计算学习领域的领导者，而则在努力追赶。印象笔记并不是一家使用谷歌机器学习能力的公司。北京时间9月15日消息，据国外媒体报道，谷歌过去几年一直在提供公有云服务，但在客户增长方面，这家搜索巨头仍然落后于主要竞争对手亚马逊和微软。谷歌数据中心内部一瞥在V...

LMou 2019-04-25 17:44 评论0 收藏0