Question

因此，我试图用JavaScript抓取html，但遇到了困难，我添加到数组中的每个新对象都会更改以前添加的每个对象：

$.get("Readfrom.php", null, function(html) {
  //console.log(html);
  var data = html;
  var uls = $("<ul>").html(data)[0].getElementsByTagName('ul');
  var length = uls.length;
  var elements;
  var object = {
    id: 'meh',
    name: '',
    lastN: '',
    identyfier: '',
  };
  var arrayb = new Array();
  for (var i = 2; i < length; ++i) {
    elements = $("<ul>").html(data)[0].getElementsByTagName('ul')[i].getElementsByTagName('li');

    var elemLength = elements.length;
    object.id = elements[0].firstChild.nodeValue;
    object.name = elements[1].firstChild.nodeValue;
    object.lastN = elements[2].firstChild.nodeValue;
    object.identyfier = elements[3].firstChild.nodeValue;
    arrayb.push(object);
    console.log(object);
  }
  console.log(arrayb);
}, "text");

这是我获取对象的控制台输出

Object { id: "1", name: "Peter", lastN: "La'habo", identyfier: "ABsdf23" }

Object { id: "2", name: "Liam", lastN: "Peters", identyfier: "dfghfgh54" }

Object { id: "3", name: "Super", lastN: "man", identyfier: "gff$$#'\\" }

Object { id: "4", name: "Jimmy\t", lastN: "Bobb's", identyfier: "fghj234\"234df" }

Object { id: "5", name: "Richárd", lastN: "Moore", identyfier: "dfghfg" }

Object { id: "6", name: "Jack", lastN: "Hurlock", identyfier: " fffffff" }

Object { id: "7", name: "Steve", lastN: "Stanley", identyfier: "fghgggg433" }

这是数组

0: Object { id: "7", name: "Steve", lastN: "Stanley", … }

1: Object { id: "7", name: "Steve", lastN: "Stanley", … }

2: Object { id: "7", name: "Steve", lastN: "Stanley", … }

3: Object { id: "7", name: "Steve", lastN: "Stanley", … }

4: Object { id: "7", name: "Steve", lastN: "Stanley", … }

5: Object { id: "7", name: "Steve", lastN: "Stanley", … }

6: Object { id: "7", name: "Steve", lastN: "Stanley", … }

length: 7

我真的对这里发生的事情感到困惑。为什么新对象会覆盖每个先前的对象？

Answer 1

您要推送相同的“对象”声明。

尝试在for中声明对象变量

    $.get("Readfrom.php",null,function(html){
//console.log(html);
var data=html;
var uls=$("<ul>").html(data)[0].getElementsByTagName('ul');
var length= uls.length;
var elements;
var arrayb= new Array();
for (var i=2;i<length;++i)
{

let object={
id:'meh',
name:'',
lastN:'',
identyfier:'',
};
elements=$("<ul>").html(data)[0].getElementsByTagName('ul')[i].getElementsByTagName('li');

var elemLength=elements.length;
object.id=elements[0].firstChild.nodeValue;
object.name=elements[1].firstChild.nodeValue;
object.lastN=elements[2].firstChild.nodeValue;
object.identyfier=elements[3].firstChild.nodeValue;
arrayb.push(object);
console.log(object);


}
console.log(arrayb);
},"text");

Answer 2

对象是引用。当您将对象传递给函数，或将其放入数组，或在任何地方使用它时，您将传递一个指向其在内存中位置的指针。您当时还没有通过快照。如果对象以后更改，则对内存中该位置的所有引用也会更改。

// x points to location 1 in memory.
var x = {};              

// Location 1 in memory has its one property set to 1.
x.one = 1;               

// myArray gets passed location 1 in memory, NOT a copy of location 1.
myArray.push(x);         

// Location 1 in memory has its two property set to 2.
x.two = 2;               

// Outputs location 1 in memory, which is now { one: 1, two: 2 }.
console.log(myArray[0]);

如果要复制对象，则需要创建一个新对象（在内存中创建新位置），而不是对旧对象进行变异。

Answer 3

假设其他所有方法都是正确的，这是一种声明每个对象的乏味的方法：

$.get("Readfrom.php", null, function(html) {
  var arrayb = $("<ul>")
    .html(html)
    .find('ul')
    .toArray()
    .slice(2) // starting at index 2
    .map(function (ul) {
      var elements = $(ul).children('li');

      return {
        id: elements[0].firstChild.nodeValue,
        name: elements[1].firstChild.nodeValue,
        lastN: elements[2].firstChild.nodeValue,
        identyfier: elements[3].firstChild.nodeValue
      };
    });

  console.log(arrayb);
}, "text");

JavaScript对象会覆盖先前的对象

3 个答案: