JavaScript Arrayオブジェクトが正しく表示されない

ドットインストールのこちらで勉強しております。

講義では以下のように表示されるはずなのですが、、

lang
1Array [ 100, 300, 200, 500 ] 
2Array [ 100, 800, 1000, 500 ]

どうしても私は以下のように表示されてしまいます。。

lang
1Array [ 100, 800, 1000, 500 ] 
2Array [ 100, 800, 1000, 500 ]

こちらがスクリプトです。

lang
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="utf-8">
5    <title>JavaScriptの練習</title>
6</head>
7<body>
8    <script>
9
10        var a = new Array(100, 300, 200);
11
12        a.push(500);
13        console.log(a);
14        a.splice(1, 2, 800, 1000);
15        console.log(a);
16
17
18    </script>
19</body>
20</html>

どのようにすれば正しく表示されるのでしょうか。。

行動規範の内容に同意します

回答3件

お邪魔します。

Chromeではうまく動作しています。
こちらではfirefoxで確認したところ、質問者さんと同じ状態になりました。
ブラウザによって最適化がなされて、console.log()の実行が遅延評価（＝全部計算が終わって、中身が決まってから評価）するように実装されているのかもしれません。（console.logを呼んだタイミングによらず最終的な結果を出力しています）
処理の途中で状態が変わる様子を出力したい場合には不適切ですが、これはこれであっていると思います。

ブラウザを変えずにどうしても見たい、ということであれば

lang
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="utf-8">
5    <title>JavaScriptの練習</title>
6</head>
7<body>
8    <script>
9        //案①alert()をはさんで処理を中断してみる
10        var a = new Array(100, 300, 200);
11        
12        a.push(500);
13        console.log(a);
14        alert(a);
15        a.splice(1, 2, 800, 1000);
16        console.log(a);
17        alert(a);
18
19    </script>
20</body>
21</html>

とか、

lang
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="utf-8">
5    <title>JavaScriptの練習</title>
6</head>
7<body>
8    <script>
9        //案②オブジェクトを変えてみる
10        var a = new Array(100, 300, 200);
11        var b = new Array(100, 300, 200);
12        a.push(500);
13        b.push(500);
14        console.log(a);
15        b.splice(1, 2, 800, 1000);
16        console.log(b);
17
18    </script>
19</body>
20</html>

とか、

lang
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="utf-8">
5    <title>JavaScriptの練習</title>
6</head>
7<body>
8    <script>
9        //案③ひとつづつ動かしてみる
10        var a = new Array(100, 300, 200);
11        
12        a.push(500);
13        console.log(a);　　　　　　　 //２回目に動かすときにこの行をコメント
14        //a.splice(1, 2, 800, 1000); //２回目に動かすときにこの行のコメントをはずす
15        //console.log(a);            //２回目に動かすときにこの行のコメントをはずす
16
17    </script>
18</body>
19</html>

とかにしてみても確認できます。

参考になれば幸いです。

投稿2015/01/15 16:13

ShinpeiYamamoto

総合スコア540

初めまして
間違っていないと思います。
Google Chromeで正しく表示されます。
ブラウザは何をお使いですか？
もしかしてMacのSafariですか？外していたらすみません。
Safariでは，オブジェクトを出力すると，どこで出力したものでも最後の状態が出てしまいます。
試しに
alert(a);
と変えて試してみてください。
意図した表示が出ると思います。

投稿2015/01/15 15:23

D.O

総合スコア55

ベストアンサー

　"console.log lazy" でググったところ、2年ぐらい前のChromeでの現象がヒットしました。Firefoxでも同様の現象が見られるようになったということでしょうか。

どうやったら正しく表示できるか、ですが、配列のインスタンスをコピーしてしまえば後から書き換えられませんから、このような方法ではどうでしょうか。

lang
1var a = new Array(100, 300, 200);
2
3a.push(500);
4console.log(a);  // Array [ 100, 800, 1000, 500 ]
5console.log(a.slice());  // Array [ 100, 300, 200, 500 ]
6a.splice(1, 2, 800, 1000);
7

参考

投稿2015/01/16 03:05