js find的用法_React常用库Immutable.js常用API

JavaScript 中的对象一般是可变的(Mutable),因为使用了引用赋值,新的对象简单的引用了原始对象,改变新的对象将影响到原始对象。如 foo={a: 1}; bar=foo; bar.a=2 你会发现此时 foo.a 也被改成了 2。虽然这样做可以节约内存,但当应用复杂后,这就造成了非常大的隐患,Mutable 带来的优点变得得不偿失。为了解决这个问题,一般的做法是使用 shallowCopy(浅拷贝)或 deepCopy(深拷贝)来避免被修改,但这样做造成了 CPU 和内存的浪费。

什么是 Immutable Data?
  Immutable Data 就是一旦创建,就不能再被更改的数据。对 Immutable 对象的任何修改或添加删除操作都会返回一个新的 Immutable 对象。Immutable 实现的原理是 Persistent Data Structure(持久化数据结构),也就是使用旧数据创建新数据时,要保证旧数据同时可用且不变。同时为了避免 deepCopy 把所有节点都复制一遍带来的性能损耗,Immutable 使用了 Structural Sharing(结构共享),即如果对象树中一个节点发生变化,只修改这个节点和受它影响的父节点,其它节点则进行共享。
请看下面动画:

d2d27796ac79f9ae2437bee5cd4fac3f.gif

immutable.js
  Facebook 工程师 Lee Byron 花费 3 年时间打造,与 React 同期出现,但没有被默认放到 React 工具集里(React 提供了简化的 Helper)。它内部实现了一套完整的 Persistent Data Structure,还有很多易用的数据类型。像 Collection、List、Map、Set、Record、Seq。有非常全面的map、filter、groupBy、reduce``find函数式操作方法。同时 API 也尽量与 Object 或 Array 类似。

Immutable 的几种数据类型

  1. List: 有序索引集,类似JavaScript中的Array。
  2. Map: 无序索引集,类似JavaScript中的Object。
  3. OrderedMap: 有序的Map,根据数据的set()进行排序。
  4. Set: 没有重复值的集合。
  5. OrderedSet: 有序的Set,根据数据的add进行排序。
  6. Stack: 有序集合,支持使用unshift()和shift()添加和删除。
  7. Range(): 返回一个Seq.Indexed类型的集合,这个方法有三个参数,start表示开始值,默认值为0,end表示结束值,默认为无穷大,step代表每次增大的数值,默认为1.如果start = end,则返回空集合。
  8. Repeat(): 返回一个vSeq.Indexe类型的集合,这个方法有两个参数,value代表需要重复的值,times代表要重复的次数,默认为无穷大。
  9. Record: 一个用于生成Record实例的类。类似于JavaScript的Object,但是只接收特定字符串为key,具有默认值。
  10. Seq: 序列,但是可能不能由具体的数据结构支持。
  11. Collection: 是构建所有数据结构的基类,不可以直接构建。
    用的最多就是List和Map,所以在这里主要介绍这两种数据类型的API。

常用API的使用

  1. fromJS()
    作用:将一个js数据转换为Immutable类型的数据。
    用法:fromJS(value, converter)

简介:value是要转变的数据,converter是要做的操作。第二个参数可不填,默认情况会将数组转换为List类型,将对象转换为Map类型,其余不做操作。

import Immutable from 'immutable'const obj = Immutable.fromJS({name:'zyb', age:'24'})console.log(obj)
  1. toJS()
    作用:将一个Immutable数据转换为JS类型的数据。
    用法:value.toJS()
import Immutable from 'immutable'const obj = Immutable.fromJS({name:'zyb', age:'22'})console.log(obj.toJS()) // {name:'zyb', age:'22'}
  1. is()
    作用:对两个对象进行比较。
    用法:is(map1,map2)
    简介:和js中对象的比较不同,在js中比较两个对象比较的是地址,但是在Immutable中比较的是这个对象hashCode和valueOf,只要两个对象的hashCode相等,值就是相同的,避免了深度遍历,提高了性能。
import { Map, is } from 'immutable'const map1 = Map({ a: 1, b: 1, c: 1 })const map2 = Map({ a: 1, b: 1, c: 1 })map1 === map2   //falseObject.is(map1, map2) // falseis(map1, map2) // true

