JavaScript Arrayオブジェクトが正しく表示されない
解決済
回答 3
投稿 2015/01/15 23:14
- 評価
- クリップ 1
- VIEW 848
講義では以下のように表示されるはずなのですが、、
Array [ 100, 300, 200, 500 ]
Array [ 100, 800, 1000, 500 ]Array [ 100, 800, 1000, 500 ]
Array [ 100, 800, 1000, 500 ]こちらがスクリプトです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>JavaScriptの練習</title>
</head>
<body>
<script>
var a = new Array(100, 300, 200);
a.push(500);
console.log(a);
a.splice(1, 2, 800, 1000);
console.log(a);
</script>
</body>
</html>どのようにすれば正しく表示されるのでしょうか。。
-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
+3
Chromeではうまく動作しています。
こちらではfirefoxで確認したところ、質問者さんと同じ状態になりました。
ブラウザによって最適化がなされて、console.log()の実行が遅延評価（＝全部計算が終わって、中身が決まってから評価）するように実装されているのかもしれません。（console.logを呼んだタイミングによらず最終的な結果を出力しています）
処理の途中で状態が変わる様子を出力したい場合には不適切ですが、これはこれであっていると思います。
ブラウザを変えずにどうしても見たい、ということであれば
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>JavaScriptの練習</title>
</head>
<body>
<script>
//案①alert()をはさんで処理を中断してみる
var a = new Array(100, 300, 200);
a.push(500);
console.log(a);
alert(a);
a.splice(1, 2, 800, 1000);
console.log(a);
alert(a);
</script>
</body>
</html><!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>JavaScriptの練習</title>
</head>
<body>
<script>
//案②オブジェクトを変えてみる
var a = new Array(100, 300, 200);
var b = new Array(100, 300, 200);
a.push(500);
b.push(500);
console.log(a);
b.splice(1, 2, 800, 1000);
console.log(b);
</script>
</body>
</html><!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>JavaScriptの練習</title>
</head>
<body>
<script>
//案③ひとつづつ動かしてみる
var a = new Array(100, 300, 200);
a.push(500);
console.log(a); //２回目に動かすときにこの行をコメント
//a.splice(1, 2, 800, 1000); //２回目に動かすときにこの行のコメントをはずす
//console.log(a); //２回目に動かすときにこの行のコメントをはずす
</script>
</body>
</html>参考になれば幸いです。
投稿 2015/01/16 01:13
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
以下のような回答は評価を下げられます
- 間違っている回答
- 質問の回答になっていない投稿
- 不快な投稿
評価を下げる際はその理由をコメントに書き込んでください。
+1
間違っていないと思います。
Google Chromeで正しく表示されます。
ブラウザは何をお使いですか？
もしかしてMacのSafariですか？外していたらすみません。
Safariでは，オブジェクトを出力すると，どこで出力したものでも最後の状態が出てしまいます。
試しに
alert(a);
と変えて試してみてください。
意図した表示が出ると思います。
投稿 2015/01/16 00:23
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
以下のような回答は評価を下げられます
- 間違っている回答
- 質問の回答になっていない投稿
- 不快な投稿
評価を下げる際はその理由をコメントに書き込んでください。
checkベストアンサー
0
どうやったら正しく表示できるか、ですが、配列のインスタンスをコピーしてしまえば後から書き換えられませんから、このような方法ではどうでしょうか。
var a = new Array(100, 300, 200);
a.push(500);
console.log(a); // Array [ 100, 800, 1000, 500 ]
console.log(a.slice()); // Array [ 100, 300, 200, 500 ]
a.splice(1, 2, 800, 1000);投稿 2015/01/16 12:05
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
以下のような回答は評価を下げられます
- 間違っている回答
- 質問の回答になっていない投稿
- 不快な投稿
評価を下げる際はその理由をコメントに書き込んでください。
15分調べてもわからないことは、teratailで質問しよう！
91.78%
