7

有人可以解释以下两个输出吗？

代码 1：

console.log(itemsAry);
//loadNextItem();
function loadNextItem(){
    var item = itemsAry.shift();
    console.log(item);
}

结果：

["cat-53", "cat-57", "cat-51", "cat-10", "cat-55", "cat-56", "cat-5", "cat-50", "cat-3", "cat-54", "cat-52", "cat-9", "cat-8", "cat-4", "cat-58", "cat-6", "cat-7"]

（如预期的那样）。

代码 2：

console.log(itemsAry);
loadNextItem();
function loadNextItem(){
    var item = itemsAry.shift();
    console.log(item);
}

结果：

["cat-57", "cat-51", "cat-10", "cat-55", "cat-56", "cat-5", "cat-50", "cat-3", "cat-54", "cat-52", "cat-9", "cat-8", "cat-4", "cat-58", "cat-6", "cat-7"]

cat-53

请注意，cat-53 已从原始数组 PRIOR 转移到console.log()应该在shift操作发生之前发生的输出。我怎么可能？或者我错过了什么？

编辑：它变得更糟：

console.log(itemsAry);
loadNextItem(); loadNextItem(); loadNextItem(); loadNextItem();
function loadNextItem(){
    var item = itemsAry.shift();
    console.log(item);
    console.log(itemsAry);
}

结果：

["cat-55", "cat-56", "cat-5", "cat-50", "cat-3", "cat-54", "cat-52", "cat-9", "cat-8", "cat-4", "cat-58", "cat-6", "cat-7"]
cat-53
["cat-55", "cat-56", "cat-5", "cat-50", "cat-3", "cat-54", "cat-52", "cat-9", "cat-8", "cat-4", "cat-58", "cat-6", "cat-7"]
cat-57
["cat-55", "cat-56", "cat-5", "cat-50", "cat-3", "cat-54", "cat-52", "cat-9", "cat-8", "cat-4", "cat-58", "cat-6", "cat-7"]
cat-51
["cat-55", "cat-56", "cat-5", "cat-50", "cat-3", "cat-54", "cat-52", "cat-9", "cat-8", "cat-4", "cat-58", "cat-6", "cat-7"]
cat-10

在 FireFox 中测试后，它似乎是专门的 Google Chrome 问题。FF输出：

["cat-53", "cat-57", "cat-51", "cat-10", "cat-55", "cat-56", "cat-5", "cat-50", "cat-3", "cat-54", "cat-52", "cat-9", "cat-8", "cat-4", "cat-58", "cat-6", "cat-7"]
cat-53
["cat-57", "cat-51", "cat-10", "cat-55", "cat-56", "cat-5", "cat-50", "cat-3", "cat-54", "cat-52", "cat-9", "cat-8", "cat-4", "cat-58", "cat-6", "cat-7"]
cat-57
["cat-51", "cat-10", "cat-55", "cat-56", "cat-5", "cat-50", "cat-3", "cat-54", "cat-52", "cat-9", "cat-8", "cat-4", "cat-58", "cat-6", "cat-7"]
cat-51
["cat-10", "cat-55", "cat-56", "cat-5", "cat-50", "cat-3", "cat-54", "cat-52", "cat-9", "cat-8", "cat-4", "cat-58", "cat-6", "cat-7"]
cat-10
["cat-55", "cat-56", "cat-5", "cat-50", "cat-3", "cat-54", "cat-52", "cat-9", "cat-8", "cat-4", "cat-58", "cat-6", "cat-7"]

按预期输出...

4

4 回答 4

4

我认为您使用的是 Chrome 是否正确？Firebug 不会这样做（我刚刚检查过 - FF8.0，FB 1.8.4），但 Chrome 16 会。

我认为发生的事情是在 Chrome 中，console.log() 是异步执行的，以免中断您的代码或其他东西；实际上，所有的 console.log() 都会在调用它们的代码完成运行后立即发生。

编辑：诅咒，忍者！

于 2011-11-15T15:03:33.703 回答
3

console.log总是有点“迟到”，当涉及到对象时，你不能指望它。只有原语（字符串等）才能直接工作。前者在内存中只有一个实例，因此当控制台获取数据时，它可能已经更改。

当然，这取决于您实际使用的是哪个控制台，但我经常在 Chrome 上遇到这种情况。

这是在 Firebug 上经历过这种情况的人。

于 2011-11-15T14:55:41.547 回答
1

的行为console.log

中的console.log快照元素execute scope并在控制台中打印它们。这里有一个演示：

(function () {
  console.log(obj);
  var obj= {};
  obj.new_value = 'hello';
}())

objconsole.log调用时未定义。但它以正确的属性打印到控制台中new_value。

火狐的问题

首先，在firefox中使用function关键字声明函数时，函数的名称在代码执行之前不会被分配。

如果您没有loadNextItem在之前的代码中定义，下面的代码将ReferenceError: loadNextItem is not defined在 firefox 中生成一个 error()。

loadNextItem();

function loadNextItem (){
    var item = itemsAry.shift();
    console.log(item);
}

这种行为在ECMA-262中有说明

众所周知，ECMAScript 的几个广泛使用的实现支持将 FunctionDeclaration 用作语句。然而，在应用于此类 FunctionDeclarations 的语义中，实现之间存在显着且不可调和的变化。由于这些不可调和的差异，将 FunctionDeclaration 用作 Statement 会导致代码在实现之间不能可靠地移植。

并且Firefox 不支持这种行为。

于 2011-11-15T15:34:55.327 回答
0

无法在 FF 8.0 中使用复制

x = [1,2,3,4,5];
console.log(x);
y();
function y() {
    z = x.shift();
    console.log(z);
}
于 2011-11-15T14:59:56.873 回答