用JavaScript写一个类似PHP print_r的函数
PHP print_r的函数很好用,可以用来打印数组、对象等的结构与数据,可惜JavaScript并没有原生提供类似的函数。不过我们可以试着自己来实现这个函数,下面提供一些方法与思路。
方法一
- function print_r(theObj) {
- var retStr = '';
- if (typeof theObj == 'object') {
- retStr += '<div style="font-family:Tahoma; font-size:7pt;">';
- for (var p in theObj) {
- if (typeof theObj[p] == 'object') {
- retStr += '<div><b>['+p+'] => ' + typeof(theObj) + '</b></div>';
- retStr += '<div style="padding-left:25px;">' + print_r(theObj[p]) + '</div>';
- } else {
- retStr += '<div>['+p+'] => <b>' + theObj[p] + '</b></div>';
- }
- }
- retStr += '</div>';
- }
- return retStr;
- }
方法二
- $(document).ready(function(){
- $('#btn').click(function(){
- var jsonStr = $('#jsonData').val();
- var json = eval('('+jsonStr+')');
- (function(){
- var print_r = function(o, depth) {
- var result = '';
- depth || (depth=1);
- var indent = new Array(4*depth+1).join(' ');
- var indentNext = new Array(4*(depth+1)+1).join(' ');
- var indentNextTwo = new Array(4*(depth+2)+1).join(' ');
- var tmp = '';
- var type = typeof o;
- switch(type) {
- case 'string':
- case 'number':
- case 'boolean':
- case 'undefined':
- case 'function':
- tmp += indent + indentNext + o + "\n";
- break;
- case 'object':
- default:
- for(var key in o) {
- tmp += indentNextTwo + '[' + key + '] = ';
- tmp += print_r(o[key], (depth+1));
- }
- }
- result += type + "\n";
- result += indentNext + '(' + "\n";
- result += tmp;
- result += indentNext + ')' + "\n";
- return result;
- };
- alert(print_r(json));
- }(json));
- });
- });
方法三
- print_r:function(theObj) {
- var retStr = '';
- if (typeof theObj == 'object'||typeof theObj == 'array') {
- retStr += '<div style="font-family:Tahoma; font-size:7pt;">';
- for (var p in theObj) {
- if (typeof theObj[p] == 'object' || typeof theObj[p] == 'array') {
- retStr += '<div><b>['+p+'] => ' + typeof(theObj) + '</b></div>';
- retStr += '<div style="padding-left:25px;">' + XFUPLOAD.Tools.print_r(theObj[p]) + '</div>';
- } else {
- retStr += '<div>['+p+'] => <b>' + theObj[p] + '</b></div>';
- }
- }
- retStr += '</div>';
- }
- $("body").append(retStr);
- }
用JavaScript写一个类似PHP print_r的函数的更多相关文章
- 怎么用JavaScript写一个区块链?
几乎所有语言都可以编写区块链开发程序.那么如何用JavaScript写一个区块链?以下我将要用JavaScript来创建1个简单的区块链来演示它们的内部到底是怎样工作的.我将会称作SavjeeCoin ...
- 写一个类似淘宝的ios app需要用到哪些技术?
写一个类似淘宝的ios app需要用到哪些技术? 让我想起了有人私信我,说不缺钱,做个类似知乎的东西,包括加运营,需要多少钱. 扯淡结束,正好最近看了一点这方面的东西,也许对题主来说有点帮助. 手机淘 ...
- vnpy源码阅读学习(4):自己写一个类似vnpy的UI框架
自己写一个类似vnpy的界面框架 概述 通过之前3次对vnpy的界面代码的研究,我们去模仿做一个vn.py的大框架.巩固一下PyQt5的学习. 这部分的代码相对来说没有难度和深度,基本上就是把PyQt ...
- JavaScript写一个连连看的游戏
天天看到别人玩连连看, 表示没有认真玩过, 不就把两个一样的图片连接在一起么, 我自己写一个都可以呢. 使用Javascript写了一个, 托管到github, 在线DEMO地址查看:打开 最终的效果 ...
- 用JavaScript写一个区块链
几乎每个人都听说过像比特币和以太币这样的加密货币,但是只有极少数人懂得隐藏在它们背后的技术.在这篇博客中,我将会用JavaScript来创建一个简单的区块链来演示它们的内部究竟是如何工作的.我将会称之 ...
- 用javascript写一个前端等待控件
前端等待控件有啥新奇的?什么jquery啦,第三方控件啦,好多好多,信手拈来. 因为项目使用了bootstrap的原因,不想轻易使用第三方,怕不兼容.自己写一个. 技术点包括动态加载CSS,javas ...
- 用javascript写一个emoji表情插件
概述 以我们写的这个emoji插件为例,网上已经有一些相关的插件了,但你总感觉有些部分的需求不能被满足(如:可以自行添加新的表情包而不用去改源代码等等) 详细 代码下载:http://www.demo ...
- javascript : 写一个类似于 jquery css() 的方法
我们知道,jquery css() 方法可以很方便的更改DOM的样式. 但从原理上,这个并不复杂,我们完全可以自己写一个. 上代码. updateDOMStyle(DOM, obj){ Object. ...
- 用JavaScript写一个简单的倒计时,可以应用在发送短信验证码的“59秒后重新发送验证短信”
倒计时——从10倒数到0,点击按钮会还原倒计时 <body> <!-- 将textvalue值设为10,从10倒数 --> <input type="text& ...
随机推荐
- Spark-源码-SparkContext的初始化
Spark版本 1.3SparkContext初始化流程 1.0 在我们的主类 main() 方法中经常会这么写 val conf = new SparkConf().setAppName(" ...
- 幸运三角形 南阳acm491(dfs)
幸运三角形 时间限制:1000 ms | 内存限制:65535 KB 难度:3 描述 话说有这么一个图形,只有两种符号组成(‘+’或者‘-’),图形的最上层有n个符号,往下个数依次减一,形成倒 ...
- 「LibreOJ#515」贪心只能过样例 (暴力+bitset)
可以发现,答案最大值只有106,于是想到用暴力维护 可以用bitset合并方案可以优化复杂度, Code #include <cstdio> #include <bitset> ...
- linux redhat 打开防火墙中的某个端口
服务器成功监听了一个端口(如 5500),但是外面连接不进来,telnet其端口不通,解决办法如下(在root用户下): $ /sbin/iptables -I INPUT -p tcp --dpor ...
- 小白学习mysql 之 innodb locks
Innodb 锁类型: Shared and Exclusive Locks Intention Locks Record Locks Gap Locks Next-Key Locks Insert ...
- Android ImageSwitcher 配合Picasso解决内存溢出(OOM)问题
最近项目中用到了 ImageSwitcher 来实现图片切换,使用起来很简单,但发现当图片比较大(超过了3M)时,程序出现了内存溢出(OOM)问题而崩溃了. 原因就是图片太大了,显示到 ImageVi ...
- jmeter插件下载
https://jmeter-plugins.org/wiki/Start/ 插件下载好后,将插件lib目录下的jar包放在jmeter安装目录下的lib里,插件ext目录下的jar包放在jmeter ...
- Vue学习(五):列表渲染
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Jmeter——小性能用例
1.添加默认值,将代理服务器写入 2.添加HTTP请求头,将域名部分用变量形式写入:${__CSVRead(D:/number.txt,0)},这是为了查询不同页面,在D:/number.txt路径下 ...
- webpack使用时可能出现的问题
1.在配置完webpack.config.js准备进行热加载开发时,修改React内容浏览器不会自动局部刷新,而且会console出一些提示: The following modules couldn ...