29561


**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]

* * *

**折りたたみ**  
[![折りたたみ](https://i.stack.imgur.com/gVv1X.jpg)](https://i.stack.imgur.com/gVv1X.jpg)  
**展開**  
[![展開](https://i.stack.imgur.com/rhkeA.jpg)](https://i.stack.imgur.com/rhkeA.jpg)


CC BY-SA 3.0
2016-10-13T04:58:29.387
29516
2016-10-14T12:40:55.427
2016-10-14T02:46:34.680
7886
7886
question
javascript
[] と["テキスト1", "テキスト2", "テキスト3", "テキスト4"] の違い


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

[code]

    var a = [];
    document.getElementById('s').addEventListener('click', function(){
      a.length = 0;
      console.log(a);
    });
    document.getElementById('a').addEventListener('click', function(){
      a.push("hoge");
    });
[/code]

[code]

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>Test</title>
    </head>
    <body>
      <button id="s">０にして開始</button>
      <button id="a">要素を追加</button>
    </body>
    </html>
[/code]

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


CC BY-SA 3.0
2016-10-14T12:40:55.427
29561
2016-10-14T12:40:55.427
7347
29516
answer