Immutable.js 进行js的复制

介绍

在提供不可变(Immutable)数据结构的支持。不可变数据是指一旦创建后就不能被修改的数据,每次对数据进行更新都会返回一个新的数据对象,而原始数据保持不变。

使用

日常中我们使用的拷贝

(1) var arr = { } ; arr2 = arr ;
(2) Object.assign() 只是一级属性复制,比浅拷贝多拷贝了一层而已。
(3) const obj1 = JSON.parse(JSON.stringify(obj)); 数组,对象都好用的方法 ( 缺点 : 不能有 undefined)

原理

Immutable 实现的原理是 Persistent Data Structure(持久化数据结构),也就是使用旧数据创建新数据时,要保证旧数据同时可用且不变。同时为了避免 deepCopy 把所有节点都复制一遍带来的性能损耗, Immutable 使用 了 Structural Sharing(结构共享),即如果对象树中一个节点发生变化,只修改这个节点和受它影响的父节点, 其它节点则进行共享。


使用方式


Map:

const { Map } = require('immutable');
const map1 = Map({ a: 1, b: 2, c: 3 });
const map2 = map1.set('b', 50);
map1.get('b') + " vs. " + map2.get('b'); // 2 vs. 50

List:

const { List } = require('immutable');
const list1 = List([ 1, 2 ]);
const list2 = list1.push(3, 4, 5);
const list3 = list2.unshift(0);
const list4 = list1.concat(list2, list3);
assert.equal(list1.size, 2);
assert.equal(list2.size, 5);
assert.equal(list3.size, 6);
assert.equal(list4.size, 13);
assert.equal(list4.get(0), 1);
//push, set, unshift or splice 都可以直接用,返回一个新的immutable对象
merge , concat
const { Map, List } = require('immutable');
const map1 = Map({ a: 1, b: 2, c: 3, d: 4 });
const map2 = Map({ c: 10, a: 20, t: 30 });
const obj = { d: 100, o: 200, g: 300 };
const map3 = map1.merge(map2, obj);
// Map { a: 20, b: 2, c: 10, d: 100, t: 30, o: 200, g: 300 }
const list1 = List([ 1, 2, 3 ]);
const list2 = List([ 4, 5, 6 ]);
const array = [ 7, 8, 9 ];
const list3 = list1.concat(list2, array);
// List [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]

Immutable+Redux的开发方式

//reducer.js
const initialState = fromJS({
category:"",
material:""
})
const reducer = (prevstate = initialState,action={})=>{
let {type,payload} = action
switch(type){
case GET_HOME:
var newstate =prevstate.set("category",fromJS(payload.category))
var newstate2 =newstate.set("material",fromJS(payload.material))
return newstate2;
default:
return prevstate
}
}
//home.js
const mapStateToProps = (state)=>{
return {
category:state.homeReducer.getIn(["category"]) || Map({}),
material:state.homeReducer.getIn(["material"]) || Map({})
}
}
this.props.category.get("相关属性")
this.props.category.toJS() //或者转成普通对象

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

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

相关文章

chatGPT能力培训,客户最关注的99个方向

前言: chatGPT的主要应用,包括文本生成、图像生成和图文关联三大核心方向: 用户的在实际的工作和学习过程中,最关心的内容,可以按照上述类别进行划分,我们总结了,相关的插头GPT能力培训的相关主…

linux 内存 - KO内存占用

说明 KO(kernel module)占用的内存分为两部分: 静态占用 :ko insmod时系统固定分配的内存。动态申请 :代码中动态申请的内存,由于申请方式不同,统计的方式也可能不同,例如:使用vmalloc和kmall…

DAY04_SpringMVC—SpringMVC简介PostMan和ApiFox工具使用SpringMVC请求与响应REST风格

目录 一 SpringMVC简介1 SpringMVC概述问题导入1.1 SpringMVC概述 2 入门案例问题导入2.0 回顾Servlet技术开发web程序流程2.1 使用SpringMVC技术开发web程序流程2.2 代码实现【第一步】创建web工程(Maven结构)【第二步】设置tomcat服务器,加…

C++的string类

1.string简介 string不是STL的一部分,但是和STL一起学习会更加容易融会贯通。 而实际上string是一个类模板,使用字符的顺序容器实现(也就是字符的顺序表),string整个系列支持char的动态增长(字符编码有几…

【iOS安全】开启任意app的WebView远程调试

参考:https://mp.weixin.qq.com/s/bNKxQaVrPaXsZ5BPbsXy7w (来自周智老师的公众号) 概述 Safari 有一个内置的前端调试器, 在iPhone通过局域网或者USB连接MacBook 并启用Safari 远程调试之后,前端调试器默认情况下对…

mysql之limit语句详解

一、介绍 LIMIT是MySQL内置函数,其作用是用于限制查询结果的条数。 二、使用 1. 语法格式 LIMIT [位置偏移量,] 行数 其中,中括号里面的参数是可选参数,位置偏移量是指MySQL查询分析器要从哪一行开始显示,索引值从0开始&#xff…

【剑指Offer 15】二进制中1的个数,Java解密。

LeetCode 剑指Offer 75道练习题 文章目录 剑指Offer:二进制中1的个数示例:限制:解题思路:剑指Offer:二进制中1的个数 【题目描述】 编写一个函数,输入是一个无符号整数(以二进制串的形式),返回其二进制表达式中数字位数为 ‘1’ 的个数(也被称为 汉明重量))。 提示…

