immutable.js 学习笔记（三）----- Map

最新推荐文章于 2025-05-14 07:00:00 发布
原创 最新推荐文章于 2025-05-14 07:00:00 发布 · 270 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文详细介绍了JavaScript中的Map对象，强调其无序的key-value特性，并列举了核心API，如set、delete、clear、update、merge等。重点讨论了批量操作如deleteAll和mergeWith的内存消耗及使用场景。同时，提到了Map到其他数据结构的转换方法，如toJS、toJSON、toArray和toObject。此外，还涵盖了Map的查询、遍历和判断方法，如has、includes、forEach等，帮助开发者更高效地操作Map。

一、Map

Map在原生的js中对应的是Object这样的结构，它都是key-value的键值对，并且它是无序的

在这里插入图片描述

二、 API

（一） set：设定值

在这里插入图片描述

（二）delete：删除值

在这里插入图片描述
每做一次增删改查都会把这些数据重新生成一份，如果要想删除多个key的话，对内存的消耗也是很大的，所以deleteAll是一次删除多个key，然后只返回一次新的对象

（三）deleteAll：批量删除

在这里插入图片描述

（四）clear：清除所有返回新Map

在这里插入图片描述

（五）update：更新

在这里插入图片描述

（六）merge：合成N个Map为一个Map

在这里插入图片描述

（七）mergeWith：指定了merge的规则

第一个参数表示：如果值重复的话应该怎么办
在这里插入图片描述

（八）setIn：对于嵌套结构来进行设置值

在这里插入图片描述

（九）toJS() 与 toJSON()：转换为对象

toJS() 是深转换
toJSON() 是浅转换
浅转换只转换一层，深转换可以转换出每一层对象
在这里插入图片描述

在这里插入图片描述

（十）toArray：转换为数组

在这里插入图片描述

（十一）toObject：转换为Object

在这里插入图片描述

（十二）equals：判断两个map的值是否相等

在这里插入图片描述

（十三）find：查找，匹配的第一个

在这里插入图片描述

（十四）flatten：拉平Map

false是深拉平，true是浅拉平
在这里插入图片描述
在这里插入图片描述

（十五）has：判断是否有指定的key

在这里插入图片描述

（十六） includes：判断是否有指定的value

在这里插入图片描述

（十七）forEach

在这里插入图片描述

（十八）未完待续。。。。。。

