什么是 immutable-程序员宅基地

技术标签： react  数据结构  javascript  

immutable 基础入门

本文将用最简单的话带大家入门 immutable

什么是immutable

immutable，译为"不可改变的"，是一种持久化数据。它有一旦被创建就不会被修改的特性。
当你修改 immutable 对象的时候返回新的 immutable。但是原数据不会改变。

原理：持久化数据结构

为什么要使用immutable

换种方式问：持久化数据结构有什么用？

用处可大了。进行 js 对象的深拷贝对性能的消耗太大时（使用了递归），例如 Redux 中的深拷贝，就需要用到 immutable 来提升性能，从而避免牵一发而动全身。

当你使用 immutable 后再进行深拷贝的时候，只会拷贝你改变的节点，从而达到了节省性能的目的。
20181122144653609.gif
总结：immutable的不可变性让纯函数更强大，每次都返回新的immutable的特性让程序员可以对其进行链式操作，用起来更方便。

immutable的简单实用

本篇文章作为入门，先介绍一些常用API，以及两种常用的 immutable 数据结构： Map 和 List

初始化

安装： npm i immutable -S

Map数据结构

immutable.Map()：创建一个类似于js中的对象的Map对象

let map = immutable.Map({
    
    name:"Apple",
    age:19,
    sex:"男"
})

console.log(map); // Map { "name":"Apple", "age":19, "sex":"男" }

操作Map：

  1. 增

    map.set

    let map1 = map.set("sign","呜呜")
console.log(map1); // Map { "name":"Apple", "age":19, "sex":"男", "sign":"呜呜" }

    map.setIn

    let map1 = map.setIn(["obj","xxx"],"xxx") // 深层的set
console.log(map1); // Map { "name":"Apple", "age":19, "sex":"男", "obj":{ "xxx":"xxx" } }

    注意：setIn可以深层操作，第一个参数是个数组，数组中第一个元素是操作的对象的key值，第二个元素是value值，如果不需要可以不用。以下的map.deleteIn、map.updateIn、map.getIn同理。

  2. 删

    map.delete('a') // 删除 a 的值
map.deleteIn(['a', 'b']) // 删除 a 中 b 的值

  3. 改

    map.update()

    参数1：需要更新的值

    参数2：回调函数，返回一个更新后的值

    map.updateIn() 深层更新

    参数1：一个数组，第一个元素是父元素，第二个元素为目标子元素

    参数2：回调函数，参数为目标值的值，返回值为一个更新后的值

    let map1 = map.update('a',function(x){
      return x+1})
let map2 = map.updateIn(['a', 'b'],function(x){
      return x+1})

  4. 查

    返回的不是immutable对象了 而是里边定义的正常值

    map.get('a') // {a:1} 得到1。
map.getIn(['a', 'b']) // {a:{b:2}} 得到2。
List数据结构：

immutable.List()：创建一个类似于js中的数组的List对象

let list = immutable.List([1,2,3,4,5])

  1. 增

    list.push(6)

list.splice(0,0,10)

    用法和js的push一样，但是返回值为immutable的List结构，而不是数组

  2. 删

    list.splice(1,1)

  3. 改

    list.splice(1,1,10)

  4. 查

    list.getIn([0])
API

  • merge()：合并map对象

    let newMap = map.merge(map1)

  • toObject()：immutable的map对象转JS对象

    浅转换，只转换最外层

  • toArray()：immutable的list对象转JS数组

    浅转换，只转换最外层

  • toJS()：immutable的 map对象/list对象 转 JS对象/JS数组

    深转换，全部转换，更耗费性能。

  • Map()：JS对象或数组转换成immutable

    浅转换，只转换最外层

  • fromJS()：JS对象/JS数组 转换成immutable

    深转换，全部转换，更耗费性能。
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42941302/article/details/111834035

智能推荐

MySQL Workbench用csv格式导出以及出现数据乱码的解决_workbench导出csv乱码-程序员宅基地

文章浏览阅读4.8k次，点赞3次，收藏10次。近期毕设采集数据需从MySQL数据库中导出CSV文件，我用的是MySQL Workbench导出步骤：1、第一步，选中数据库表babynutrition，鼠标右键选择“数据导出”选项，打开导出弹窗，注意导出的数据格式2、第二步，选择导出表字段，需要导出多少行，从那行开始导出，确定后单击“Next”，进入下一步，如下图所示：3、第三步，选择导出文件路径，并填写导出文件名；选择导出..._workbench导出csv乱码

Aspose.Words 将Word（DOC / DOCX）转换为HTML教程_aspose.words 转html-程序员宅基地

文章浏览阅读2.5k次。Microsoft Word文件格式DOC / DOCX很著名，因为文字处理器支持多种功能来组织和解释信息。同样，HTML文件格式有助于在Web应用程序中显示信息。使用Java将Word（DOC / DOCX）转换为HTML 使用Java将DOCX转换为HTML5 使用Java将受密码保护的Word文件转换为HTML 使用Java将Word转换为MHTML①使用Java将Word（DOC / DOCX）转换为HTML可以按照以下步骤将Word转换为HTML：加载带有DOC或DOCX扩展名_aspose.words 转html