数据读取

get() 、 getIn()
作用:获取数据结构中的数据

has() 、 hasIn()
作用:判断是否存在某一个key
用法:

Immutable.fromJS([1,2,3,{a:4,b:5}]).has('0'); //trueImmutable.fromJS([1,2,3,{a:4,b:5}]).hasIn([3,'b']) //true

includes()
作用:判断是否存在某一个value
用法:

Immutable.fromJS([1,2,3,{a:4,b:5}]).includes(2); //trueImmutable.fromJS([1,2,3,{a:4,b:5}]).includes('2'); //false 不包含字符2Immutable.fromJS([1,2,3,{a:4,b:5}]).includes(5); //false Immutable.fromJS([1,2,3,{a:4,b:5}]).includes({a:4,b:5}) //falseImmutable.fromJS([1,2,3,{a:4,b:5}]).includes(Immutable.fromJS({a:4,b:5})) //true

first() 、 last()
作用:用来获取第一个元素或者最后一个元素,若没有则返回undefined。

代码:

Immutable.fromJS([1,2,3,{a:4,b:5}]).first()//1Immutable.fromJS([1,2,3,{a:4,b:5}]).last()//{a:4,b:5}Immutable.fromJS({a:1,b:2,c:{d:3,e:4}}).first() //1Immutable.fromJS({a:1,b:2,c:{d:3,e:4}}).first() //{d:3,e:4}

数据修改
注:这里对于数据的修改,是对原数据进行操作后的值赋值给一个新的数据,并不会对原数据进行修改,因为Immutable是不可变的数据类型。

设置 set()
作用:设置第一层key、index的值
用法:

set(index: number, value: T): Listset(key: K, value: V): this

List在使用的时候,将index为number值设置为value。Map在使用的时候,将key的值设置为value。

在List中使用时,若传入的number为负数,则将index为size+index的值设置为value,例,若传入-1,则将size-1的值设为value。若传入的number的值超过了List的长度,则将List自动补全为传入的number的值,将number设置为value,其余用undefined补全。注:跟js中不同,List中不存在空位,[,,,],List中若没有值,则为undefined。

代码实现:

//Listconst originalList = List([ 0 ]);// List [ 0 ]originalList.set(1, 1);// List [ 0, 1 ]originalList.set(0, 'overwritten');// List [ "overwritten" ]originalList.set(2, 2);// List [ 0, undefined, 2 ]List().set(50000, 'value').size;// 50001//Mapconst { Map } = require('immutable')const originalMap = Map()const newerMap = originalMap.set('key', 'value')const newestMap = newerMap.set('key', 'newer value')originalMap// Map {}newerMap// Map { "key": "value" }newestMap// Map { "key": "newer value" }

setIn()
作用:设置深层结构中某属性的值
用法:
setIn(keyPath: Iterable, value: any): this
用法与set()一样,只是第一个参数是一个数组,代表要设置的属性所在的位置

删除 delete
作用:用来删除第一层结构中的属性

用法:

delete(index: number): List  //Listdelete(key: K): this  //MapdeleteIn()

用来删除深层数据,用法参考setIn
deleteAll() (Map独有,List没有)
作用:用来删除Map中的多个key
用法:deleteAll(keys: Iterable): this

代码示例:

const names = Map({ a: "Aaron", b: "Barry", c: "Connor" })names.deleteAll([ 'a', 'c' ])// Map { "b": "Barry" }

更新 update()
作用:对对象中的某个属性进行更新,可对原数据进行相关操作

用法:

update(index: number, updater: (value: T) => T): this //Listupdate(key: K, updater: (value: V) => V): this  //Map

代码示例:

Listconst list = List([ 'a', 'b', 'c' ])const result = list.update(2, val => val.toUpperCase())///Mapconst aMap = Map({ key: 'value' })const newMap = aMap.update('key', value => value + value)

updateIn()
用法参考setIn

清除 clear()
作用:清除所有数据
用法:clear(): this

代码示例:

Map({ key: 'value' }).clear()  //MapList([ 1, 2, 3, 4 ]).clear()   // List

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/336159.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

