不可变的 JS 映射或列表

Question

假设我们有一个普通的 javascript 对象数组

[
  {id : 1, name : "Hartford Whalers"}, 
  {id : 2, name : "Toronto Maple Leafs"}, 
  {id : 3, name : "New York Rangers"}
]

我们想把它带入 immutablejs。将其制作成地图或列表是否最自然，我们将如何更新其中一个对象中的属性？假设将“Hartford Whalers”的名称更改为“Carolina Hurricanes”。

Answer 1

您应该为此创建一个地图列表。Immutable.js 有一个函数Immutable.fromJS可以递归地将 JS 数组转换为Immutable.ListJS 对象Immutable.Map。

var input = [
  {id : 1, name : "Hartford Whalers"}, 
  {id : 2, name : "Toronto Maple Leafs"}, 
  {id : 3, name : "New York Rangers"}
];

var list = Immutable.fromJS(input);

list.toString(); // => "List [ Map { "id": 1, "name": "Hartford Whalers" }, Map { "id": 2, "name": "Toronto Maple Leafs" }, Map { "id": 3, "name": "New York Rangers" } ]"

您可以使用以下命令设置第一个项目的名称.setIn：

var list2 = list.setIn([0, "name"], "Carolina Hurricanes");

list2.toString(); // => "List [ Map { "id": 1, "name": "Carolina Hurricanes" }, Map { "id": 2, "name": "Toronto Maple Leafs" }, Map { "id": 3, "name": "New York Rangers" } ]"

您可以将 name = "Hartford Whalers" 的任何项目的名称设置为 "Carolina Hurricanes"：

var list3 = list.map(function(item) {
  if(item.get("name") == "Hartford Whalers") {
    return item.set("name", "Carolina Hurricanes");
  } else {
    return item;
  }
});

list3.toString(); // => "List [ Map { "id": 1, "name": "Carolina Hurricanes" }, Map { "id": 2, "name": "Toronto Maple Leafs" }, Map { "id": 3, "name": "New York Rangers" } ]"