PHP print_r的函数很好用,可以用来打印数组、对象等的结构与数据,可惜JavaScript并没有原生提供类似的函数。不过我们可以试着自己来实现这个函数,下面提供一些方法与思路。

方法一

  1. function print_r(theObj) {
  2. var retStr = '';
  3. if (typeof theObj == 'object') {
  4. retStr += '<div style="font-family:Tahoma; font-size:7pt;">';
  5. for (var p in theObj) {
  6. if (typeof theObj[p] == 'object') {
  7. retStr += '<div><b>['+p+'] => ' + typeof(theObj) + '</b></div>';
  8. retStr += '<div style="padding-left:25px;">' + print_r(theObj[p]) + '</div>';
  9. } else {
  10. retStr += '<div>['+p+'] => <b>' + theObj[p] + '</b></div>';
  11. }
  12. }
  13. retStr += '</div>';
  14. }
  15. return retStr;
  16. }

方法二

  1. $(document).ready(function(){
  2. $('#btn').click(function(){
  3. var jsonStr = $('#jsonData').val();
  4. var json = eval('('+jsonStr+')');
  5. (function(){
  6. var print_r = function(o, depth) {
  7. var result = '';
  8. depth || (depth=1);
  9. var indent = new Array(4*depth+1).join(' ');
  10. var indentNext = new Array(4*(depth+1)+1).join(' ');
  11. var indentNextTwo = new Array(4*(depth+2)+1).join(' ');
  12. var tmp = '';
  13. var type = typeof o;
  14. switch(type) {
  15. case 'string':
  16. case 'number':
  17. case 'boolean':
  18. case 'undefined':
  19. case 'function':
  20. tmp += indent + indentNext + o + "\n";
  21. break;
  22. case 'object':
  23. default:
  24. for(var key in o) {
  25. tmp += indentNextTwo + '[' + key + '] = ';
  26. tmp += print_r(o[key], (depth+1));
  27. }
  28. }
  29. result += type + "\n";
  30. result += indentNext + '(' + "\n";
  31. result += tmp;
  32. result += indentNext + ')' + "\n";
  33. return result;
  34. };
  35. alert(print_r(json));
  36. }(json));
  37. });
  38. });

方法三

  1. print_r:function(theObj) {
  2. var retStr = '';
  3. if (typeof theObj == 'object'||typeof theObj == 'array') {
  4. retStr += '<div style="font-family:Tahoma; font-size:7pt;">';
  5. for (var p in theObj) {
  6. if (typeof theObj[p] == 'object' || typeof theObj[p] == 'array') {
  7. retStr += '<div><b>['+p+'] => ' + typeof(theObj) + '</b></div>';
  8. retStr += '<div style="padding-left:25px;">' + XFUPLOAD.Tools.print_r(theObj[p]) + '</div>';
  9. } else {
  10. retStr += '<div>['+p+'] => <b>' + theObj[p] + '</b></div>';
  11. }
  12. }
  13. retStr += '</div>';
  14. }
  15. $("body").append(retStr);
  16. }

