javascript - JavaScript 中奇怪的数组行为

Question

我知道与其他语言相比，JavaScript 中的数组有点特殊，但我并没有真正理解这种行为，或者这里发生了什么。

我想知道为什么会发生这种情况以及为什么我没有得到空数组:

function setupWindowProgBar(settings, window, palette, arr){
    console.log('start');
    console.log(arr);
    if(typeof arr == 'undefined'){
        var arr = [];
    }
    console.log(arr);
    console.log('stop');
    var arrLen = arr.length;
    arr[arr.length] = createProgBar('master', 'bg', window, 0, settings.fillColor, settings.strokeColor, settings.textColor, palette, 'percent', settings.reqType, settings.sourceType, settings.sourceTarget, settings.sourceId);
    return arr;
}

在控制台中生成:

start
undefined
[]
    0:
    barType:"master"
    bgcolor:"#12181f"
    curVal:160
        data:
        all_goals:160
        cost_hours:160
        cost_hours_spent:0
        cost_money:31610
        cost_money_owned:0
        parentObj:"progBar"
        progress_goals:5
        recurring:"no"
        wanted_timer:"2018-03-26 05:19:33"
        __proto__:Object
    fill:"#255f6f"
    height:59
    maxVal:5
    maxWidth:168
    sectionHeight:59
    stroke:"#7b9dac"
    text:"3%"
    textColor:"#dee5ed"
    textOpt:"percent"
    width:200
    x:33
    y:81
__proto__:Object
height:100
text:"omanko"
length:1
__proto__:Array(0)
stop

我确实认识到这里的对象，但据我所知，这不是来自全局污染 - console.log(window.arr) 说没有名为 arr 的全局变量，而且我没有修改原型(prototype).

当然，这不会影响新的数组声明？

Answer 1

此行为不仅限于数组，任何对象在控制台中都会以这种方式表现

您所看到的是所有浏览器中的控制台对您“撒谎”的结果

如果您 console.log(anyobject) 并在控制台中检查该对象，您将看到的是当前 anyobject - 而不是 console 时的内容.log 已执行

var obj = {}
console.log(obj);
obj.test = 1;

var arr = [1];
console.log(arr);
arr.push(2);

现在，如果您打开开发者控制台，单击该对象，您将看到 test:1

查看控制台中的数组 - 它输出为 [1] ...但是，单击您会看到两个元素的数组

注意:Chrome 开发者控制台至少暗示了它在骗你的事实 - 如果你将鼠标悬停(或单击，不记得了，请不要使用 Chrome)，会有一个蓝色的 i经常)您会看到一条消息，指出显示的值刚刚评估