不可变的JS映射或列表

Immutable JS map or list

本文关键字：列表 映射 JS 不可变      更新时间：2023-09-26

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

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

我们想把它引入immutablejs。将其制成地图或列表是最自然的吗？我们将如何更新其中一个对象中的属性？把"哈特福德捕鲸者"的名字改成"卡罗莱纳飓风"。

您应该为此创建一个映射列表。Immutable.js有一个函数Immutable.fromJS，它将递归地将js数组转换为Immutable.List，并将js对象转换为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" } ]"

我不同意。

您为数组的每个元素提供的示例是一个具有{ id }属性的对象。有人会假设你想通过id访问这个数组的元素。这就是id的作用。

是的，本机结构是Maps的List。尽管你想要的是Maps中的Map。

为什么

想想你需要做些什么来检索{ id: 1928, "Some Team" }。您必须在列表中逐一迭代，直到找到匹配的Id。

一种更有效的方法是创建一个地图，这样你就可以直接"；"拔"；您的对象，例如

const input = Immutable.fromJS({
  1: {id : 1, name : "Hartford Whalers"}, 
  2: {id : 2, name : "Toronto Maple Leafs"}, 
  3: {id : 3, name : "New York Rangers"},
  // ...
  1928: {id : 1928, name : "Some Team"},
});

然后访问它，你所要做的就是：

const team = input.get('1928');

您需要进行初始转换，如果它来自API，则在服务器端进行转换，称为规范化。它还有保存数据的好处。

这实际上是术语"；地图"；来自

相关文章：