immutability-helper 学习笔记 -2
栏目: JavaScript · 发布时间: 5年前
内容简介:呼...这已经是今天第三篇博文了。很久没写了,突然写那么多感觉有点脑袋昏了。出来混总要还的,谁让我之前那么懒没有按照自己的计划更新博文...好了闲话不多说,我们接着上篇继续说咯。上篇我们引出了一个很有实用价值的第三方插件immutability-helper,它已经被大多数React开发者所接受并且已经在React项目中使用,至于它的价值所在,我想我已经在上篇博文中说的很清楚了,所以在这里就不再赘述。下面我们将上篇遗留下的5个指令介绍完。
呼...这已经是今天第三篇博文了。很久没写了,突然写那么多感觉有点脑袋昏了。出来混总要还的,谁让我之前那么懒没有按照自己的计划更新博文...好了闲话不多说,我们接着上篇继续说咯。
上篇我们引出了一个很有实用价值的第三方插件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也会是笔者重点介绍的特性。大家拭目以待吧!!
下期见...
以上所述就是小编给大家介绍的《immutability-helper 学习笔记 -2》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- 【每日笔记】【Go学习笔记】2019-01-04 Codis笔记
- 【每日笔记】【Go学习笔记】2019-01-02 Codis笔记
- 【每日笔记】【Go学习笔记】2019-01-07 Codis笔记
- Golang学习笔记-调度器学习
- Vue学习笔记(二)------axios学习
- 算法/NLP/深度学习/机器学习面试笔记
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
数据库索引设计与优化
【美】Tapio Lahdenmaki、【美】Michael Leach / 曹怡倩、赵建伟 / 电子工业出版社 / 2015-6 / 79.00元
《数据库索引设计与优化》提供了一种简单、高效、通用的关系型数据库索引设计方法。作者通过系统的讲解及大量的案例清晰地阐释了关系型数据库的访问路径选择原理,以及表和索引的扫描方式,详尽地讲解了如何快速地估算SQL 运行的CPU 时间及执行时间,帮助读者从原理上理解SQL、表及索引结构、访问方式等对关系型数据库造成的影响,并能够运用量化的方法进行判断和优化,指导关系型数据库的索引设计。 《数据库索......一起来看看 《数据库索引设计与优化》 这本书的介绍吧!