笔记, immutable-js 基础操作

alexnevsky 发布于2019-08-21 10:33 / 1207人阅读

摘要：这篇文章是一些操作的整理目前只有基本的操作文档请查看使用过程中遇到的写法我会不会增加在后边当中不可变数据有点不适应需要借鉴一些中的内容更新六月份到十月份我们完成了不可变数据的重构配合简聊的巨大的单一可以整理出来一些常用的方法示例代码用的是

这篇文章是 immutable-js 一些操作的整理, 目前只有基本的操作:
文档请查看: http://facebook.github.io/imm...
使用过程中遇到的写法我会不会增加在后边.

JavaScript 当中不可变数据有点不适应, 需要借鉴一些 Haskell 中的内容:
http://learnyouahaskell.com/c...
https://leanpub.com/purescrip...

更新:

六月份到十月份, 我们完成了不可变数据的重构
配合简聊的巨大的单一 store, 可以整理出来一些常用的方法
示例代码用的是 CoffeeScript

从 JavaScript 数据生成不可变对象(支持数据嵌套):

Immutable.fromJS([1,2])
Immutable.fromJS({a: 1})

从 JavaScript 数据生成不可变对象(不支持数据嵌套):

Immutable.List([1,2]})
Immutable.Map({a: 1})

从不可变数据生成 JavaScript 对象

immutableData.toJS()

判断两个数据结构是否相等:

Immutable.is immutableA, immutableB

判断两个数据引用是否一致(shallow equal):

immutableA is immutableB

List

Immutable.List() # 空 List
Immutable.List([1,2])
Immutable.fromJS([1,2])

查看 List 的大小:

immutableA.size
immutableA.count()

判断是否是 List:

Immutable.List.isList(x)

React 组件 propTypes 判断是否是 List:

React.PropTypes.instanceOf(Immutable.List).isRequired

获取 List 索引的元素(负数也是能运行的):

immutableData.get(0)
immutableData.get(-1) #反向索引

通过 getIn 访问嵌套数组当中的数据:

immutableData.getIn [1, 2]

List 更新操作, 也就是创建一个新的 List 数据:

immutableA = Immutable.fromJS([0, 0, [1, 2]])
immutableB = immutableA.set 1, 1
immutableC = immutableB.update 1, (x) -> x + 1
immutableC = immutableB.updateIn [2, 1], (x) -> x + 1

排序, 有 sort 和 sortBy:

immutableData.sort (a, b) ->
 if a < b then return -1
 if a > b then return 1
 return 0
immutableData.sortBy (x) ->
  x

遍历(返回 false 会终止遍历):

immutableData.forEach (a, b) ->
  console.log a, b
  return true

查找, find 返回第一个匹配值, filter 返回 List:

immutableData.find (x) ->
  x > 1
immutableData.filter (x) ->
  x > 1
immutableData.filterNot (x) ->
  x <= 1

Map

Immutable.Map() # 空 Map
Immutable.Map({a: 1})
Immutable.fromJS({a: 1})

判断 Map 的写法和 List 判断类似:

Immutable.Map.isMap(x)

获得 Map 中的数据:

immutableData.get("a")

通过 getIn 访问嵌套的 Map 中的树上:

immutableData.getIn ["a", "b"]

更新对象和嵌套的对象:

immutableB = immutableA.set "a", 1
immutableB = immutableA.setIn ["a", "b"], 1
immutableB = immutableA.update "a", (x) -> x + 1
immutableB = immutableA.updateIn ["a", "b"], (x) -> x + 1

合并对象:

immutableB = immutableA.merge(immutableC)

判断属性是否存在(undefined 也是存在的):

immutableData = Immutable.fromJS({key: null})
immutableData.has("key")

Map 的 filter 和 List 神似, 返回值 Map:

data = Immutable.fromJS({a: 1, b: 2})
data.filter (value, key) ->
 value is 1
# => Map {a: 1}

同样 Map 也可以做一些 reduce 操作, 以及其他的方法, 类似 List:

immutableA.reduce (acc, value, key) ->
   acc.set key, value
, immutable.Map()

获取 key 和 value 的数组形式:

immutableData.keySeq()
immutableData.valueSeq()

从 JavaScript JSON Object 迁移主要用这两个数据结构
然而文档中提供的数据结构非常多, 记得自己看文档, 我们还有大量未探索的

GPU云服务器云服务器基础学习笔记 linux操作系统笔记本 immutable-js linux基础操作

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/85746.html

immutability-helper 学习笔记 -1

摘要：张伟输出结果这样就实现了在源数据的基础上更改了值并且输出一个与之地址完全不同数组。本来想将有关于immutability-helper的博文放在一起学React系列博文中，但是考虑到该插件不仅仅在React中实用到，所以就单独拿出来分两期写。发现问题 immutability意为不变，不变性，永恒性。至于该插件能做什么，我想它的作者对它的标注已经很明确了mutate a copy ...

xbynet 2019-08-26 13:34 评论0 收藏0
读懂immutable-js中的Map数据结构

摘要：一向量字典树字典树，一种用空间换取时间的树形数据结构，主要特点是利用字符串的公共前缀来挺升查询性能。还有最终的数组表示的真实存储的键值，存储了，存储了。这其中还有一种节点进行了冲突的处理。本文受深入探究Immutable.js的实现机制这篇文章启发，结合自己对Map源码的解读，谈谈我对immutable-js中map数据结构的理解，若有不正确的地方，欢迎指正。一、Vector Tr...

jone5679 2019-08-23 12:23 评论0 收藏0
前端进阶（11） - js 数据结构类型扩展：immutable-js

摘要：数据结构类型扩展相对之类的强类型语言，有一点很大的区别就是，数据结构只有与，并且都是动态可变的，而有等数据结构。所以，为了能在中也使用这些数据结构，就应运而生。扩充了中的不可变集合，即一旦创建就不能改变的数据类型。 js 数据结构类型扩展：immutable-js 相对 java、.net 之类的强类型语言，js 有一点很大的区别就是，数据结构只有 array 与 object，并且都...

BLUE 2019-08-23 11:59 评论0 收藏0
immer.js 简介及源码解析

摘要：例如维护一份在内部，来判断是否有变化，下面这个例子就是一个构造函数，如果将它的实例传入对象作为第一个参数，就能够后面的处理对象中使用其中的方法上面这个构造函数相比源代码省略了很多判断的部分。 showImg(https://segmentfault.com/img/bV27Dy?w=1400&h=544); 博客链接：下一代状态管理工具 immer 简介及源码解析 JS 里面的变量类...

Profeel 2019-08-26 11:34 评论0 收藏0
React性能优化

摘要：当大家考虑在项目中使用的时候，第一个问题往往是他们的应用的速度和响应是否能和非版一样，每当状态改变的时候就重新渲染组件的整个子树，让大家怀疑这会不会对性能造成负面影响。当大家考虑在项目中使用 React 的时候，第一个问题往往是他们的应用的速度和响应是否能和非 React 版一样，每当状态改变的时候就重新渲染组件的整个子树，让大家怀疑这会不会对性能造成负面影响。React 用了一些黑...

n7then 2019-08-21 14:15 评论0 收藏0