资讯专栏INFORMATION COLUMN

初学immutable.js的一些总结

Near_Li / 430人阅读

摘要:在中,的返回值是,即一个新的对象。该方法在中的和中均有使用,但是此处的方法返回的是一个布尔值。是排序方法,可以传入一个函数,通过返回值的正负确定元素的前后排序顺序。

1.immutableObj在复制的时候,复制的是引用。

=== 比较的是引用是否一样。
而is()和equal()表示的是值是否一样,什么是值,我认为就是将一个对象Json.stringify()之后的的数据。

总体而言,如果===相等,那么使用equal()和is()也是相等的;
如果只是is和equal()相等,可能===相等,也可能是两个对象被json.stringify()之后的字符串是相等的。

如果是像map1 = map3的赋值操作,其实这里复制的是引用。
就上面的结论可知,只要引用向相同, === 和 equals() 返回的都是true.

2.immutable中的对象的使用和es2015灰常的像,一个最大的区别,就是不管啥时候,返回值都是一个新的immutable集合。
比如arr=[1,2] ,arr.push(3,4)的返回值是4,即arr的新长度。
在immutable中,arr1=List([1,2]) , arr1.push(3,4)的返回值是List([1,2,3,4]),即一个新的immutable对象。

3.immutable对象和es2015中原生的对象是可以自由合并的。啥意思?就是当obj被immutable的Map对象merge,
或者是array被immutable的List来concat的时候,es2015中的array和object就被自动对应转换成了List和Map.

说白了,就是当Array或者Object被传入immutable的List和Map使用的方法的时候,会做一个类型检测,如果接受的参数是
Array,就将该Array转换成List,如果参数是Object, 就将该Object转换成Immutable的Map.

换一个角度看,这可以让我们更灵活的合并处理es2015的原生对象和immutable对象。即扩展了es2015原生对象的方法集。

注意:使用immutable对象的api将es2015原生对象Object转换成immutable中的map的时候,这个Object的所有key值都会被作为字符串处理。

如果Object使用的是[变量]的方式设置的key值,当使用immutable的map的api将其转换成map的时候,这个key值就是[变量]中的
"变量"指代的字符串。
但如果变量指代的不是字符串,而是对象呢? ==> 当然是把这个对象stringy成一个字符串啊

4.immutable对象怎样转换成es2015的原生对象呢?
这里的转换有三种: 对应浅拷贝的浅转换;toObject() / toArray()
对应深拷贝的深转换; toJS() , toJSON()
直接转换成字符串; JSON.stringify(immutableObj)
注意: 这里的toObject() / toArray / toJS() / toJSON都是map和list通用的。

5.所有的immutable的对象都是iterable对象,这可就意味着它可以被yield,可以被for of, 也可以被...符号所展开。

6.操作嵌套immutable数据结构的有效方式就是使用专门操作嵌套数据的api.
比如mergeDeep(),getIn(),setIn(),updateIn(). 这4个方法被使用在List,Map和OrderedMap对象上。
getIn()/setIn()/updateIn()传递的第一个参数是key值组成的路径。
而mergeDeep()传递的参数是一个嵌套Obj.

7.当map在使用自己的api来update自己的时候,如果update的结果和自己原本是一模一样的,
那么该update的api返回的对象的引用和自己是一样的。
当update之后的结果和自己不同,那么update返回的对象会被在内存中新建一个引用。

es2015中原生的map如果使用set()更新了自己的数据,不管更新之后,数据有没有变化,
set()方法返回的引用都是一样的。

8.如果想要多次更改某个immutable对象,但是却只需要生成一个新的immutable对象,
可以使用withMutations()方法。在这个方法中,只能够使用set,push,pop,clear,unshift,shift ,
update, setIn , updateIn , mergeIn,mergeDeepIn() , concat()方法。

9.seq是一种可以使用链式书写的对象。它在使用链式书写的时候,只会产生一个新对象,链式中间的操作是不会产生新的对象的。
其他的常用对象,比如Map和List可以通过Seq()转换成一个seq对象。但是事实上,这种对象有什么样的具体作用还尚不清楚。

下面挑选了List对象来进行深度分析,下面是一些API的记录:

