数组表示法

Question

我想知道[]和(3) [Object,Object,Object]之间的数组表示法有什么区别？

我有一个对象数组，例如：

var array = [{id: 1, text: 'a'}, {id: 2, text: 'b'}, {id: 3, text: 'c'}];

当我在代码中的某一行尝试使用console.log(array)时，有时它会打印出[]，有时则是(3) [Object,Object,Object]。虽然[]不是空的，但当我在浏览器控制台中展开它时，两者都包含相同的值（3个对象）。

在我的情况下，当我像这样使用var array作为我的select2数据时：

$('#elems').select2({
      data: array
});

如果我运行 console.log(array) 并且显示为 (3) [Object, Object, Object]，那么 select2 会获取数据，选项将会是 a,b,c。但是，当它显示为 [] 时，select2 无法读取对象，因此选项将为空。

我想知道是否 select2 将 [] 视为空值，即使在浏览器控制台中 [] 可以展开并包含值。像这样： 有人能解释一下吗？

- procatmer

---

你点击了小的 i 图标吗？控制台并没有标准化，因此每个浏览器可以自行决定如何显示数据。 - Sebastian Simon

@Xufox 是的，无论使用哪个浏览器，都会显示相同的消息“value below was evaluated just now.”，这表明当数组显示为“[]”时，某些东西阻止了select2读取object。 - procatmer

我想知道这是否是某种竞态条件。在 console.log 运行时，它是一个空数组，但在渲染时它已经有了 3 个项目或类似的情况。 - Matt

@mkaatman，这也是我的想法。但是，我尝试在代码的某些行中随机放置console.log，有些显示为[]，有些则没有。 - procatmer

Answer 1

这是一个时间问题。console.log在项目被添加之前运行。可以运行此代码段进行示例。您必须恰到好处地掌握时间。很可能是竞争条件。

var array = [{id: 1, text: 'a'}, {id: 2, text: 'b'}, {id: 3, text: 'c'}];
console.log(array);

var array = [];
setTimeout(function(){
  array.push({id: 1, text: 'a'}, {id: 2, text: 'b'}, {id: 3, text: 'c'});
  }, 1000);
console.log(array);

- Matt

---

我明白了，这是一个时间问题。 - procatmer

1000毫秒的setTimeout对我来说确实像你描述的那样。 - Matt

Answer 2

在JavaScript控制台中，单行显示是在调用console.log()时生成的。

当您稍后单击箭头图标时，多行显示将在您单击箭头时生成。

这就是为什么您会看到两个不同的结果：您已经在原始console.log()调用后但在单击箭头前更改了数组。

如果您想要查看在console.log()调用时存在的完整数组内容，一个好方法是使用JSON.stringify()：

console.log( JSON.stringify( array, null, 4 ) );

如果你不确定为什么会出现这种情况，很可能是因为你有一些异步操作，在你调用原始的console.log()之后修改了数组。例如，一个常见的错误是调用ajax来填充全局变量，然后在ajax回调被调用之前立即尝试在你的代码中使用该变量 - 但这是在数据准备好和ajax回调被调用之前。

在这种情况下，你根本不应该使用全局变量。相反，你应该在ajax回调本身中处理从服务器返回的数据，或者在回调内部调用的函数中处理。不要尝试将其存储在全局变量中，并且不要假设你的其他代码知道何时数据已准备就绪。只能在回调函数内访问数据。

- Michael Geary