前端進階（11） – js 資料結構型別擴充套件：immutable-js

senntyou發表於2019-02-16
前端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(`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)

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

相關文章