/**

List对象可以由3种方式转换而成。

(1) es2105中的Array;

(2) es2015中的set

(3) immutable中的set

(4) es2015中的Array或者set的遍历器接口 : someArray[Symbol.iterator]()

*

可以通过List.of()方法构造List.这个和es2015的Array.of()是一样的。

*

更新List中的值使用的是set()方法,这个和es2015中的Array和set都不同,和es2015的map设置值的方式是一样的。

这里的set()方法的第一个参数是索引,该索引可以是负数,用法和Array中使用slice()方法参数为负数是一样的。

*

删除List中的数据,使用的是delete()方法。该方法在es2015中的set和map中均有使用,但是此处的delete()方法返回的是

一个布尔值。而List中使用的delete()方法更像Array中的splice(index,1),只不过,delete()的返回值是一个新的List,

而splice()返回的是被删除的项目。

*

向List中增加数据,使用的是insert()方法,和Array中的splice(index, 0 , value)一样。返回的是一个新的List()对象。

*

对List的首尾增减使用的是和es2015中的Array一样的方式,只不过这4个api返回的都是一个新的List对象。

push(), pop(), shift(), unshift()

*

如果想要更新List中某一个已有项目的value,使用的是update()方法。这个方法接受2个参数,第一个参数是索引,第二个参数

是一个函数,这个函数接受之前在该索引位置的值作为参数,返回一个新value,可以是任意类型。注意,update()是更新已有的值,

set()是设置某个位置上的值,如果那个位置上已经有值,使用set()设置之后,该位置上的值会被替换。

*

如果想要向Array设置length一样,粗暴地重置一个List的长度,使用的方法是setSize()方法。二者效果是一致的。

setSize()返回一个新长度的List()对象。

*

如果想要深度设置List内部嵌套的数据,使用setIn()方法,第一个参数是索引组成的路径。第二个参数是新设置的值。

话说这个嵌套是个什么嵌套法?

当嵌套的是Array或者是List的时候,path中都是索引;当嵌套的是Object或者是Map的时候,path是索引和key组合的。

*

如果想更新嵌套List,使用的api是updateIn(),该参数接受两个参数,一个是索引组成的path,第二个依旧是一个函数,接受

该位置老数据作为参数。

*

类似于Array中的其他方法,比如concat(),map(),filter()方法的使用都和Array是一样的,只不过这几个方法返回的都是新的

List对象。然后在map()和filter()方法中的item都是一个Immutable对象。

*

另,List中的还有filterNot()方法,其实就是对filter()方法取反。其他的使用方法一样,也是返回一个布尔值。

*

另,List中还有reverse()和sort()方法,reverse()方法和Array中的reverse()方法是一样的,都是用来将索引翻转。

sort()是排序方法,可以传入一个函数,通过返回值的正负确定元素的前后排序顺序。

*

如果是一个简单map调用sort()进行排序,sort((a,b)=>{})中的a和b是map中的第一层value.

如果是一个复杂的map想要使用sort来排序,可能由于value的数据类型不同,sort()函数根本就无法比较。

此时需要使用sortBy()函数,该函数接受两个参数,第一个参数用来指定要比较的是每一个map项目中的某个部分,

第二个参数和sort()函数接受的回调是一样的,即比较那一项,根据返回值的正负确定排序。

*
*

如果想要将一个List转换成Array,有浅转换和深转换。

someList.toJS() : 递归转换List成es2015中的array,将List中的所有项目转换成Array和object;

*

someList.toJSON() 和 someList.toArray() 都是将一个List浅转换成array,也就是说,将这个List转换成Array,这

个array中的items的类型是不会被转换的。之前的List中的第一层数据如果有List和Map,那么浅转换之后的Array的

第一层item还是List和Map.

*

someList.toObject()可以将List转换成key是string的Object.

*
*

上面的方法都是讲怎么操作整个List的。下面的有几个方法讲怎么获取List中的item.或者给item赋值的。

get(index)获取某个索引位置的value;

has(index) 判断某个索引是不是存在的。比如一个List的size是6,那么has(7)肯定返回false.

includes(value) 判断List中存在某个value.这个参数value如果和List中的某个value是值等的,就返回true.

*
*

另,在Array中还有splice()方法啊,indexof(), lastIndexOf(), List中也有这些方法,使用效果都是一样的。

*

**/

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

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

相关文章

  • 深入理解js

    摘要:详解十大常用设计模式力荐深度好文深入理解大设计模式收集各种疑难杂症的问题集锦关于,工作和学习过程中遇到过许多问题,也解答过许多别人的问题。介绍了的内存管理。 延迟加载 (Lazyload) 三种实现方式 延迟加载也称为惰性加载,即在长网页中延迟加载图像。用户滚动到它们之前,视口外的图像不会加载。本文详细介绍了三种延迟加载的实现方式。 详解 Javascript十大常用设计模式 力荐~ ...

    caikeal 评论0 收藏0
  • 翻译连载 | 附录 C:函数式编程函数库-《JavaScript轻量级函数式编程》 |《你不知道J

    摘要:为了尽可能提升互通性,已经成为函数式编程库遵循的实际标准。与轻量级函数式编程的概念相反,它以火力全开的姿态进军的函数式编程世界。 原文地址:Functional-Light-JS 原文作者:Kyle Simpson-《You-Dont-Know-JS》作者 关于译者:这是一个流淌着沪江血液的纯粹工程:认真,是 HTML 最坚实的梁柱;分享,是 CSS 里最闪耀的一瞥;总结,...

    Miracle 评论0 收藏0
  • React-redux进阶之Immutable.js

    摘要:的优势保证不可变每次通过操作的对象都会返回一个新的对象丰富的性能好通过字典树对数据结构的共享的问题与原生交互不友好通过生成的对象在操作上与原生不同,如访问属性,。 Immutable.js Immutable的优势 1. 保证不可变(每次通过Immutable.js操作的对象都会返回一个新的对象) 2. 丰富的API 3. 性能好 (通过字典树对数据结构的共享) Immutab...

    孙淑建 评论0 收藏0
  • CoderPad-基于React全家桶写作/新闻一体综合应用实践总结

    摘要:基于全家桶写作新闻一体综合应用的实践总结在线地址大家伙儿们,又见面了。参照但不可否认非常符合的思想,都在处理大规模数据时彰显优势。最好的办法是使用部署环境。细致的拆分,解耦性更好,以为单位进行修改时,大大降低误伤率的同时,隔离无关的信息。 ?CoderPad-基于React全家桶写作/新闻一体综合应用的实践总结 showImg(https://segmentfault.com/img/...

    DC_er 评论0 收藏0
  • 前端数据扁平化与持久化

    摘要:与持久化工程师花了年时间打造,与同期出现。有持久化数据结构,如等,并发安全。总结篇幅有限,时间也比较晚了,关于前端数据的扁平化与持久化处理先讲这么多了,有兴趣的同学可以关注下,后面有时间会多整理分享。 (PS: 时间就像海绵里的水,挤到没法挤,只能挤挤睡眠时间了~ 知识点还是需要整理的,付出总会有收获,tired but fulfilled~) 前言 最近业务开发,从零搭建网页生成器,...

    dreamtecher 评论0 收藏0

发表评论

0条评论

Near_Li

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<