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

js 數據結構類型擴展：immutable-js

相對 java、.net 之類的強類型語言，js 有一點很大的區別就是，數據結構只有 array 與 object，並且都是動態可變的，而 java 有 List, Set, Map 等數據結構。所以，爲了能在 js 中也使用這些數據結構，immutable-js 就應運而生。

1. immutable-js

immutable-js 擴充了 JavaScript 中的不可變集合，即一旦創建就不能改變的數據類型。這樣可簡化應用開發、無防禦複製、啓用更先進的內存方案，以及使用更簡單的邏輯檢查更新。持久化數據提供可修改的 API，這些 API 不在原地更新數據，而是產生新的更新後的數據。

2. 提供的數據類型

1. List: 有序索引集合，類似 JavaScript 中的 Array
2. Map: 無序鍵值對（(key, value) pairs）集合
3. OrderedMap: 有序的 Map
4. Set: 無重複值的集合
5. OrderedSet: 有序的 Set
6. Stack: 支持元素添加和移除的索引集合
7. Range(): 返回一個從 start 到 end，步長 step 填充的 Seq.Indexed 集合，start 默認值爲 0，step 默認值爲 1，end 默認爲無窮大。如果 start = end，則返回空集合。
8. Repeat(): 返回一個用 value 重複 times 次的 Seq.Indexed 集合。如果 times 未定義，則返回無限 value 值的 Seq 集合。
9. Record: 類似於 JavaScript 的 Object，但是隻接收特定字符串爲 key，並有默認值
10. Seq: 允許不通過中間集合讓高階集合函數（如 map, filter）高效鏈式調用的惰性操作集合
11. Collection: 所有數據結構的基類

更多數據類型參考 immutable-js - docs.

3. 提供的 API

3.1 fromJS: 將一個 js 數據轉換爲 immutable-js 類型的數據

const { fromJS, isKeyed } = require('[email protected]');
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('[email protected]')
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)

版權聲明：自由轉載-非商用-非衍生-保持署名（創意共享3.0許可證）