如何将动态Array Object与Array转换为包含全量标签的新数组对象

实现方案 #

首先你需要先定义全量预设标签列表（固定不变的基准标签），再通过映射匹配补全缺失标签的数值即可，实现代码如下：

步骤1：数据格式修正说明 #

你示例中this.rating.data = {[4, 1, 8, 3, 3]}属于语法笔误，实际应为普通数组格式this.rating.data = [4, 1, 8, 3, 3]，以下实现基于修正后的格式编写。

步骤2：完整实现代码 #

// 1、先定义固定的全量预设标签，作为补全的基准
const FULL_PRESET_LABELS = ["In", "Lo", "Me", "Hi", "Cri"];

// 2、把当前动态的标签和数值生成映射表，方便快速查找
const currentLabelMap = this.rating.labels.reduce((map, label, index) => {
  map[label] = this.rating.data[index];
  return map;
}, {});

// 3、遍历全量标签生成目标对象，缺失标签默认值设为0
const result = [
  FULL_PRESET_LABELS.reduce((targetObj, label) => {
    // 低版本JS环境可将 ?? 替换为 || 兼容
    targetObj[label] = currentLabelMap[label] ?? 0;
    return targetObj;
  }, {})
];

效果验证 #

用你给出的示例输入测试：

• 输入this.rating.data = [1, 8, 3, 3]、this.rating.labels = ["Lo", "Me", "Hi", "Cri"]
• 输出的result就是你要求的格式：

[{
  "In": 0,
  "Lo": 1,
  "Me": 8,
  "Hi" : 3,
  "Cri": 3,
}]

内容的提问来源于stack exchange，提问作者Dr. Rill