數組推入for循環在Object容器中具有不同的值

Question

我是編程的新手，只是想知道為什么輸出newContainer與我在forloop中推送的不同。 檢查console.log以獲取詳細信息。

var data = [{
    Fruit: "Apple",
    Count: "1",
    Date: "2014"
}, {
    Fruit: "Banana",
    Count: "1",
    Date: "2015"
}, {
    Fruit: "Carrot",
    Count: "1",
    Date: "2014"
}, {
    Fruit: "Orange",
    Count: "1",
    Date: "2016"
}, {
    Fruit: "Apple",
    Count: "1",
    Date: "2012"
}, {
    Fruit: "Banana",
    Count: "1",
    Date: "2011"
}, {
    Fruit: "Apple",
    Count: "1",
    Date: "2010"
}];



var lineItemCount = new Array(5).fill(0);
var lineItems = ["Apple", "Banana", "Carrot", "Orange"];
var newContainer = [];

for (var i = 0; i < data.length; i++) {

    var checkItem = lineItems.indexOf(data[i].Fruit); //get index of item in lineItems

    lineItemCount[checkItem] = lineItemCount[checkItem] + 1;
    lineItemCount[0] = data[i].Date;

    newContainer.push(lineItemCount);
    console.log(lineItemCount);

};
console.log(newContainer);

我試圖得到如下的輸出。 謝謝！

["2014", 1, 0, 0, 0],
["2015", 1, 1, 0, 0],
["2014", 1, 1, 1, 0],
["2016", 1, 1, 1, 1],
["2012", 2, 1, 1, 1],
["2011", 2, 2, 1, 1],
["2010", 3, 1, 1, 1],

Answer 1

您的元素通過引用推送。 只需復制然后推送即可。

例如，更改newContainer.push(lineItemCount); to newContainer.push(Array.from(lineItemCount));

Answer 2

主要問題是您將相同的數組反復推送到結果中。 雖然在推送時 ，數組具有與下一次推送不同的值，但數組是引用，因此當數組內的值遞增時，對該數組的任何引用都會看到這一點，即使是那些已經推送的引用也是如此。

這是更正的代碼，它使用slice(0)將數組元素復制到一個新的數組中然后被推送：

// 5 elements, first one for date
var lineItemCount = new Array(5).fill(0);

var lineItems = [null, "Apple", "Banana", "Carrot", "Orange"];
var newContainer = [];

for (var i = 0; i < data.length; i++) {

    var checkItem = lineItems.indexOf(data[i].Fruit); //get index of item in lineItems

    lineItemCount[checkItem] = lineItemCount[checkItem] + 1;
    lineItemCount[0] = data[i].Date;

    newContainer.push(lineItemCount.slice(0)); // take array copy
    console.log(lineItemCount);

};
console.log(newContainer);

另請注意數組中帶有水果名稱的附加項。 這樣可以確保不會在為日期保留的索引0處增加元素。

Answer 3

您可以使用som助手，一個用於直接訪問fruit數組位置的索引，另一個用於容器中已插入數組的哈希表。

其余的是檢查日期數組是否已經存在，如果沒有，則構建一個空值和前面的日期。 然后將其推入container 。

現在將計數添加到適當的日期和列。

 var data = [{ Fruit: "Apple", Count: "1", Date: "2014" }, { Fruit: "Banana", Count: "1", Date: "2015" }, { Fruit: "Carrot", Count: "1", Date: "2014" }, { Fruit: "Orange", Count: "1", Date: "2016" }, { Fruit: "Apple", Count: "1", Date: "2012" }, { Fruit: "Banana", Count: "1", Date: "2011" }, { Fruit: "Apple", Count: "1", Date: "2010" }], lineItems = ["Apple", "Banana", "Carrot", "Orange"], container = [], items = {}; lineItems.forEach(function (a, i) { items[a] = i; }); data.forEach(function (a) { if (!this[a.Date]) { this[a.Date] = [a.Date].concat(lineItems.map(function () { return 0; })) container.push(this[a.Date]); } this[a.Date][items[a.Fruit] + 1] += +a.Count; }, Object.create(null)); document.write('<pre>' + JSON.stringify(container, 0, 4) + '</pre>');