教学案例 计算机,计算机教学案例

海量优秀的免费计算机教学案例范文供您参考与下载,关于计算机教学案例的免费论文范文参考资料是由2016年最新的相关论文题目按照标准论文格式模板写作的,适合不知道怎么写计算机教学案例的大学毕业生,对相关的本科论文和硕士毕业论文及职称论文发表写作有参考价值&a…

java 开发:md5_Java社区调查结果:74%的开发人员希望减少详细程度

java 开发:md5一个新的JDK增强建议(JEP)在Java社区中风起云涌:JEP286。该建议建议在Java的未来版本中引入局部变量类型推断,以简化Java应用程序的编写。 在下面的文章中,我们将解释它的含义以及它将如何影响您的代码。…

python获取当前目录_又有几个Python小技巧分享

今天这篇文章为大家带来几个Python使用的小技巧:快速生成依赖文件文件路径处理通过set将对象去重单元测试unitest捕获异常快速生成依赖文件Python通过requirements.txt来管理项目所依赖的库,通过pip install -r requirements.txt命令可以直接安装项目所需…

计算机弹歌曲做我老婆好不好,做我老婆好不好吉他谱(图片谱,指弹,做我老婆好不好,徐誉滕)_徐誉滕(徐海;徐歆舜)...

做我老婆好不好词曲:徐誉滕演唱:徐誉滕走过多少路口 听过多少叹息我认真着你的不知所措这种迷茫心情 我想谁都会有幸运的是能分担你的愁能不能靠近一点 能不能再近一点满足我心中小小的虚荣其实你并不知道 在我心中你最美就像风雨过后天边的那道彩虹如果…

python敏感字替换_python用类实现文章敏感词的过滤方法示例

过滤一遍并将敏感词替换之后剩余字符串中新组成了敏感词语,这种情况就要用递归来解决,直到过滤替换之后的结果和过滤之前一样时才算结束 第一步:建立一个敏感词库(.txt文本)第二步:编写代码在文章中过滤敏感词(递归实现) # -*- coding: utf-8 -*- # author 代序春秋…

2018年冷链百强_在分析了47,251个依赖关系之后,2016年Java图书馆百强

2018年冷链百强谁在上面,谁在后面? 我们分析了Github上的47,251个依赖关系,并抽取了前100个Java库 对于长周末而言,我们最喜欢的消遣是浏览Github并搜索流行的Java库。 我们决定与您分享乐趣和信息。 我们分析了Github上前3,862…

【FFMPEG应用篇】基于FFmpeg的封装格式转换

/* * 一笑奈何 * cn-yixiaonaihe.blog.csdn.net */#include <iostream> #include <thread> extern "C" { #include "libavformat/avformat.h" #include "libavcodec/avcodec.h" #include "libswscale/swscale.h" #inc…

计算机键盘标注,电脑键盘上怎么打√和×

用电脑键盘上打出√和两个符号的方法1、在输入法开启状态下&#xff0c;鼠标右键点击输入法状态栏上面的“软键盘图标”&#xff0c;然后选择“数学符号”(直接右击打不开就先左击再右击)。2、在数学符号的软键盘面板上直接用鼠标点击“√和”就好(光标要定位在需要输入的地方)…

python中运算符号怎样表示_Python中的运算符与表达式

你所编写的大多数语句&#xff08;逻辑行&#xff09;都包含了表达式&#xff08;Expressions&#xff09;。一个表达式的简单例子便是 23。表达式可以拆分成运算符&#xff08;Operators&#xff09;与操作数&#xff08;Operands&#xff09;。 运算符&#xff08;Operators&…

web服务优化与健壮性改进_创建健壮的微服务架构所涉及的组件

web服务优化与健壮性改进在本文中&#xff0c;我们将简要学习构建强大的微服务应用程序所需的各种软件组件。 在简要了解每个架构组件之前&#xff0c;我们将陈述设计微服务架构时出现的一般查询。 1.微服务架构组件 每当我们创建微服务应用程序时&#xff0c;我们都会想到以下…

计算机对油画的影响,现代电脑美术影响下的油画艺术创作

