前端进阶（11） - js 数据结构类型扩展：immutable-js

BLUE 发布于2019-08-23 11:59 / 1349人阅读

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

js 数据结构类型扩展：immutable-js

相对 java、.net 之类的强类型语言，js 有一点很大的区别就是，数据结构只有 array 与 object，并且都是动态可变的，而 java 有 List, Set, Map 等数据结构。所以，为了能在 js 中也使用这些数据结构，immutable-js 就应运而生。

1. immutable-js

immutable-js 扩充了 JavaScript 中的不可变集合，即一旦创建就不能改变的数据类型。这样可简化应用开发、无防御复制、启用更先进的内存方案，以及使用更简单的逻辑检查更新。持久化数据提供可修改的 API，这些 API 不在原地更新数据，而是产生新的更新后的数据。

2. 提供的数据类型

List: 有序索引集合，类似 JavaScript 中的 Array

Map: 无序键值对（(key, value) pairs）集合

OrderedMap: 有序的 Map

Set: 无重复值的集合

OrderedSet: 有序的 Set

Stack: 支持元素添加和移除的索引集合

Range(): 返回一个从 start 到 end，步长 step 填充的 Seq.Indexed 集合，start 默认值为 0，step 默认值为 1，end 默认为无穷大。如果 start = end，则返回空集合。

Repeat(): 返回一个用 value 重复 times 次的 Seq.Indexed 集合。如果 times 未定义，则返回无限 value 值的 Seq 集合。

Record: 类似于 JavaScript 的 Object，但是只接收特定字符串为 key，并有默认值

Seq: 允许不通过中间集合让高阶集合函数（如 map, filter）高效链式调用的惰性操作集合

Collection: 所有数据结构的基类

更多数据类型参考 immutable-js - docs.

3. 提供的 API 3.1 fromJS: 将一个 js 数据转换为 immutable-js 类型的数据

const { fromJS, isKeyed } = require("immutable@4.0.0-rc.9");
fromJS({ a: {b: [10, 20, 30]}, c: 40}, function (key, value, path) {
  console.log(key, value, path)
  return isKeyed(value) ? value.toOrderedMap() : value.toList()
})

> "b", [ 10, 20, 30 ], [ "a", "b" ]
> "a", {b: [10, 20, 30]}, [ "a" ]
> "", {a: {b: [10, 20, 30]}, c: 40}, []

详情参考 immutable-js - docs - fromJS.

3.2 is: 对两个对象进行比较

const { Map, is } = require("immutable@4.0.0-rc.9")
const map1 = Map({ a: 1, b: 1, c: 1 })
const map2 = Map({ a: 1, b: 1, c: 1 })
assert.equal(map1 !== map2, true)
assert.equal(Object.is(map1, map2), false)
assert.equal(is(map1, map2), true)

详情参考 immutable-js - docs - is.

3.3 更多

更多 API 参考 immutable-js - docs.

4. 后续

更多博客，查看 https://github.com/senntyou/blogs

作者：深予之 (@senntyou)

GPU云服务器云服务器 immutable-js c语言数据类型扩展 linux c 扩展数据类型 js进阶视频教程

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

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

immer.js 简介及源码解析

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

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

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

jone5679 2019-08-23 12:23 评论0 收藏0
React性能优化

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

n7then 2019-08-21 14:15 评论0 收藏0
【连载】前端个人文章整理-从基础到入门

摘要：个人前端文章整理从最开始萌生写文章的想法，到着手开始写，再到现在已经一年的时间了，由于工作比较忙，更新缓慢，后面还是会继更新，现将已经写好的文章整理一个目录，方便更多的小伙伴去学习。 showImg(https://segmentfault.com/img/remote/1460000017490740?w=1920&h=1080); 个人前端文章整理从最开始萌生写文章的想法，到着手...

madthumb 2019-08-23 14:15 评论0 收藏0