5.Draftjs 学习笔记-自定义控件（多媒体）
12-21 6248
偷个懒先贴上两个文档1.block-render主要用来自定义渲染的，一般是通过css，或者更换标签，当然也可以用自定义组件 在处理粘贴进来的内容时，有着映射，粘贴这块我没试过，render的实验在第2篇中最后那个例子中有。2.block-component 用来做一些复杂的组件比如多媒体组件和一些有交互事件的组件。 这个就不想洗赘述了，贴上一个多媒体组件的，在2中例子基础上加的，添加了左中右
2.Draftjs 学习笔记-Rich Styling
12-08 3112
前提概要draftjs的编辑器和input的区别就是，draft的值与状态是通过editorstate管理的，对比文档参考这里，editorstate的API 参考这里正文 本章节主要是文本的简单样式控制，分别通过快捷键和按钮来实现 1. RichUtils and Key Commands（快捷键）RichUtils has information about the core key com
ImmutableObject:在 Javascript 中创建不可变对象
07-01
#ImmutableObject ImmutableObject 被创建为一种简单的客户端 Javascript 方式来制作不可变对象。 它使用一组简单的方法来获取和设置项目。 仅当您为isExtensible传递true参数时才允许设置项目。 ##基本用法： 可以扩展的对象 var cars = {"truck": "ford", "sedan": "hyundai"}; var immutCars = new ImmutableObject(cars, true); var immutableCars = immutCars.get(); immutCars.set("economy", "honda"); console.log(immutableCars); //logs cars with honda 不能扩展的对象 var desserts = {
读懂immutable-js中的Map数据结构
weixin_34233421的博客
10-17 359
本文受深入探究Immutable.js的实现机制这篇文章启发，结合自己对Map源码的解读，谈谈我对immutable-js中map数据结构的理解，若有不正确的地方，欢迎指正。 一、Vector Trie 向量字典树 Trie 字典树，一种用空间换取时间的树形数据结构，主要特点是利用字符串的公共前缀来挺升查询性能。比如一组字符串 ["abc...
js map方法_深入探究immutable.js的实现机制（二）
weixin_39597318的博客
11-29 173
作者：YGYOO 链接：https://juejin.im/post/5ba4a6b75188255ca1537b19 来源：掘金本文是深入探究immutable.js系列的第二篇。深入探究immutable.js的实现机制(一)[1]深入探究immutable.js的实现机制(二) 本篇上一篇我们研究了 Immutable.js 持久化数据结构的基本实现原理，对其核心数据结构Vect...
JavaScript 中的不可变对象(Immutable Objects)
weixin_33810302的博客
10-16 192
　　默认情况下，JavaScript 中的对象是可变的。我们可以更改原始值（字符串，数字等）和对象。我们来看看这个对象： let obj = { num: 10, obj: { content: "mutable object" } } 　　你可以轻松地改变它： obj.num = 5; obj.obj = { content: "changed!" ...
【immutable 学习记录】 immutable 中 map 的用法
qq_46105844的博客
08-11 783
immutable 中 Map 的介绍
OpenGL ES3.0 《学习笔记 九》 Texturing
fangc的专栏
09-07 1740
本章介绍内容包括：  textures: • Texturing basics • Loading textures and mipmapping • Texture filtering and wrapping • Texture level-of-detail, swizzles, and depth comparison • Texture formats • Using te
前端进阶面试-JS面试题(阿里、字节、腾讯、美团面试高频）
2401_84150137的博客
04-22 888
前端CSS面试题文档，JavaScript面试题文档，Vue面试题文档，大厂面试题文档，需要的读者可以戳这里免费领取！年进入阿里一直到现在。**深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
后端Cache-Control与前端Service Workers
最新发布
m0_72030584的博客
05-14 873
缓存王国：后端Cache-Control与前端Service Workers大冒险
ImmutableMap的使用
u013421917的博客
01-07 2222
ImmutableMap是一个不可变的map集合,且线程安全 使用方法 maven地址 <dependency> <groupId>com.google.guava</groupId> <artifactId>guava</artifactId> </dependency> 代码使用 private stati...
clang static analyzer中的数据结构及内存分配策略 - ImmutableMap & ImmutableSet篇
电影旅行敲代码
04-21 1826
clang static analyzer中使用到的数据结构 注：这篇博客的初衷来源于[Analyzer] Attempting to speed up static analysis clang static analyzer中使用到的数据结构大致有以下几种，ImmutableMap，ImmutableSet，FoldingSetNode，SmallVector，StringRef以及Arr...
JS中的Immutable
QD的博客
05-23 1116
Persistent Data Structure（持久化数据结构） 也就是使用旧数据创建新数据时，要保证旧数据同时可用且不变。同时为了避免 deepCopy 把所有节点都复制一遍带来的性能损耗，Immutable 使用了 Structural Sharing（结构共享），即如果对象树中一个节点发生变化，只修改这个节点和受它影响的父节点，其它节点则进行共享。 Immutable 详解及 Reac
在react、redux中immutable.js的使用方法（immutable对象）
初心 - 杨瑞超个人博客
01-08 1045
初心-杨瑞超个人博客诚邀您加入qq群(IT-程序猿-技术交流群): 757345416丨(IT-程序猿-技术交流2群): 936929828 官方文档：https://facebook.github.io/immutable-js/docs/#/ ，这个是需要翻墙的噢~ 今天来研究下immutable.js的使用方法： 概述 因为在redux的过程中，我们不能直接改变state数据，需要返回...
【React】immutable.js 基础教程
qq_45677671的博客
05-28 588
文章目录JS中数据修改问题介绍常用APIobject转Map对象array转List对象JS转immutableimmutable转JSRedux中集成 用它的原因是为了解决问题：解决项目当中状态大规模管理的深拷贝的问题（防止对象/数组因为引用传递而在使用过程中出现的各种问题）。 JS中数据修改问题 我们先来看一段熟悉的代码： import React, { Component } from "react"; class App extends Component { state = {
immutable.js常用方法
qq_57479640的博客
01-05 927
immutable.js常用方法 fromJS():把js数据转为immutable数据(深转换) //const obj = fromJS({name:'Tom',age:18})/const list = fromJS([1,2,3]) toJS():把immutable数据转为js数据(深转换) //const obj1 = obj.toJS()/const list1 = list.toJS() Map():把object转为immutable数据(浅转换) //const obj2 = Map({
回顾ImmutableJS Map操作
wlchn
10-11 1210
初始值可以用set， setIn。 update更新 const aMap = Immutable.Map({ apples: 10 }) const bMap = aMap.update("apples", v =&gt; v + 1) bMap.get("apples") =&gt; 11 const cMap = aMap.update("oranges", () =&gt; 6) b...
js 插件immutable
wangweiqiang.csdn的专栏
03-27 344
基本类型变量占用的内存很小，而引用类型变量占用的内存比较大，几个引用类型变量通过指针共享同一个变量可以节约内存。 两变量指向的就是不同的两个对 ——immutable.js（npm install immutable） 例如： const { fromJS } = require('immutable') let obj1 = fromJS({name:'李达康'}),obj2; obj2...
在Vue中使用Immutable.js
南城
04-18 711
Immutable.js提供了持久的不可变数据结构，这有助于防止意外的数据变更，并可以提升应用的性能，特别是在处理大规模数据或复杂的状态管理时。虽然Vue的响应式系统本身并不需要Immutable.js，但在处理复杂的数据交互和大规模数据时，引入Immutable.js可以显著提高应用的性能和稳定性。如果项目中使用了依赖于不可变数据的第三方库，比如某些数据可视化库，使用Immutable.js可以提供兼容性和更优的性能。首先，你需要在你的Vue项目中安装Immutable.js。方法返回一个新的列表。
fluxible-immutable-utils: React中轻松使用Immutable.js的混入工具
Immutable.js是一个JavaScript库，用于创建不可变数据结构，它主要用于优化性能和提高应用程序的响应速度。该包通过定义一些工具和方法，使得开发者可以更容易地将Immutable.js集成到React组件中，从而利用不可变...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值