Question

当将新创建的对象推入javascript数组时，数组的某些元素与最后一个元素相同，就好像最后一个被推送的对象覆盖旧的一些元素一样。如下所示。

var urlRoot = "http://.../";
var allBooks = []; 
var i = 1;
var max = 2; //3;

getPage(i);

function getPage(bookNo) {

    if (i > max) {
        return;
    }

    $.ajax({
        url: urlRoot + bookNo,
        type: 'GET',
        cache: false,
        success: function(res) {
            var html = res.responseText;

            allBooks.push(new Book(html));
            //allBooks[i - 1] = new Book(html);

            console.log(allBooks);

            i++;
            getPage(i);
        }
    });
}

console.log（allBooks）给出了下面的结果，只推送了两个元素并推送了三个元素（标签'EnglishbookHeading'的值发生了变化;但数组'Pages'的内容与最后一个推送的内容相同。）：

[Book, Book]
0: Book    
EnglishbookHeading: "Revelation"
Hadiths: Array[43]
__proto__: Book
1: Book    
EnglishbookHeading: "Belief"
Hadiths: Array[43]
__proto__: Book
length: 2

    Array[3]
0: Book
EnglishbookHeading: "Revelation"
Pages: Array[53]
__proto__: Book
1: Book
EnglishbookHeading: "Belief"
Pages: Array[53]
__proto__: Book
2: Book
EnglishbookHeading: "Knowledge"
Pages: Array[53]
__proto__: Book
length: 3

Book.js：

define(["Page"],
    function (Page) {

        var englishbookHeading;
        var thisPages = [];

        function Book(html) {
            setBook(html);

            this.EnglishbookHeading = englishbookHeading;
            this.Pages = thisPages;
        };

        function setBook(html) {
            var con = $(html); //Context

            ...

            var chapters = tumHadisler.find('div.chapter');
            var index = 0;

            chapters.each(function () {

                var Page = new Page();

                ...

                thisPages[index] = Page;

                index++;
            });
        }

        return Book;
    });

Page.js：

define(function () {

    function Page() {

        this.ChapterId = "";

        ...
    }

    return Page;
});

Answer 1

请参阅您使用相同数组对象thisPages作为Book.Pages属性值的问题，因此所有图书将始终代表Pages属性的相同值。

您需要将Book引用传递给setBook方法，以便您只能将页面添加到特定图书。例如，

   function Book(html) {
        this.EnglishbookHeading = englishbookHeading;
        this.Pages = [];
        setBook(this, html);
    };

    function setBook(book, html) {
        var con = $(html); //Context

        ...

        var chapters = tumHadisler.find('div.chapter');
        var index = 0;

        chapters.each(function () {

            var Page = new Page();

            ...

            book.Pages[index] = Page;

            index++;
        });
    }

另一个替代方法是在thisPages方法中重置setBook，这也可以解决问题 - 例如，

function setBook(book, html) {
   thisPages = [];   // we are creating new array here that will be used for current book
   var con = $(html); //Context
   ...

我不确定您的编码风格和代码组织，因此请选择适合您的编码方式。

将新创建的对象推送到javascript数组会覆盖以前数据的某些部分

1 个答案: