如何在JavaScript中打印对象数组?

我已经在JavaScript中创build了一个对象数组。 如何在浏览器窗口中打印对象数组,类似于PHP中的print_r函数?

 var lineChartData = [{ date: new Date(2009, 10, 2), value: 5 }, { date: new Date(2009, 10, 25), value: 30 }, { date: new Date(2009, 10, 26), value: 72, customBullet: "images/redstar.png" }]; 

提前致谢。

简单的使用

 yourContainer.innerHTML = JSON.stringify(lineChartData); 

如果你想要更漂亮一点的话

 yourContainer.innerHTML = JSON.stringify(lineChartData, null, 4); 

示范

但是如果你只是为了debugging而这样做,那么你最好使用 console.log(lineChartData) 使用控制台 。

如果你使用Chrome,你也可以使用

 console.log( yourArray ); 

你检查了吗

 console.table(yourArray); 

更多信息请访问: https : //developer.mozilla.org/en-US/docs/Web/API/Console/table

php.js库中有一个非常棒的print_r实现。

请注意,您还应该在代码中添加echo支持。

演示: http : //jsbin.com/esexiw/1

简单的function来提醒对象或数组的内容。
用一个数组或string或者一个对象来调用这个函数来提醒内容。

function

 function print_r(printthis, returnoutput) { var output = ''; if($.isArray(printthis) || typeof(printthis) == 'object') { for(var i in printthis) { output += i + ' : ' + print_r(printthis[i], true) + '\n'; } }else { output += printthis; } if(returnoutput && returnoutput == true) { return output; }else { alert(output); } } 

用法

 var data = [1, 2, 3, 4]; print_r(data); 
 document.getElementById('container').innerHTML = lineChartData[array_index] 

我使用下面的函数在firefox控制台日志中显示读数:

 //// make printable string for console readout, recursively var make_printable_object = function(ar_use) { //// internal arguments var in_tab = arguments[1]; var st_return = arguments[2]; //// default vales when applicable if (!in_tab) in_tab = 0; if (!st_return) st_return = ""; //// add depth var st_tab = ""; for (var i=0; i < in_tab; i++) st_tab = st_tab+"-~-~-"; //// traverse given depth and build string for (var key in ar_use) { //// gather return type var st_returnType = typeof ar_use[key]; //// get current depth display var st_returnPrime = st_tab+ "["+key+"] ->"+ar_use[key]+"< is {"+st_returnType+"}"; //// remove linefeeds to avoid printout confusion st_returnPrime = st_returnPrime.replace(/(\r\n|\n|\r)/gm,""); //// add line feed st_return = st_return+st_returnPrime+"\n"; //// stop at a depth of 15 if (in_tab>15) return st_return; //// if current value is an object call this function if ( (typeof ar_use[key] == "object") & (ar_use[key] != "null") & (ar_use[key] != null) ) st_return = make_printable_object(ar_use[key], in_tab+1, st_return); } //// return complete output return st_return; }; 

例:

 console.log( make_printable_object( some_object ) ); 

或者 ,您可以更换:

 st_return = st_return+st_returnPrime+"\n"; 

 st_return = st_return+st_returnPrime+"<br/>"; 

打印出来的HTML页面。

您可以使用以下语法,并且该对象将完全显示在控制台中:

 console.log('object evt: %O', object); 

我使用Chrome浏览器不知道这是否适用于其他浏览器。

呃…为什么不使用这样的东西呢?

 function displayArrayObjects(arrayObjects) { var len = arrayObjects.length, text = ""; for (var i = 0; i < len; i++) { var myObject = arrayObjects[i]; for (var x in myObject) { text += ( x + ": " + myObject[x] + " "); } text += "<br/>"; } document.getElementById("message").innerHTML = text; } var lineChartData = [{ date: new Date(2009, 10, 2), value: 5 }, { date: new Date(2009, 10, 25), value: 30 }, { date: new Date(2009, 10, 26), value: 72, customBullet: "images/redstar.png" }]; displayArrayObjects(lineChartData); 
 <h4 id="message"></h4> 

我用我的自定义函数在控制台中打印数组

 this.print = function (data,bpoint=0) { var c = 0; for(var k=0; k<data.length; k++){ c++; console.log(c+' '+data[k]); if(k!=0 && bpoint === k)break; } } 

用法:print(array);
或打印(数组,50); //只能打印50值