JavaScript 字典动态分配值：与静态分配有何区别？

在 JavaScript 字典中动态分配值

问题

在 JavaScript 中，为字典分配动态值与分配静态值不同。如果你想在 ECharts 中使用字典，就必须采用静态分配方式。

在分配静态值时，字典的结构是：

{
  "stacks": {
    "5G_L2": [
      {"Open": "43"},
      {"Close": "24"}
    ],
    "5G_L3": [
      {"Open": "12"},
      {"Close": "2"}
    ]
  }
}

而分配动态值时，字典的结构变成了：

{
  "stacks": [
    {
      "Team 1": [
        {"Open": "43"},
        {"Close": "24"}
      ]
    },
    {
      "Team 2": [
        {"Open": "12"},
        {"Close": "2"}
      ]
    }
  ]
}

现在多了一个数组层，这与 ECharts 所需的字典结构不符。

解决办法

要将动态值分配到字典中，并获得与静态分配相同的结果，可以使用 Object.assign() 方法：

var response = {
  "stacks": {}
};

var datastck = [];
var serverdata = '{{ barCdata | tojson }}';
resPbar = $.parseJSON(serverdata);

$.each(resPbar, function (i, item) {
  datastck.push(item.Team);
});

datastck.forEach(function (team) {
  var teamData = resPbar.filter(function (item) {
    return item.Team === team;
  });

  var di = {};
  di[team] = [{"Open": teamData[0].Open}, {"Close": teamData[0].Close}];

  Object.assign(response.stacks, di);
});

Object.assign() 方法将 di 对象中的属性合并到 response.stacks 对象中，从而获得与静态分配相同的结果：

{
  "stacks": {
    "Team 1": [
      {"Open": "43"},
      {"Close": "24"}
    ],
    "Team 2": [
      {"Open": "12"},
      {"Close": "2"}
    ]
  }
}

这种方法可以将动态值分配到字典中，并保持与 ECharts 所需的字典结构一致。

常见问题解答

• 为什么 ECharts 要求静态分配？

ECharts 依赖于特定的字典结构来解析数据。动态分配可能会导致字典结构不一致，从而导致 ECharts 无法正确解释数据。

• Object.assign() 是什么？

Object.assign() 是一个 JavaScript 方法，用于将一个或多个源对象的属性复制到目标对象。它可以用来合并多个对象的属性，从而创建新的对象或修改现有对象。

• 如何在代码中使用 Object.assign()？

使用 Object.assign()，可以使用以下语法：

Object.assign(targetObject, sourceObject1, sourceObject2, ..., sourceObjectN);

• Object.assign() 可以合并数组吗？

Object.assign() 只能合并对象的属性。如果需要合并数组，可以使用 Array.concat() 方法。

• 动态分配值时，我应该使用 Object.assign() 以外的方法吗？

Object.assign() 是动态分配值的首选方法。但是，你也可以使用 Object.spread() 运算符或 Object.fromEntries() 方法。