Vue新手求助：for循环最后一次迭代覆盖最终输出问题

嘿，我懂你现在碰到的麻烦！你在循环里写的new1=item1是直接把new1变量重新赋值成当前的item1，每一次循环都会把之前存的内容彻底覆盖掉，所以最后new1自然就只剩下最后一次迭代的item1了。

问题根源 #

直接赋值new1=item1会让new1每次都指向新的对象/数组，而不是把当前的item1添加到已有的new1集合里，这就是为什么最后只保留了最后一项。

解决方案 #

我们需要把每个迭代出来的item1添加到new1数组中，而不是直接覆盖。根据item1的类型（单个对象还是数组），可以用下面两种方式：

情况1：item1是单个对象

如果JSON.parse(response.data[i].pur_items)解析出来的是单个对象，直接用push方法把它加入数组：

methods:{
  getTotals(){
    var self = this;
    var new1 = []; // 初始化空数组
    this.$http.get('http://localhost:3000/api/purchases')
      .then(function (response) {
        console.log("response.data value")
        console.log(response.data)
        for (var i = 0; i < response.data.length; i++) {
          var item1 = JSON.parse(response.data[i].pur_items);
          console.log("item1 for index i time" +i)
          console.log(item1)
          // 使用push添加，而不是直接赋值
          new1.push(item1);
        }
        console.log("最终的new1数组：", new1);
      })
  }
}

情况2：item1是一个数组

如果pur_items本身存的是数组格式的JSON，解析后item1是一个数组，想要把这个数组里的所有元素合并到new1中，可以用扩展运算符配合push，或者concat方法：

// 方式1：扩展运算符push
new1.push(...item1);

// 方式2：concat（会返回新数组，需要重新赋值）
new1 = new1.concat(item1);

更简洁的写法（ES6+） #

如果你项目支持ES6语法，用forEach循环会更清爽：

response.data.forEach(purchase => {
  const item1 = JSON.parse(purchase.pur_items);
  new1.push(item1);
});

这样修改后，new1数组就会收集到所有迭代产生的item1内容，不会再被最后一次迭代覆盖啦！

内容的提问来源于stack exchange，提问作者Rocky