7

誰かが次の2つの出力を説明できますか?

コード 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 は、操作が行われる前に元の配列から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は常に少し「遅く」、オブジェクトに関しては当てにできません。プリミティブ (文字列など) のみが直接機能します。前者のインスタンスはメモリ内に 1 つしかないため、コンソールがデータをフェッチしているときに、データが既に変更されている可能性があります。

もちろん、実際に使用しているコンソールにもよりますが、私は 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。

ファイアフォックスの問題

まず、functionfirefox でキーワードを使用して関数を宣言すると、関数の名前はコードの実行まで割り当てられません。

以前のコードで定義しなかった場合loadNextItem、次のコードはReferenceError: loadNextItem is not definedfirefox で error( ) を生成します。

loadNextItem();

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

この動作はECMA-262に記載されています

広く使用されている ECMAScript の実装のいくつかは、Statement としての 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 に答える