JS调试输出数组时，显示的值与实际不一致

Question

如题目所示。代码见如下：

console.log(arrPoint.length);
console.log(arrPoint);

在控制台显示：

Point是点的实例，结构是{x:1,y:1}这样的对象。
我代码是连着输出的，没有做任何操作。
为何下面明明有3个对象。length只有2，而且2:Point也没了。

==================补充点代码========

    //点对象，坐标轴x，y
    function Point(x,y){
        this.x = x;
        this.y = y;
    }
var arrPoint = [new Point(0,0),new Point(2,0),new Point(1,1)];
var arrDistance=[];
getAllDistance(arrPoint,arrDistance);

调试的代码位置：

    //计算出各个点的总距离，参数2返回距离数组，函数返回总距离
    function getAllDistance(arrPoint,arrDistance){
        //各点距离,0表示点0到1的距离
        var distance = 0;//距离
        var totalDistance = 0;//总文字距离
        var Point = arrPoint[0];//循环点
        //方便循环把坐标0加入末尾
        console.log(arrPoint.length);
        console.log(arrPoint);
        arrPoint.push(arrPoint[0]);
        //循环刨除了第一个点
        for(var i = 1,length = arrPoint.length;i<length;i++){
            distance = getDistanceByTwoPoint(Point,arrPoint[i]);
            Point = arrPoint[i];
            arrDistance.push(distance);
            totalDistance +=distance;
        }
        //删除末尾的坐标0
        arrPoint.pop();
    }

Answer 1

其实这是一个有点小意思的现象，因为当你在Chrome Console点击展开数组时，会重新去读一遍内存真实的值然后显示，一但展开后就不会再变。

console.log(arrPoint.length);
        console.log(arrPoint);

分别显示3其实是没有错的：

当你点击展开的时候就变成2个，因为你点开后实际是后面的代码已经执行完毕了。

一个有趣的示例：

var Point = function() {}
var arr = [ new Point(), new Point(), new Point() ]

console.log(arr.length)
console.log('第一个数组', arr)
setTimeout(function() {
    arr.push(new Point())
    console.log('第二个数组', arr)
}, 1000 * 5)

如果你在5秒内展开第一个数组会看到3个，5秒后会看到第二个数组展开会看到4个。

如果你在5秒后才展开第一、第二数组会看到4个。

所以Console显示的未必是最真实的。