Push方法覆盖数组[关闭]答案

【问题标题】：Push方法覆盖数组[关闭]
【发布时间】：2022-01-23 15:12:13
【问题描述】：

我有一个数组，我想在单击按钮时简单地推动该项目。但是发生的情况是最近推送的数据覆盖了数组的先前数据，我在打印时看到了这一点。我对代码的主要要求是在使用对象/函数的同时实现数组的数据结构，在此先感谢您的帮助。

    let BookInfo = [];


    //create a storage for the book information
    let Book = 
    {
        Name: ' ' ,
        Author: ' ' ,
        Page: ' ',

        
        addItem : function()
        {
            Name = document.getElementById('bTitle').value;
            Author = document.getElementById('bAuthor').value;
            Page =  document.getElementById('bPages').value;

            this.Name = Name;
            this.Author = Author;
            this.Page = Page;

        

        BookInfo.push(Book);                            
        document.getElementById('showArr').innerHTML = JSON.stringify(BookInfo);
        
        }
    };

【问题讨论】：

这里只有一个 Book 对象，所以每次都将同一个对象推送到数组中。
@CBroe 先生，你是什么意思？看不懂抱歉。
这能回答你的问题吗？ Do objects pushed into an array in javascript deep or shallow copy?

标签： javascript arrays

【解决方案1】：

书本结束后将书推送到bookinfo中

    let BookInfo = [];
    
    
        //create a storage for the book information
        let Book = 
        {
            Name: ' ' ,
            Author: ' ' ,
            Page: ' ',
    
            
            addItem : function()
            {
                Name = document.getElementById('bTitle').value;
                Author = document.getElementById('bAuthor').value;
                Page =  document.getElementById('bPages').value;
    
                this.Name = Name;
                this.Author = Author;
                this.Page = Page;
            
            }
        };
 BookInfo.push(Book);                            
            document.getElementById('showArr').innerHTML = JSON.stringify(BookInfo);

【讨论】：

但是先生，每次点击按钮时我都想按下（addItem 是一个按钮）
所以你需要做一些改变
让 BookInfo = []; //为图书信息创建一个存储 let Book = { Name: ' ' , Author: ' ' , Page: ' ', }
addItem : function() { Name = document.getElementById('bTitle').value;作者 = document.getElementById('bAuthor').value; Page = document.getElementById('bPages').value; Book.Name = 名称； Book.Author = 作者； Book.Page = 页； BookInfo.push(书); document.getElementById('showArr').innerHTML = JSON.stringify(BookInfo); }

【解决方案2】：

只需将对象克隆到BookInfo：

let BookInfo = [];


//create a storage for the book information
let Book = {
  Name: ' ',
  Author: ' ',
  Page: ' ',


  addItem: function() {
    Name = document.getElementById('bTitle').value;
    Author = document.getElementById('bAuthor').value;
    Page = document.getElementById('bPages').value;

    this.Name = Name;
    this.Author = Author;
    this.Page = Page;


    BookInfo.push(JSON.parse(JSON.stringify(Book)));
    document.getElementById('showArr').innerHTML = JSON.stringify(BookInfo);

  }
};

<input type="text" id="bTitle" value="aa">
<input type="text" id="bAuthor" value="bb">
<input type="text" id="bPages" value="cc">

<button onclick="Book.addItem()">
Click
</button>

<div id="showArr">

</div>

还有另一种方式：

let BookInfo = [];


//create a storage for the book information
let Book = {
  Name: ' ',
  Author: ' ',
  Page: ' ',


  addItem: function() {
    Name = document.getElementById('bTitle').value;
    Author = document.getElementById('bAuthor').value;
    Page = document.getElementById('bPages').value;

    this.Name = Name;
    this.Author = Author;
    this.Page = Page;


    BookInfo.push({
    Name: this.Name,
    Author: this.Author,
    Page: this.Page,
    addItem: this.addItem
    });
    document.getElementById('showArr').innerHTML = JSON.stringify(BookInfo);

  }
};

<input type="text" id="bTitle" value="aa">
<input type="text" id="bAuthor" value="bb">
<input type="text" id="bPages" value="cc">

<button onclick="Book.addItem()">
Click
</button>

<div id="showArr">

</div>

【讨论】：

先生，这很有帮助，感谢您的帮助:)