UG部落

今天工作上遇到一個在javascript中組"物件陣列"的問題，

我們的需求是陣列中的物件只有幾個property的值不一樣，而大多的屬性一樣組成的陣列

畫面大致如下，

在按下列印鈕的時候，因為multiselect選擇多項而產生多張報表，

而發出的ajax到controller的地方用陣列的方式去接物件陣列

 

前端的畫面中序列化查詢的表單控制項可得到以下物件

此時printCondition物件中的屬性MonitorKinds代表第一張圖的multiselect，

而專案中取出的multiselect控制項只會取得最後一個所選的值，並不會包含所有選擇的項目.....

所以先取得kendo化的multiselect再塞給MonitorKinds這個屬性

printCondition.MonitorKinds = $("#MonitorKinds").data("kendoMultiSelect").value();

而實際上在這個MonitorKinds 屬性是要塞入array的型態，可是需求必須把其拆成陣列，

因此建立一個物件陣列裏頭每個物件只有MonitorKinds 這個屬性隨著multiselect不一樣。

 

一開始想法是......在將物件push進array前手動去修改MonitorKinds 這個屬性，

卻發現在push第一個物件printCondition後再去修改第二個準備要push物件的MonitorKinds 的屬性時，

連array中第一個物件的MonitorKinds 都被修改到了.....
         

var testCondition;
var arrCondition = new Array();

if ($("#MonitorKinds").data("kendoMultiSelect").value().length > 1) {
    for (var i = 0; i < $("#MonitorKinds").data("kendoMultiSelect").value().length; i++) {
         testCondition = printCondition; //printCondition為序列化後的物件
         //testCondition = Object.assign({}, printCondition); //產生一個複製的printCondition物件
         testCondition.MonitorKinds = $("#MonitorKinds").data("kendoMultiSelect").value()[i];
         arrCondition.push(testCondition);
     }
}

當迴圈跑第二次時，先改了testCondition.MonitorKinds再push，

會發現array的第一個物件一起被修改了

 

而解決方法就是:

testCondition = Object.assign({}, printCondition);

在You Don't Know JS: this & Object Prototypes 提到

Object.assign(..) takes a target object as its first parameter, and one or more source objects as its subsequent parameters. It iterates over all the enumerable (see below), owned keys (immediately present) on the source object(s) and copies them (via = assignment only) to target.

The duplication that occurs for Object.assign(..) however is purely = style assignment, so any special characteristics of a property (like writable) on a source object are not preserved on the target object.

 

這樣放進array中的物件不會因為修改物件的某個屬性而被全部改掉囉~