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(结构共享),即如果对象树中一个节点发生变化,只修改这个节点和受它影响的父节点,其它节点则进行共享。
请看下面动画:

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

js find的用法_React常用库Immutable.js常用API相关推荐

  1. ffmpeg常用库、术语、API、数据结构总结

    文章目录 一.常用音视频术语和概念 二.常用概念 三.FFmpeg库简介 四.ffmpeg常用函数简介 (一)关于初始化和注册相关的函数 (二)封装格式相关函数 (三)解码相关函数 五.ffmpeg常 ...

  2. python自动化测试常用库_Python自动化测试常用库整理

    今天花了一些时间,过了一下这几年自己用Python开发的自动化测试框架,然后将其中常用到Python库抽出来,简单整理了一下它们的用处.我觉得,只要掌握了这些常用的Python库,足以应对大多数自动化 ...

  3. python 股票分析常用库_Python数据分析常用库有哪些?Python学习!

    Python为什么受欢迎?因为Python简单.易懂.好用,是一门高级的编程语言;除此之外,Python提供了大量的第三方库,开箱即用,方便.免费,非常适合从事数据分析领域的工作. 大家也都知道,Py ...

  4. C++cmath数学常用库中的代码介绍

    今天小编来分享一波C++ cmath数学常用库中的常用代码 首先,这些所有的代码都来自cmath库,所以必须先引用cmath头文件,即: #include<cmath> 1.绝对值函数ab ...

  5. golang常用库之- pierrec/lz4包 | lz4命令、lz4压缩算法(高压解速度)

    文章目录 golang常用库之-golang常用库之- pierrec/lz4包 | lz4压缩算法(高压解速度) LZ4压缩算法 lz4使用场景 lz4命令工具安装和使用 pierrec/lz4包 ...

  6. IT:前端进阶技术路线图(初级→中级→高级)之初级(研发工具/HTML/CSS/JS/浏览器)/中级(研发链路/工程化/库/框架/性能优化/工作原理)/高级(搭建/中后台/体验管理等)之详细攻略

    IT:前端进阶技术路线图(初级→中级→高级)之初级(研发工具/HTML/CSS/JS/浏览器)/中级(研发链路/工程化/库/框架/性能优化/工作原理)/高级(搭建/Node/IDE/中后台/体验管理/ ...

  7. immutable.js中文文档

    Immutable 是什么? 关于Immutable的定义,官方文档是这样说的: Immutable data encourages pure functions (data-in, data-out ...

  8. 【React】immutable.js 基础教程

    文章目录 JS中数据修改问题 介绍 常用API object转Map对象 array转List对象 JS转immutable immutable转JS Redux中集成 用它的原因是为了解决问题:解决 ...

  9. Gio.js -- 一个基于 Three.js 的 Web3D 地球数据可视化库(二)

    Gio,js 颜色风格类API 设置输出颜色 设置输入颜色 设置光晕颜色 设置背景颜色 设置海洋亮度 设置相关国家亮度 设置被提到国家亮度 数据 添加数据 清除数据 切换数据集 输入数据到洲 异步添加 ...

最新文章

  1. matlab定积分上界求解,定积分问题的数值求解及Matlab实现.pdf
  2. 物联网技术周报第 145 期: ESP8266 和 IFTTT 自制 WiFi 智能秤
  3. 常见电子元件实物照片
  4. java中后端拼接字符串返回前台页面换行显示
  5. Wintellect Collection Classes for .NET now on CodePlex
  6. Nunit中如何进行事务性单元测试
  7. POJ 1797 Heavy Transportation 最短路变形(dijkstra算法)
  8. Android 中插件的编写方法
  9. 考研英语大纲单词E~O与常用短语
  10. [转] 两种老公,两种人生。。(女人该看,男生更该看)
  11. 小学六年级数学教案:圆柱与圆锥
  12. esp8266,esp32中的SPI FLASH 访问模式(QIO QOUT DIO DOUT)
  13. 某app登录协议逆向分析
  14. 上饶县计算机等级考试,2020年3月江西省上饶市计算机等级考试报名时间
  15. ucos-III前言
  16. Assignment 2: UDP Pinger[课后作业]
  17. Follow me 总结
  18. 面试华为测试岗,收到offer后我却毫不犹豫拒绝了....
  19. python气象绘图速成_Python气象绘图教程(十六)—Cartopy_6
  20. 生成树协议(STP)

热门文章

  1. Java中的策略设计模式
  2. Zing加快了JVM应用程序的预热
  3. JDK 12的Files.mismatch方法
  4. java 1.8新增功能_Java 8的新增功能(第二部分-可能会出现什么)
  5. 琥珀项目:较小的,面向生产力的Java语言功能
  6. 国外persona用户画像_使用Mozilla Persona验证用户的指南
  7. oracle adf_Oracle ADF移动世界! 你好!
  8. Kafka Connect在MapR上
  9. javaone_JavaOne 2012:观察与印象
  10. 安装tron_具有Tron效果的JavaFX 2 Form