在jQuery $(document).ready()内外声明JavaScript数组的输出差异问题

这个坑我之前也踩过！核心问题出在你用的变量名status上——它和浏览器内置的全局window.status属性重名了！

为什么会有两种不同的结果？ #

• 在$(document).ready()内部声明时，status是这个回调函数的局部变量，完全独立于全局作用域，所以浏览器不会把它和原生的window.status混淆，数组能正常保留类型，console.log自然能输出你期望的对象数组。
• 但在全局作用域声明时，var status = [...]其实是在给window.status赋值。而window.status是浏览器用来控制状态栏文本的原生属性，它的类型是字符串——浏览器会自动把你传入的数组转换成字符串形式，也就是你看到的[object Object],[object Object]...这种简化后的字符串结果。

几种快速解决的方案 #

• 方案1：换个变量名（最推荐）
  直接给数组换个不会和原生属性撞名的名字，比如statusList、userStatuses：

  var statusList = [
    { "name":"name1", "level":0 },
    { "name":"name2", "level":0 },
    { "name":"name3", "level":0 },
    { "name":"name4", "level":0 },
    { "name":"name5", "level":0 }
  ];
  console.log(statusList); // 正常输出对象数组
  

• 方案2：用命名空间隔离
  如果一定要保留status这个名字，可以把它放到自定义的命名空间里，避免污染全局作用域：

  // 创建自己的命名空间对象，防止覆盖已有变量
  var MyApp = MyApp || {};
  MyApp.status = [
    { "name":"name1", "level":0 },
    { "name":"name2", "level":0 },
    // ... 其他元素
  ];
  console.log(MyApp.status); // 正常输出
  

• 方案3：用ES6的let/const声明
  let和const声明的全局变量不会挂载到window对象上，所以不会和window.status产生冲突：

  const status = [
    { "name":"name1", "level":0 },
    { "name":"name2", "level":0 },
    // ... 其他元素
  ];
  console.log(status); // 正常输出
  

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