js 操作前打印数组 显示的是操作后的内容

js里,对数组进行循环添加,每次都打印一次数组,发现打印出来的内容一直是最终结果的数组内容,就是循环结束后的数组。
代码如下
for(var k=0;k<deplist.length;k++){

            depArr.push({
                    dep:deplist[k],
                    wait:waits[k],
                    queue:queue[k]
                });
            console.log(depArr);
            
        };

我后面还有数组排序操作,发现也是这样的。 大概查了下,好像是控制台打印读取内存的问题。
有哪位大神具体解释一下,要不然每次调试数组就很麻烦了

阅读 4.2k
3 个回答
var deplist = [1, 2, 3, 4, 5];
var waits = [11, 22, 33, 44, 55];
var queue = [111, 222, 333, 444, 555];
var depArr = [];
for(let k = 0, len = deplist.length; k < len; k++){
  depArr.push({
    dep: deplist[k],
    wait: waits[k],
    queue: queue[k]
  });
  console.log(depArr);
}

先代码展示你所说的问题,打印的第一个数据,原本只有1个object,点开后却有5个object,如图
clipboard.png
你可以加个debugger看看原因

var deplist = [1, 2, 3, 4, 5];
var waits = [11, 22, 33, 44, 55];
var queue = [111, 222, 333, 444, 555];
var depArr = [];
for(let k = 0, len = deplist.length; k < len; k++){
  depArr.push({
    dep: deplist[k],
    wait: waits[k],
    queue: queue[k]
  });
  console.log(depArr);
  debugger; // 加这行你看看
}

步骤:

  1. 运行代码,控制台结果,点开json
    clipboard.png
  2. 下一步,点开json结果
    clipboard.png
  3. 连续走两步,然后再点开json的结果
    clipboard.png

可以看出,打印一个数据,点开一个,里面是只有一个object的,但是如果你多调试几步之后才去点开第一个的话,展示的是最后一个的结果值,所以,应该可以猜测,打印时没有读取内存的数据,点开json查看内容时才去读内存里的数据,又因为每个打印的depArr都指向定义时的depArr,而此时depArr是最后那个值,所以看到的就是最后的值了。
你要看数据的话可以在打印的过程中重新指向另一个引用,这样就不会出现你说的问题了,例如:

var deplist = [1, 2, 3, 4, 5];
var waits = [11, 22, 33, 44, 55];
var queue = [111, 222, 333, 444, 555];
var depArr = [];
for(let k = 0, len = deplist.length; k < len; k++){
  depArr.push({
    dep: deplist[k],
    wait: waits[k],
    queue: queue[k]
  });
  let arr = [].concat(depArr);  
  console.log(arr);  // 打印的是新定义的arr,而这个arr的值是当前depArr,而不是最终的
}

你还可以打印成字符串看结果

console.log(JSON.stringify(depArr)); 

这时,每次读取的都是当前的。

推荐问题
宣传栏