alert()を使用してJavaScriptで配列構造を表示するにはどうすればよいですか?


108

JavaScriptで配列の構造を表示するにはどうすればよいalert()ですか?


14
これはあなたの質問の答えにはなりませんが、FireBugをインストールして使用する必要がありますconsole.log-JavaScriptオブジェクトの内省に最適です。
Deniz Dogan

配列構造とはどういう意味ですか?配列をループして、各値に警告することができます。
Tim Schmelter、2010年

@ Deniz Dogan by console.logあなたはシフト+ Rとオプション「コンソール」を意味しますか?
pppttt

1
@Deniz- console.debug実際にうまくいくでしょう。
Matt Ball

@Timとは構造とは、PHPのprintfのような配列の「生の」ビューであるインデックスと値を意味します
pppttt

回答:


122

非常に基本的なアプローチはalert(arrayObj.join('\n'))、各配列要素を1行に表示するです。


5
これはうまくいきます。「arrayObj」をアレイの名前に置き換えます。だからあなたの配列がmyarrayの命名されている場合、これはコードのあなたの行は次のとおりです。alert(myArray.join('\n'));
トニーBrasunas

54

編集: FirefoxとGoogle Chromeには組み込みJSONオブジェクトalert(JSON.stringify(myArray))が含まれているため、jQueryプラグインを使用する必要なく、ただ言うことができます。これはJavaScript言語仕様の一部ではないためJSON、すべてのブラウザに存在するオブジェクトに依存するべきではありませんが、デバッグの目的には非常に役立ちます。

私は次のようにjQuery-jsonプラグインを使用する傾向があります。

alert( $.toJSON(myArray) );

これは、配列を次のような形式で出力します

[5, 6, 7, 11]

ただし、JavaScriptコードをデバッグするために、Firebug強くお勧めします あなたが任意のページのJavaScriptコードを入力し、その結果を見ることができるように、それは実際には、JavaScriptコンソールが付属しています。配列のようなものは、上記で使用された人間が読める形式ですでに印刷されています。

Firebugにはデバッガーのほか、HTMLとCSSの表示とデバッグに役立つ画面もあります。


32

js配列を以下の関数に渡すと、phpのprint_r()関数と同じように動作します

 alert(print_r(your array));  //call it like this

function print_r(arr,level) {
var dumped_text = "";
if(!level) level = 0;

//The padding given at the beginning of the line.
var level_padding = "";
for(var j=0;j<level+1;j++) level_padding += "    ";

if(typeof(arr) == 'object') { //Array/Hashes/Objects 
    for(var item in arr) {
        var value = arr[item];

        if(typeof(value) == 'object') { //If it is an array,
            dumped_text += level_padding + "'" + item + "' ...\n";
            dumped_text += print_r(value,level+1);
        } else {
            dumped_text += level_padding + "'" + item + "' => \"" + value + "\"\n";
        }
    }
} else { //Stings/Chars/Numbers etc.
    dumped_text = "===>"+arr+"<===("+typeof(arr)+")";
}
return dumped_text;
}

この関数は、FirefoxをUIのソート可能な配列の解析でクラッシュさせました。
Shahrokhian 2013年


8

toString()の使用をお勧めします。

alert(array.toString())、またはconsole.log(array.toString())


3

これがデバッグ目的の場合は、FirebugなどのJavaScriptデバッガーを使用することをお勧めします。配列のエントリ全体の変更やコードのステップ実行など、配列の内容全体を表示できます。


2

オブジェクト配列の内容をalert()で表示したい場合は、オブジェクトにメソッドtoString()を定義して、簡単なalert(MyArray)を定義することをお勧めします。配列の完全な内容がアラートに表示されます。

次に例を示します。

//-------------------------------------------------------------------
// Defininf the Point object
function Point(CoordenadaX, CoordenadaY) {
    // Sets the point coordinates depending on the parameters defined
    switch (arguments.length) {
        case 0:
            this.x = null;
            this.y = null;
            break;
        case 1:
            this.x = CoordenadaX;
            this.y = null;
            break;
        case 2:
            this.x = CoordenadaX;
            this.y = CoordenadaY;
            break;
    }
    // This adds the toString Method to the point object so the 
    // point can be printed using alert();
    this.toString = function() {
        return " (" + this.x + "," + this.y + ") ";
    };
 }

次に、ポイントの配列がある場合:

var MyArray = [];
MyArray.push ( new Point(5,6) );
MyArray.push ( new Point(7,9) );

次のように呼び出すだけで印刷できます。

alert(MyArray);

お役に立てれば!


1

この配列を文字列として変換およびフォーマットする関数を書くことができます。さらに良い:警告の代わりにFireBugをデバッグに使用します。


1

Firebug(Chromeコンソールなど)を使用し、console.dir()を使用することをお勧めします


1

読みやすくするために、次のものを使用できます。

alert(JSON.stringify(someArrayOrObj, '', 2));

JSON.stringify()の詳細。

例:

let user = {
  name: "John",
  age: 30,
  roles: {
    isAdmin: false,
    isEditor: true
  }
};

alert(JSON.stringify(user, "", 2));
/* Result:
{
  "name": "John",
  "age": 30,
  "roles": {
    "isAdmin": false,
    "isEditor": true
  }
} 
*/

-5
alert($("#form_id").serialize());

3
javascript「フレームワーク/ライブラリのタグも含まれていない限り、純粋なJavaScriptの回答が期待されます」という質問にタグが付けられます。それが事実でなかったとしても…問題は、HTMLフォームではなく配列について尋ねることです。
クエンティン
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.