前端進階（11） - js 數據結構類型擴展：immutable-js

BLUE 發布于2019-08-23 11:59 / 1367人閱讀

摘要：數據結構類型擴展相對之類的強類型語言，有一點很大的區別就是，數據結構只有與，并且都是動態可變的，而有等數據結構。所以，為了能在中也使用這些數據結構，就應運而生。擴充了中的不可變集合，即一旦創建就不能改變的數據類型。

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進階視頻教程

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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