编译7源码时，报错：SSL error when connecting to the Jack server. Try ‘jack-diagnose‘_failed: /bin/bash -c "(prebuilts/sdk/tools/jack-ad-程序员宅基地

文章浏览阅读5.9k次，点赞11次，收藏26次。ninja: Entering directory `.'[ 0% 1/2530] Ensure Jack server is installed and startedFAILED: /bin/bash -c "(prebuilts/sdk/tools/jack-admin install-server prebuilts/sdk/tools/jack-launcher.jar prebuilts/sdk/tools/jack-server-4.8.ALPHA.jar 2>..._failed: /bin/bash -c "(prebuilts/sdk/tools/jack-admin install-server prebuil

java基础进阶六-泛型_泛型强转-程序员宅基地

文章浏览阅读1.6k次，点赞2次，收藏8次。泛型，可以看做一种“模板代码”。什么是“模板代码”呢？以ArrayList为例。在JDK1.5引入泛型之前，ArrayList采取的方式是：在内部塞入一个Object[] array。public class ArrayList { private Object[] array; private int size; public void add(Object e) {...} public void remove(int index) {...} publi_泛型强转

htmlunit爬虫工具使用--模拟浏览器发送请求，获取JS动态生成的页面内容-程序员宅基地

文章浏览阅读289次。Htmlunit是一款模拟浏览抓取页面内容的java框架，具有js解析引擎(rhino)，可以解析页面的js脚本，得到完整的页面内容，特殊适合于这种非完整页面的站点抓取。下载地址:　　https://sourceforge.net/projects/htmlunit/files/htmlunit/maven地址: <dependency>..._htmlunit rhino

软件系统的安全性和保密性_软件保密性-程序员宅基地

文章浏览阅读9.6k次。 作者：Robert BK Dewar，2007年7月原文：http://www.ddj.com/security/199300140译者：logiciel，2009年8月8日 在当今世界，我们越来越倚赖于软件系统的安全性和保密性。在新生产的轿车中，刹车和控制系统依赖于复杂的软件。在公众投票站中，计票机依赖于正确记录投票的软件。 传统观点认为软件安全_软件保密性

随便推点

iOS版本AppRTCMobile和webrtc.framework构建_webrtc 新增自定义模块方法-程序员宅基地

文章浏览阅读5.1k次。iOS版本AppRTCMobile和webrtc.framework构建_webrtc 新增自定义模块方法

基于FPGA的cameralink编解码测试系统设计_基于fpga的cameralink编码测试系统设计-程序员宅基地

文章浏览阅读2.2k次，点赞2次，收藏15次。1、目的项目需要设计一个多功能参数可变的cameralink相机视频接收机，接收到相机传过来的视频数据通过PCIE往上位机发。开始没有可供测试的相机，于是想着用FPGA模拟cameralink协议自行写一个视频发送机，用于对接自己的设计的cameralink视频接收机；采用两块FPGA板对接，用lvds差分信号传输数据；发送机实现FPGA对视频数据的cameralink协议编码；接收机实现FPGA对视频数据的cameralink协议解码；接收到的数据是：portA,portB,por_基于fpga的cameralink编码测试系统设计

java项目中使用dubbo实战_dubbo使用java-程序员宅基地

文章浏览阅读1w次，点赞6次，收藏7次。在java项目中使用dubbo的实战事例。_dubbo使用java

IDA pro 安装keypatch插件_ida fail to load the dynamic library.-程序员宅基地

文章浏览阅读8.9k次，点赞3次，收藏7次。IDA pro 7.5 安装keypatch插件前言一、安装过程二、出现问题前言本篇记录IDA pro 7.5 安装keypatch插件。缺少相应库，无法加载keypatch插件："fail to load the dynamic library"一、安装过程安装好python环境后，安装 keystone。 (网址：https://www.keystone-engine.org/download/)pip install keystone-engine # 安装pip inst_ida fail to load the dynamic library.

【Unity】绘制阿基米德螺旋线-程序员宅基地

文章浏览阅读2.6w次，点赞9次，收藏23次。阿基米德螺旋线公式： //极坐标方程为: r = a + bθ //平面笛卡尔坐标方程式为: x = (a + bθ)cos(θ), y = (a + bθ)sin(θ) //a: 当θ=0°时的极径(mm) //b: 阿基米德螺旋线系数(mm/°),表示每旋转1度时极径的增加/减小量 //θ: 极角,单位为度,表示阿基米德螺旋线转过的总度数（弧度）......_阿基米德螺旋线

C++贪心算法之均分纸牌_粮食均分c++-程序员宅基地

文章浏览阅读8.3k次，点赞5次，收藏14次。均分纸牌题目描述有 N 堆纸牌，编号分别为 1，2，…, N。每堆上有若干张，但纸牌总数必为 N 的倍数。可以在任一堆上取若于张纸牌，然后移动。移牌规则为：在编号为 1 堆上取的纸牌，只能移到编号为 2 的堆上；在编号为 N 的堆上取的纸牌，只能移到编号为 N-1 的堆上；其他堆上取的纸牌，可以移到相邻左边或右边的堆上。现在要求找出一种移动方法，用最少的移动次数使每堆上纸牌数都一样多。_粮食均分c++

推荐文章

热门文章

相关标签