3

Chromeで変数をコンソール表示させた時、下記になることがあるのですが、違いは何でしょうか?
・何れも配列?
・一次元配列か2次元配列の違い?
・B内容をAみたいに表示するためには、どうすれば良いでしょうか?


A

▼[]
0:"テキスト1"
1:"テキスト2"
2:"テキスト3"
3:"テキスト4"
//中略
proto: Array[0]


B

▼["テキスト1", "テキスト2", "テキスト3", "テキスト4"]
0: "テキスト1"
1: "テキスト2"
2: "テキスト3"
3: "テキスト4"
//中略
proto: Array[0]


折りたたみ
折りたたみ
展開
展開

2
  • 4
    それぞれの二行目以降は展開したときの表示だと思うのですが、一行目の["テキスト1", "テキスト2", "テキスト3", "テキスト4"] などは折りたたんだ状態の表示なのでしょうか。値は適当に塗りつぶしていただいて構わないので、スクリーンショットを載せていただけませんか?例 i.sstatic.net/wpRxV.png
    – unarist
    Commented 2016年10月13日 5:26
  • スクリーンショットアップロードしました
    – re9
    Commented 2016年10月14日 2:46

1 件の回答 1

7

Aのような表示を次のコードで再現できました。Chromeのコンソールを表示した状態で、「0にして開始」を押すと、[]だけになりますが、そこで▶を押さずに、「要素を追加」を何度か押してから▶押すと、追加された分だけ要素が出てきます。

var a = [];
document.getElementById('s').addEventListener('click', function(){
  a.length = 0;
  console.log(a);
});
document.getElementById('a').addEventListener('click', function(){
  a.push("hoge");
});
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Test</title>
</head>
<body>
  <button id="s">0にして開始</button>
  <button id="a">要素を追加</button>
</body>
</html>

どうやら、Chromeのコンソールでは、 コンソール上で表示が必要になったときの配列の状態 を表示するようです。これは▶を押す場合も同様で ▶を押されて▼になったときの配列の状態 が表示されます。つまり、console.log()が評価されて、コンソールに表示されたときに要素が空であれば[]になります。しかし、その後に要素が追加されるようなコードが有り、その後に▶を押した場合は、そのとき既に追加された分の要素が▼と共に現れます。この表示の処理は一度きりであり、その後さらに要素を追加しても、表示内容は変更されません。なお、コンソールを出していなかった場合も、コンソールを出したときの状態が反映されるようです(ただし、Array[数字]のような表記になってしまいます)。

1
  • Chromeコンソールにおける正常な挙動なのですね。色々な所からデータを取得していたため、何かおかしな変換処理をしたのかと思い質問したのですが、そうではなかったことが分かりました。大変参考になりました
    – re9
    Commented 2016年10月15日 3:30

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。