构建Docker容器监控系统 (1)(Cadvisor +InfluxDB+Grafana)

目录 Cadvisor InfluxDBGrafana 1. Cadvisor 2.InfluxDB 3.Grafana 开始部署: 下载组件镜像 创建自定义网络 创建influxdb容器 创建数据库和数据库用户 创建Cadvisor 容器 准备测试镜像 创建granafa容器 访问granfana 添加数据源 Add data source 新建 …

java.sql.SQLFeatureNotSupportedException 问题及可能的解决方法

目录 问题 分析: 解决方法 问题 java.sql.SQLFeatureNotSupportedException 分析: 可能是你的 druid的maven依赖版本太低了,我的以前是1.1.16,就出现了异常! 解决方法 把druid的maven依赖版本调高! 运…

unity海康威视原生SDK拉取网络摄像头画面,并展示在一个Material上

原理是使用sdk获取视频流,格式为YUV,然后分离YUV通道到三张不同的Texture2D上,通过shader将三个通道重新输出为原始图像。 我将所用的各个部分已经整理成一个压缩包,免积分下载 压缩包结构如下 使用步骤 1 DLL:放在Plugins文件…

湘大oj1138爱你一生一世题解:最大公约数 逆向思维 int整除会向下取整

一、链接 爱你一生一世 二、题目 题目描述 在2013年1月4日,这个“爱你一生一世”的特别日子,男生都想向自己的喜欢的女生表达爱意。 你准备在该死的C语言考试后,去向她(或者他?)告白。告白怎么能缺了礼…

渗透攻击方法:原型链污染

目录 一、什么是原型链 1、原型对象 2、prototype属性 3、原型链 1、显示原型 2、隐式原型 3、原型链 4、constructor属性 二、原型链污染重现 实例 Nodejs沙箱逃逸 1、什么是沙箱(sandbox) 2、vm模块 一、什么是原型链 1、原型对象 JavaS…

Springboot格式化给前端返回的时间格式

Springboot格式化给前端返回的时间格式 新增注解新增注解执行逻辑建立注解及注解执行逻辑的关联将时间转换注解注入Spring容器在返回对象的属性中加入注解结束 新增注解 Documented Target({FIELD,METHOD}) Retention(RUNTIME) public interface DateFormatTransform {String …

不只是Axure,这5 个也能轻松画原型图!

在设计和开发过程中,原型图是一个至关重要的工具。它是将设计理念转化为可视化、交互式的形式,使团队成员和利益相关者更好地理解和评估产品的功能和用户体验。选择适合的软件工具对于画原型图至关重要,本文将介绍 5 种常用的画原型图软件&am…

spring 面试题

一、Spring面试题 专题部分 1.1、什么是spring? Spring是一个轻量级Java开发框架,最早有Rod Johnson创建,目的是为了解决企业级应用开发的业务逻辑层和其他各层的耦合问题。它是一个分层的JavaSE/JavaEE full-stack(一站式)轻量…

【LeetCode 75】第二十三题(2352)相等行列对

目录 题目: 示例: 分析: 代码运行结果: 题目: 示例: 分析: 题目很简洁,就是要我们寻找行与列相同的对数。相同行与列不仅是要元素相同,还需要顺序也一样&#xff08…

tomcat虚拟主机配置演示

一.新建用于显示的index.jsp文件,写入内容 二.修改tomcat/apache-tomcat-8.5.70/conf/server.xml配置文件 匹配到Host那部分,按上面格式在后面添加自己的域名和文件目录信息 主要是修改name和docBase 保存退出重启tomcat,确保tomcat运行…

IDEA 修改jar包版本后项目中出现多个版本

问题描述: 使用IDEA,在pom文件中修改了某个依赖jar包的版本后,重新编译发现旧的版本没有删除,项目中同一个jar可以看到有两个版本,导致编译时随机选择了其中一个版本,导致编译失败。 已知问题:…

接口安全防护方案

文章目录 1.认证与授权机制2.参数校验3.接口加密4.防止暴力破解5.安全头设置6.日志监控 1.认证与授权机制 使用令牌(Token)、OAuth等认证方式,确保只有合法用户可以访问接口。授权机制可以防止未经授权的用户访问敏感接口。 示例:…

如何使用Pycharm 快速搭建 Django 项目 (分享详细图文教程)

1. 准备工作 在开始创建Django项目之前,需要先确保已经安装了Python和Pycharm。并且python中已经安装好了Django依赖。 1安装python(这里我安装使用的是python3.11.4稳定版本) 官网下载太慢了这里直接贴网盘下载连接了,一起贴出py…