用js写了一个类似php的print_r输出换行功能-php开发

这里提供一个用JS实现类似PHP的print_r输出换行的完整攻略。

这里提供一个用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);

输出结果：

示例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');
}
    }
}

Html部分

JS部分

示例说明

示例1

示例2

基础教程推荐