javascript - 被第二个对象插入覆盖

Question

我只是想知道为什么我的第二次插入会覆盖我的第一个对象值。

const customer = {
    name: '',
    totalCups: 0
}

$('#btnAdd').click(function() {
  debugger

  var itemName = $('#customerName');
  var itemTotalCups = $('#customerTotalCups');

  // Basic Validation
  if (itemName.val().trim() === "") {
    return;
  }

  if (parseInt(itemTotalCups.val()) === 0) {
    return;
  }

  customer.name = itemName.val();
  customer.totalCups = itemTotalCups.val();

  // Data structure Queue
  order.unshift(customer);
  console.log(order);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="input-group">
  <input id="customerName" type="text" class="form-control" placeholder="Enter customer's name" />
  <input id="customerTotalCups" type="number" class="form-control" placeholder="Enter number of cups" min="1" />
  <span class="input-group-btn">
                <button id="btnAdd" class="btn btn-default" type="submit">
                    <i class="fa fa-plus"></i>
                </button>
            </span>
</div>
<button id="btnAdd">Add</button>

<div id="CurentOrder"></div>

例如我得到的第一个插入，

0: {name: "Alan", totalCups: "1"}

当我对另一个数据的第二次插入执行 .unshift 时，它变成如下:

0: {name: "Alan", totalCups: "1"}
1: {name: "Alan", totalCups: "1"}

Answer 1

尝试运行以下代码以查看客户对象和订单数组发生了什么，特别是在第二次调用时。应该清楚问题是什么:)

const customer = {
    name: '',
    totalCups: 0
}
let i = 0;
let order = [];

function add () {
  customer.name = i++
  customer.totalCups = Math.random ()

  // Data structure Queue
  order.unshift(customer);
  console.log(order);
}

add ();
add ();

console.log (order)
console.log (order [0] === order [1])