循環並將對象推入數組

Question

HTML

<div class="row">
  <div class="col-xs-5 stateName">Kuala Lumpur</div>
  <div class="col-xs-7"><input id="1" placeholder="0.00" type="text"/></div>
</div>

<div class="row">
  <div class="col-xs-5 stateName">Kuala Kangsar</div>
  <div class="col-xs-7"><input id="2" placeholder="0.00" type="text"/></div>
</div>

我的

var stateArr = [],
    tempObj = {};

$('.stateName').each(function(){
  tempObj.id = $(this).next('div').find('input').attr('id');
  tempObj.name = $(this).text();                
  stateArr.push(tempObj);
});
console.log(stateArr)

我的結果都是Kuala Kangsar ，知道我的循環有什么問題嗎？ 當我將對象推入循環中的數組時，我以為我做了正確的循環？

Answer 1

在循環內聲明對象tempObj={}

           var stateArr = [];
            $('.stateName').each(function(){
               var tempObj = {};  // declare obj inside loop
                tempObj['id'] = $(this).next('div').find('input').attr('id');
                tempObj['name'] = $(this).text();

                stateArr.push(tempObj);
            });

            console.log(stateArr);

演示

Answer 2

僅使用 jQuery 的另一種方法

 var arr = $('.stateName').map(function(index, el){ return { id : $(this).next('div').find('input').attr('id'), name : $(this).text() }; }).toArray(); console.log(arr); document.getElementById('res').innerHTML = JSON.stringify(arr);

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="row"> <div class="col-xs-5 stateName">Kuala Lumpur</div> <div class="col-xs-7"><input id="1" placeholder="0.00" type="text"/></div> </div> <div class="row"> <div class="col-xs-5 stateName">Kuala Kangsar</div> <div class="col-xs-7"><input id="2" placeholder="0.00" type="text"/></div> </div> <div id="res"></div>

Answer 3

我有一個類似的問題。 這是因為當您執行以下操作時，您只是在推送對對象的“引用”，並且當在循環中更新對象值時，被推送的對象也會更改值，因為它只是一個“引用”，最終在循環中設置的最后一個值也在“引用”中設置，因此您會看到最后一個被推送的對象的多個值。

stateArr.push(tempObj);

因此，要解決此問題，請執行以下操作：

stateArr.push(JSON.parse(JSON.stringify(tempObj))); //see Note below

防止引用的另一種方法是執行以下操作：

let obj = { a: 1 };
let copy = Object.assign({}, obj); // Object.assign(target, ...sources)

obj.a = 2;
console.log(copy); // { a: 1 }
console.log(obj); // { a: 2 }

注意： https ://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign#warning_for_deep_clone