这里提供一个用JS实现类似PHP的print_r输出换行的完整攻略。
Html部分
首先要创建一个页面用于测试，可以直接编写HTML页面：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>print_r输出换行测试用例</title>
</head>
<body>
<script type="text/javascript" src="index.js"></script>
</body>
</html>
JS部分
接下来我们需要创建一个包含print_r输出换行功能的JS文件，这里为了方便，直接命名为index.js
Step1
我们首先需要创建一个函数：
function print_r(obj, depth) {
//TODO
}
这个函数用于接收需要输出的对象及输出的深度，其中输出的深度为可选参数，默认值为1，即输出一层。
Step2
接着在函数中判断当前的输出深度和当前对象的类型：
function print_r(obj, depth=1) {
// 如果输出深度超出指定范围，直接返回
if (depth <= 0) return;
// 根据obj的类型分类进行处理
switch(typeof(obj)){
case 'undefined':
console.log('undefined');
break;
case 'number':
case 'string':
case 'boolean':
console.log(obj);
break;
case 'function':
console.log(obj.toString().replace(/\{[\s\S]*/, '{\n [native code]\n}'));
break;
case 'object':
//TODO
break;
}
}
当类型为undefined时，输出字符串'undefined'；
当类型为number、string、boolean时，直接输出；
当类型为function时，使用正则表达式将函数转换成字符串输出，方便调试；
当类型为object时，需要进一步处理。
Step3
我们先定义一个用于填补不同深度的缩进字符串，可以写成如下的函数形式：
function repeatString(str, n) {
var res = '';
for (var i = 0; i < n; i++) {
res += str;
}
return res;
}
这个函数接收一个字符串和重复次数作为参数，返回一个该字符串重复n次后的新字符串。
接下来，我们在switch中为类型为object的情况添加一个处理逻辑，代码如下：
function print_r(obj, depth=1) {
// 如果输出深度超出指定范围，直接返回
if (depth <= 0) return;
// 根据obj的类型分类进行处理
switch(typeof(obj)){
case 'undefined':
console.log('undefined');
break;
case 'number':
case 'string':
case 'boolean':
console.log(obj);
break;
case 'function':
console.log(obj.toString().replace(/\{[\s\S]*/, '{\n [native code]\n}'));
break;
case 'object':
var str = '';
if (obj === null) {
str += 'null\n';
break;
}
str += 'Object {\n';
var space = repeatString(' ', depth);
for (var item in obj) {
str += space + '[' + item + '] => ';
str += print_r(obj[item], depth - 1);
}
str += space.slice(0, space.length - 4) + '}\n';
console.log(str);
break;
}
}
当obj为null时，输出字符串'null'；
当obj为object时，输出'Object {'作为头部，在每一项前添加对应的缩进，最后输出尾部'}'。
这里在for循环中嵌套一次print_r函数，实现递归调用，输出对象的详细信息。
完整代码如下：
function print_r(obj, depth=1) {
// 如果输出深度超出指定范围，直接返回
if (depth <= 0) return;
// 根据obj的类型分类进行处理
switch(typeof(obj)){
case 'undefined':
console.log('undefined');
break;
case 'number':
case 'string':
case 'boolean':
console.log(obj);
break;
case 'function':
console.log(obj.toString().replace(/\{[\s\S]*/, '{\n [native code]\n}'));
break;
case 'object':
var str = '';
if (obj === null) {
str += 'null\n';
break;
}
str += 'Object {\n';
var space = repeatString(' ', depth);
for (var item in obj) {
str += space + '[' + item + '] => ';
str += print_r(obj[item], depth - 1);
}
str += space.slice(0, space.length - 4) + '}\n';
console.log(str);
break;
}
}
function repeatString(str, n) {
var res = '';
for (var i = 0; i < n; i++) {
res += str;
}
return res;
}
示例说明
我们来运行一个简单的测试来观察输出效果。
示例1
var a = 1;
print_r(a);
输出结果：
1
示例2
var arr = {
name: 'Jack',
age: 20,
message: {
flag: true,
list: [1, 2, 3, 4],
say: function() {
console.log('hello world');
}
}
};
print_r(arr);
输出结果：
Object {
[name] => Jack
[age] => 20
[message] => Object {
[flag] => true
[list] => Array [
1
2
3
4
]
[say] => function say() {
console.log('hello world');
}
}
}
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：用js写了一个类似php的print_r输出换行功能 - Python技术站
微信扫一扫 
支付宝扫一扫 