immutable.js学习笔记(二)----- List

一、List

list与数组是兼容的,大多数的api与数组是类似的
![在这里插入图片描述]( https://img-blog.csdnimg.cn/20210408124940539.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MTAzNjEy,size_16,color_FFFFFF,t_70)

![在这里插入图片描述]( https://img-blog.csdnimg.cn/20210408125108456.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MTAzNjEy,size_16,color_FFFFFF,t_70)
注意 List.of(),不需要写中括号
![在这里插入图片描述]( https://img-blog.csdnimg.cn/20210408125203651.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MTAzNjEy,size_16,color_FFFFFF,t_70)

二、List的API

(一)size:取得 List 的长度

![在这里插入图片描述]( https://img-blog.csdnimg.cn/20210408125341348.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MTAzNjEy,size_16,color_FFFFFF,t_70)

(二)set:设定指定下标的值

![在这里插入图片描述]( https://img-blog.csdnimg.cn/20210408125454148.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MTAzNjEy,size_16,color_FFFFFF,t_70)
如果下标超过数组值,自动填充为undefined
![在这里插入图片描述]( https://img-blog.csdnimg.cn/20210408125706154.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MTAzNjEy,size_16,color_FFFFFF,t_70)
把最后一个值更改,无需取得数组长度
![在这里插入图片描述]( https://img-blog.csdnimg.cn/20210408125821650.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MTAzNjEy,size_16,color_FFFFFF,t_70)

(三)delete:删除指定下标的值

删除下标为0的数
![在这里插入图片描述]( https://img-blog.csdnimg.cn/20210408130013259.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MTAzNjEy,size_16,color_FFFFFF,t_70)
从右往左数,删掉第二个
![在这里插入图片描述]( https://img-blog.csdnimg.cn/20210408130131213.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MTAzNjEy,size_16,color_FFFFFF,t_70)

(四)insert:插入值

![在这里插入图片描述]( https://img-blog.csdnimg.cn/20210408130233107.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MTAzNjEy,size_16,color_FFFFFF,t_70)
这个会把数组完整的拷贝下来,性能不是特别好

(五)update:更新指定下标的值

![在这里插入图片描述]( https://img-blog.csdnimg.cn/20210408130514844.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MTAzNjEy,size_16,color_FFFFFF,t_70)

(六)clear:清空并返回一个长度为0的数组

clear是进行一次copy,返回一个空数组
![在这里插入图片描述]( https://img-blog.csdnimg.cn/20210408130623564.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MTAzNjEy,size_16,color_FFFFFF,t_70)

(七)setSize:重新设定数组长度

![在这里插入图片描述]( https://img-blog.csdnimg.cn/20210408130808351.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MTAzNjEy,size_16,color_FFFFFF,t_70)

(八)setIn:设定嵌套结构的值

![在这里插入图片描述]( https://img-blog.csdnimg.cn/20210408131157370.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MTAzNjEy,size_16,color_FFFFFF,t_70)

(九)concat:连接List

![在这里插入图片描述]( https://img-blog.csdnimg.cn/2021040813133774.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MTAzNjEy,size_16,color_FFFFFF,t_70)
注意:merge是concat的别名,他们的作用是一模一样的
![在这里插入图片描述]( https://img-blog.csdnimg.cn/20210408131500461.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MTAzNjEy,size_16,color_FFFFFF,t_70)

(十)flatten:循环过滤并返回新的List

被拉成了一维数组
![在这里插入图片描述]( https://img-blog.csdnimg.cn/20210408131650799.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MTAzNjEy,size_16,color_FFFFFF,t_70)
如果嵌套结构太深的话可以写成false,如果·明确只有一层的话可以写成true,或者明确的数字,这里可以写成2
![在这里插入图片描述]( https://img-blog.csdnimg.cn/20210408131849431.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MTAzNjEy,size_16,color_FFFFFF,t_70)

(十一)find:查找,返回第一个返回的结果

![在这里插入图片描述]( https://img-blog.csdnimg.cn/20210408133722765.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MTAzNjEy,size_16,color_FFFFFF,t_70)

(十二)findLast:查找,返回最后一个符合的结果

![在这里插入图片描述]( https://img-blog.csdnimg.cn/2021040813390788.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MTAzNjEy,size_16,color_FFFFFF,t_70)

(十三)keys:返回所有的下标

![在这里插入图片描述]( https://img-blog.csdnimg.cn/2021040813403223.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MTAzNjEy,size_16,color_FFFFFF,t_70)

(十四)values:返回所有的值

![在这里插入图片描述]( https://img-blog.csdnimg.cn/20210408134111703.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MTAzNjEy,size_16,color_FFFFFF,t_70)

(十五)entry:返回所有entry

![在这里插入图片描述]( https://img-blog.csdnimg.cn/20210408134154767.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MTAzNjEy,size_16,color_FFFFFF,t_70)
当数组的每一项元素是对象的时候,我们可以根据对象的属性来对它进行分组

(十六)groupBy:分组

![在这里插入图片描述]( https://img-blog.csdnimg.cn/20210408134518336.png?x-oss-process=image/watermark ,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MTAzNjEy,size_16,color_FFFFFF,t_70)
未完待续。。。。。

posted @ 2021-04-24 22:22  杨芋可可  阅读(130)  评论(0)    收藏  举报