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)你的方法,将相同的obj推入数组:

//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更改对象,在propertylookup上,它将首先在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