Javascript - 为什么对象数组不等价？

Question

我有一些正在尝试清理的 javascript 代码...我最初以“蛮力”方式编写了对象数组(称为 myData)的定义。蛮力风格定义了一个包含 4 个对象的数组(数组的大小始终为 4)。以这种方式定义时，我的应用程序工作正常。程序后面的代码读取 JSON 并更新语法中的各种元素，类似于:

myData[2].Quarter = "Q2";

当我尝试清理/合并 myData 的定义时，我的代码运行时没有语法错误，但数组的所有 4 个元素最终都具有相同的值，在暴力风格中，数组中的每个对象最终都具有不同的值。唯一不同的是两个定义。 这就是我所说的“蛮力”，我的整个代码集都运行良好......实际上是同一个对象被复制了 4 次。

var myData = [
     {
        Quarter: 'EMPTY',
        Field_Cloud:0,
        Field_Cloud_Renew:0,
        Field_On_Premise:0,
        Field_Total:0,
        OD_Cloud:0,
        OD_Cloud_Renew:0,
        OD_On_Premise:0,
        OD_Total:0,
        Field_OD_Total:0
    },
        {
        Quarter: 'EMPTY',
        Field_Cloud:0,
        Field_Cloud_Renew:0,
        Field_On_Premise:0,
        Field_Total:0,
        OD_Cloud:0,
        OD_Cloud_Renew:0,
        OD_On_Premise:0,
        OD_Total:0,
        Field_OD_Total:0
    },
        {
        Quarter: 'EMPTY',
        Field_Cloud:0,
        Field_Cloud_Renew:0,
        Field_On_Premise:0,
        Field_Total:0,
        OD_Cloud:0,
        OD_Cloud_Renew:0,
        OD_On_Premise:0,
        OD_Total:0,
        Field_OD_Total:0
    },
        {
        Quarter: 'EMPTY',
        Field_Cloud:0,
        Field_Cloud_Renew:0,
        Field_On_Premise:0,
        Field_Total:0,
        OD_Cloud:0,
        OD_Cloud_Renew:0,
        OD_On_Premise:0,
        OD_Total:0,
        Field_OD_Total:0
    }   
    ];

我尝试将其合并为我认为应该是相同的代码，但我的应用程序不再有效。症状是数组的所有 4 个对象最终都具有相同的值。

合并(但损坏)的代码:

 var myDataStruct= {
        Quarter: 'EMPTY',
        Field_Cloud:0,
        Field_Cloud_Renew:0,
        Field_On_Premise:0,
        Field_Total:0,
        OD_Cloud:0,
        OD_Cloud_Renew:0,
        OD_On_Premise:0,
        OD_Total:0,
        Field_OD_Total:0
    };

    var myData = [];
    myData.push(myDataStruct);
    myData.push(myDataStruct);
    myData.push(myDataStruct);
    myData.push(myDataStruct);

我做错了什么，我如何定义 myData 是一种正确的整合方式？

Answer 1

您可能想使用面向对象的编程和继承:

var myDataStruct = {
    Quarter: 'EMPTY',
    Field_Cloud:0,
    Field_Cloud_Renew:0,
    Field_On_Premise:0,
    Field_Total:0,
    OD_Cloud:0,
    OD_Cloud_Renew:0,
    OD_On_Premise:0,
    OD_Total:0,
    Field_OD_Total:0
};

var myData = Array.from({length:4}, ()=>Object.create(myDataStruct));

或者你克隆那个对象，四次，像这样(不利于内存消耗，没有真正的优势):

var myData = Array.from({length:4}, ()=>Object.assign({},myDataStruct));

---

它们在内存中的样子:

1) 您的方法，将相同的对象插入数组:

//the object
123:
  {Quarter:"Empty",...}
//the array
124: 123
125: 123
126: 123
127: 123
128: null

2)继承方式:

//the prototype
123:
  {Quarter:"empty",...}
//the subobjects
124:
  { prototype: 123}
125:
  { prototype: 123}
126:
  { prototype: 123}
127:
  { prototype: 123}
//the array
128:124
129:125
130:126
131:127
132: null

因此，使用您的方法，更改其中一个数组元素，实际上会更改存储在 123 处的对象，因此它们会相互干扰。使用继承方法，例如更改第一个对象会更改 124 处的对象，在属性查找时，它将首先搜索 124 处的属性，然后如果没有找到，它将在 123 处搜索。所以如果你这样做

myData[0].Quarter = "Full";

内存会变成:

//the prototype
123:
  {Quarter:"empty",...}
//the subobjects
124:
  {Quarter: "Full", prototype: 123}

结果是:

myData[0].Quarter // "Full", looked up in 124
myData[1].Quarter // "empty", as not found in 125 and therefore looked up in 123