用JavaScript写一个类似PHP print_r的函数的更多相关文章

  1. 怎么用JavaScript写一个区块链?

    几乎所有语言都可以编写区块链开发程序.那么如何用JavaScript写一个区块链?以下我将要用JavaScript来创建1个简单的区块链来演示它们的内部到底是怎样工作的.我将会称作SavjeeCoin ...

  2. 写一个类似淘宝的ios app需要用到哪些技术?

    写一个类似淘宝的ios app需要用到哪些技术? 让我想起了有人私信我,说不缺钱,做个类似知乎的东西,包括加运营,需要多少钱. 扯淡结束,正好最近看了一点这方面的东西,也许对题主来说有点帮助. 手机淘 ...

  3. vnpy源码阅读学习(4):自己写一个类似vnpy的UI框架

    自己写一个类似vnpy的界面框架 概述 通过之前3次对vnpy的界面代码的研究,我们去模仿做一个vn.py的大框架.巩固一下PyQt5的学习. 这部分的代码相对来说没有难度和深度,基本上就是把PyQt ...

  4. JavaScript写一个连连看的游戏

    天天看到别人玩连连看, 表示没有认真玩过, 不就把两个一样的图片连接在一起么, 我自己写一个都可以呢. 使用Javascript写了一个, 托管到github, 在线DEMO地址查看:打开 最终的效果 ...

  5. 用JavaScript写一个区块链

    几乎每个人都听说过像比特币和以太币这样的加密货币,但是只有极少数人懂得隐藏在它们背后的技术.在这篇博客中,我将会用JavaScript来创建一个简单的区块链来演示它们的内部究竟是如何工作的.我将会称之 ...

  6. 用javascript写一个前端等待控件

    前端等待控件有啥新奇的?什么jquery啦,第三方控件啦,好多好多,信手拈来. 因为项目使用了bootstrap的原因,不想轻易使用第三方,怕不兼容.自己写一个. 技术点包括动态加载CSS,javas ...

  7. 用javascript写一个emoji表情插件

    概述 以我们写的这个emoji插件为例,网上已经有一些相关的插件了,但你总感觉有些部分的需求不能被满足(如:可以自行添加新的表情包而不用去改源代码等等) 详细 代码下载:http://www.demo ...

  8. javascript : 写一个类似于 jquery css() 的方法

    我们知道,jquery css() 方法可以很方便的更改DOM的样式. 但从原理上,这个并不复杂,我们完全可以自己写一个. 上代码. updateDOMStyle(DOM, obj){ Object. ...

  9. 用JavaScript写一个简单的倒计时,可以应用在发送短信验证码的“59秒后重新发送验证短信”

    倒计时——从10倒数到0,点击按钮会还原倒计时 <body> <!-- 将textvalue值设为10,从10倒数 --> <input type="text& ...

随机推荐

  1. Spark-源码-SparkContext的初始化

    Spark版本 1.3SparkContext初始化流程 1.0 在我们的主类 main() 方法中经常会这么写 val conf = new SparkConf().setAppName(" ...

  2. 幸运三角形 南阳acm491(dfs)

    幸运三角形 时间限制:1000 ms  |  内存限制:65535 KB 难度:3   描述 话说有这么一个图形,只有两种符号组成(‘+’或者‘-’),图形的最上层有n个符号,往下个数依次减一,形成倒 ...

  3. 「LibreOJ#515」贪心只能过样例 (暴力+bitset)

    可以发现,答案最大值只有106,于是想到用暴力维护 可以用bitset合并方案可以优化复杂度, Code #include <cstdio> #include <bitset> ...

  4. linux redhat 打开防火墙中的某个端口

    服务器成功监听了一个端口(如 5500),但是外面连接不进来,telnet其端口不通,解决办法如下(在root用户下): $ /sbin/iptables -I INPUT -p tcp --dpor ...

  5. 小白学习mysql 之 innodb locks

    Innodb 锁类型: Shared and Exclusive Locks Intention Locks Record Locks Gap Locks Next-Key Locks Insert ...

  6. Android ImageSwitcher 配合Picasso解决内存溢出(OOM)问题

    最近项目中用到了 ImageSwitcher 来实现图片切换,使用起来很简单,但发现当图片比较大(超过了3M)时,程序出现了内存溢出(OOM)问题而崩溃了. 原因就是图片太大了,显示到 ImageVi ...

  7. jmeter插件下载

    https://jmeter-plugins.org/wiki/Start/ 插件下载好后,将插件lib目录下的jar包放在jmeter安装目录下的lib里,插件ext目录下的jar包放在jmeter ...

  8. Vue学习(五):列表渲染

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. Jmeter——小性能用例

    1.添加默认值,将代理服务器写入 2.添加HTTP请求头,将域名部分用变量形式写入:${__CSVRead(D:/number.txt,0)},这是为了查询不同页面,在D:/number.txt路径下 ...

  10. webpack使用时可能出现的问题

    1.在配置完webpack.config.js准备进行热加载开发时,修改React内容浏览器不会自动局部刷新,而且会console出一些提示: The following modules couldn ...