JavaScript数组异常行为解析：为何未得到空数组？

这个问题的核心是JavaScript中var关键字的**变量提升（Hoisting）**特性，以及函数参数与内部变量的作用域冲突。我们来一步步拆解你的代码执行逻辑：

第一步：变量提升的隐形影响 #

在JavaScript里，所有用var声明的变量会被"悄悄提升"到当前函数作用域的最顶部，但赋值操作会留在原来的位置。你的代码里，if块内的var arr = []会被拆成两个独立步骤：

• 变量声明var arr被提升到函数开头
• 赋值arr = []留在if块内等待执行

所以你的函数实际执行顺序等价于：

function setupWindowProgBar(settings, window, palette, arr){
  var arr; // 变量提升：这里的arr和参数、if内的arr是同一个变量
  console.log('start');
  console.log(arr); // 这里的arr是传入的参数值，没传的话就是undefined
  if(typeof arr == 'undefined'){
    arr = []; // 只是赋值，不是重新声明新变量
  }
  console.log(arr);
  console.log('stop');
  // 后续代码...
}

第二步：为什么没得到空数组？ #

你没拿到空数组的情况只有两种可能：

1. 调用函数时传入了arr参数：哪怕你传的是null、0、''这类假值，typeof arr都不会等于'undefined'，所以if块不会执行，arr还是你传入的原始值。
   • 比如你调用setupWindowProgBar(..., null)，typeof null是'object'，条件不成立，自然不会赋值为空数组。
2. 误解了var的作用域：var没有块级作用域，所以if内的var arr不会创建新变量，只是复用了函数作用域里已有的arr（也就是参数里的那个变量）。

如何修复？ #

如果你想确保没传入arr参数时，它会被初始化为空数组，推荐两种优化方式：

• 用ES6默认参数（最简洁的方案）：直接在函数参数里设置默认值，彻底避开变量提升的坑

  function setupWindowProgBar(settings, window, palette, arr = []){
    console.log('start');
    console.log(arr); // 没传参数的话就是空数组
    console.log('stop');
    // 后续代码...
  }
  

• 去掉if内的var：直接赋值，避免重复声明带来的混淆

  function setupWindowProgBar(settings, window, palette, arr){
    console.log('start');
    console.log(arr);
    if(typeof arr == 'undefined'){
      arr = []; // 去掉var，直接给已有的变量赋值
    }
    console.log(arr);
    console.log('stop');
    // 后续代码...
  }
  

这样就能保证当没有传入arr参数时，得到的是空数组啦。

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