console打印出来的数组长度不一样

Question

project.peopleList({

            'projectId': that.id
        }, function(data) {
            console.log('data',data);
            // 项目的所有参与人去掉项目负责人显示
            that.peopleLists = [];//先清空，避免重复push
            for(var i = data.length - 1; i>=0; i--){
                if(data[i].peopleId == that.currentPeople){
                    data.splice(i,1)
                }else{
                    that.peopleLists.push(data[i]);
                    that.$emit('update:peopleLists',that.peopleLists)
                }
            }
        })

接口返回了3条数据，但是打印出的结果却是这样的

去掉for循环显示正常，想知道这是什么原因导致的这样的现象，谢谢大家

Answer 1

做个小实验：

现在讲讲我的理解，不一定对，大家一起讨论。

console.log(arr) 执行的是 console.log(arr.toString())，但是也许是出于美化的原因（这里我确实不太清楚），devtool 将其输出成了 (3) [1, 2, 3] 的形式，要注意的是，这与 console.dir(arr) 的输出 Array(3) 完全不一样。

也就是说，对于第一种情况来说，(3) [1, 2, 3] 是执行 console.log 时 arr.toString() 的结果，而此时没有进入 for 循环也就没有被 splice，因此是完整的三个元素；
对于第二种情况来说，Array(3) 也是执行 console.dir 时 arr 的状态，此时其中的元素数量也没有发生变化。

当展开（这一步是工具提供的，不是 console.xxx 本身的能力）输出中的 arr 时（无论是 log 还是 dir 的结果），执行引擎会展示该变量此时内存中的真实情况，即被 splice 后的数组内容。

第三种情况我个人觉得是印证了这种想法。

我觉得要查看某一时间点的某个变量的真实情况，要么简单的就直接 console.log(JSON.stringify(arr))，要么下断点在 watch 里查看。

Answer 2

chorme的console应该是是类似指针形式，就像对象赋值一样，一开始console出length是原本的长度，后来经过for之后删掉了一个，这时你在console点开data的值，的确只有两个。

Answer 3

console.log 打印出的是引用类型变量的引用，因此显示出的是当前状态下的值，这种情况可以通过 JSON.parse(JSON.stringify(...)) 二连解决，或者使用 debugger，推荐后者。

Answer 4

这个跟代码的执行顺序有关, 因为在代码执行开始的时候数据是有3条的, 所以显示3条, 在经过for循环后数据少了1条, 当你点击展开的时候浏览器会去内存里取数据,这时数据只有2条了, 所有只有2条; 你把console.log("data",data)放在for循环的后面就行了.

Answer 5

注意, 控制台其实已经提示了你

鼠标放上去就知道了