摘要&#xff1a;"21世纪的文盲不是不识字,而是不会读图."随着视觉文化和电脑网络的快速发展,计算机技术也广泛地涵盖了整个意识形态领域.图像已成为这个时代的最大资源,我们已经快速进入"读图时代".九十年代起,计算机图形艺术在科技的带动下飞速发展,电脑…

【FFMPEG应用篇】基于FFmpeg的RGB格式封装MOV文件

/* * 一笑奈何 * cn-yixiaonaihe.blog.csdn.net */#include <iostream> #include <thread> extern "C" { #include "libavformat/avformat.h" #include "libavcodec/avcodec.h" #include "libswscale/swscale.h" #inc…

python launcher卸载后蓝屏_误卸载python2.4导致yum不能用后的修复

去 http://mirrors.ustc.edu.cn/centos/或者镜像下载如下包&#xff0c;版本不一定非常一致 python-2.4.3-56.el5.x86_64.rpm python-devel-2.4.3-56.el5.i386.rpm python-devel-2.4.3-56.el5.x86_64.rpm python-iniparse-0.2.3-6.el5.noarch.rpm python-libs-2.4.3-56.el5.x86…

owin 怎么部署在云中_使用Boxfuse轻松在云中运行Spring Boot应用程序

owin 怎么部署在云中几天前&#xff0c;我开始构建一个将使用REST API检索和存储数据的iOS应用。 该REST API将是我也必须构建的服务器应用程序。 由于我熟悉Java和Spring &#xff0c;因此决定使用Spring Boot作为框架。 为了能够在我的iPhone上使用它&#xff0c;如果我可以在…

【FFMPEG应用篇】基于FFmpeg的PCM数据编码为AAC

/* * 一笑奈何 * cn-yixiaonaihe.blog.csdn.net */#include <iostream> #include <thread> extern "C" { #include "libavformat/avformat.h" #include "libavcodec/avcodec.h" #include "libswscale/swscale.h" #inc…

计算机过程控制系统实例ppt,chap7 前馈控制系统_武汉理工大学:调节仪表与过程控制系统_ppt_大学课件预览_高等教育资讯网...

第七章 前馈及复合控制系统其他反馈控制的缺点&#xff1a;无法将干扰克服在被控制量偏离设计值之前。被控对象总是存在一定的纯滞后和容量滞后&#xff0c;故限制了控制作用的充分发挥。 7-1 基本概念1、问题的提出2、技术思路直接按扰动而不是按偏差进行控制。干扰发生后&…

用python画时序图源代码_使用python实现画AR模型时序图

背景&#xff1a; 用python画AR模型的时序图。 结果&#xff1a;代码&#xff1a; import numpy as np import matplotlib.pyplot as plt """ AR(1)的时序图&#xff1a;x[t]a*x[t-1]e """ num 2000 e np.random.rand(num) x np.empty(num) &…

属性拼接转换成字符串_使用一些可选的将字符串配置属性转换为其他类型

属性拼接转换成字符串有一天&#xff0c;您遇到一些代码&#xff0c;并认为这很漂亮&#xff0c;为什么我没有想到呢&#xff1f; 因此&#xff0c;我的长期同事Mark Warner在使用方法引用处理从String进行转换的标准名称/值存储模式方面有一个不错的选择。 int size store.g…

【FFMPEG应用篇】基于FFmpeg的PCM和RGB数据统一封装

项目采用工程模式进行构造。 技术解决难点&#xff1a; 1.编码后的PTS时间一定要赋值。2.音视频封装同步问题&#xff0c;其中涉及到PTS同步问题&#xff0c;例如视频25PTS/s 音频43PTS/s&#xff08;44100采样率/1024每帧&#xff09;&#xff0c;音频要慢于视频所以这种情…

windows数据自动上传服务器,windows服务器间自动传输文件

日常运维工作中需要在windows服务器间传输文件的使用场景比较多&#xff0c;比较典型的例子为应用程序的离线自动备份&#xff0c;下面分享笔者日常使用的服务器间自动传输文件脚本rem 设置共享net use \\**IP**\程序配置和数据备份 "******(密码)" /user:"admi…