Question

我正在以角度编写应用程序，并创建一个名为Workbooks的自定义服务数组，每个服务都有一组名为Views的自定义服务。我用一个简单的for循环填充数组，但由于某种原因，这会产生意想不到的结果：

第一次迭代后，数组中有一个工作簿： Workbook 1

在第二个，两个工作簿标题为工作簿2 之后：Workbook 2 Workbook 2

在第三个之后：Workbook 3 Workbook 3 Workbook 3

等等。怎么会发生这种情况？以下是创建工作簿并将其添加到数组的代码的简化版本：

for (var i = 0; i < 3; i++) {
    var workbook = Workbook;
    workbook.setTitle("workbook " + (i + 1));
    for (var j = 0; j <2; j++ ) {
        var view = View;
        view.setTitle("view " + (j + 1));
        workbook.addView(view);
    }

    workbooks[i] = workbook;

    //this next for loop can be used to print the array as described    
    for (var k = 0; k < workbooks.length; k++) {
        console.log(workbooks[k].getTitle());
    }
}

return workbooks;

怎么会发生这种情况？第i个工作簿被赋予一个标题，然后被分配到数组中的第i个点。当i为2时，如何将名为Workbook 3的工作簿分配给数组中的第0个和第1个点以及第2个？

供参考，以下是应用相关代码的plunker。谢谢！

Answer 1

您没有将第i个工作簿分配给数组中的每个位置，您正在为每个位置分配SAME工作簿，然后更新标题。你需要做

var workbook = Workbook;

进入这个

var workbook = new Workbook;

Answer 2

嗯，第一个问题：

for (var i = 0; i < 3; i++) {
var workbook = Workbook;
workbook.setTitle("workbook " + (i + 1));

每次通过此循环，您将重新创建变量“工作簿”，并为其指定名称“工作簿X”。

但是看起来你每次都没有创建一个新的工作簿，而是重复使用相同的引用，所以每个工作簿最终都只是对同一个对象的引用。

当您下次循环时，您只需重新分配此引用的标题，并且它们都在更新。

试试这个，看看它是如何回应的。

var workbook; // Just cleaner, avoids re-declaring the variable
for (var i = 0; i < 3; i++) {
    workbook = new Workbook; // avoids re-referencing the same Workbook
    workbook.setTitle("workbook " + (i + 1));
    for (var j = 0; j <2; j++ ) {
        var view = View;
        view.setTitle("view " + (j + 1));
        workbook.addView(view);
    }

    workbooks[i] = workbook;

    //this next for loop can be used to print the array as described    
    for (var k = 0; k < workbooks.length; k++) {
        console.log(workbooks[k].getTitle());
    }
}

return workbooks;

Answer 3

您需要在工厂实施中为每个工厂调用返回新对象。

GATapp.factory('Workbook', function () { 
    return function () {
        var title;
        var views = [];
        this.getTitle = function () {
            return title;
        }
        this.setTitle = function (newTitle) {
            title = newTitle;
        }
        this.getViews = function () {
            return views;
        }
        this.addView = function (newView) {
            views.push(newView);
        }
        this.getView = function (i) {
            return views[i].getTitle();
        }
    };
});

在消耗工厂时创建新对象。

var workbook = new Workbook();

请看一下。 Plnkr

javascript数组奇怪地填充

3 个答案: