一个“诡异”的console.log()结果

一个诡异的结果

在前端开发中，我们都少不了用console.log来输出变量和调试。可是在使用它的过程中，偶尔也会出现一些让我们很费解的行为，如下图：

是不是很诡异：）

这个诡异的行为是怎么来的呢？其实怪我“断章取义”了。控制台上我执行的代码其实是：

注意到展开的数组旁边有一个小i，将鼠标移动上去，会出现提示文字：

Value below was evaluated just now.

简单翻译一下就是：下面展示的值，是刚刚解释执行（evaluated，或者你可以用你熟悉的eval函数来理解这个单词）的结果。

这句话该怎么理解呢？注意到：小i这个提示仅在我们展开数组的时候才会出现，而展开前控制台上展示的确实是一个空数组[]。因此我们可以将展开前后认为是这个值的两个状态。

现在，我们定位到了这个诡异的行为是和展开相关的，那么让我们来实验一下展开这个操作会对log出来的值产生什么影响呢？我们将一行一行地在控制台执行下面三行js代码：

var a = []
console.log(a)
a.push(1, 2, 3, 4, 5)

在执行a.push(1)之前展开[]，会得到下面的结果，应该算是一个预期结果：

而在执行a.push(1)之后再展开[]，就会得到一开始我给大家看的“诡异”结果了。

现在回过头来看 Value below was evaluated just now. 这句话，其实说的就是，展开后的值，其实是在你点击展开小三角的时候，才 “eval” 出来的。

再看下面一个例子：

图中的结果，我是在执行了a = [1, 2, 3, 4, 5]这句话之后才点击的小三角，然而结果却没有变成“诡异”结果的样子。这是因为后面我更新数组是直接采用变量赋值的方法，相当于修改了变量a的引用，就和变量的引用赋值一样，是影响不了a之前所引用的数组的。

也就是说，console.log()在展开时用于eval的，是变量指向的引用而不是变量本身。

试试其他浏览器

console.log的这个行为并不是chrome限定，在Firefox和Safari中你都能得到同样的行为。

Firefox：

Safari中由于console.log展不开，因此使用console.dir来展开：

Edge下就不是这样子了233：

所以如果你不想要这个“诡异”的结果的话，可以用 Edge 调试哦：）

如果不用Edge呢？

一个正常的思路是，如果能够让console.log直接输出就是展开的，那么这个行为就不会诡异了。

不过很不幸，我没有找到能够做这件事情的API。不过，我们可以借助console.group这个方法，自己造一个展开的结构出来。

/**
 * expandLog
 *
 * @desc 自动展开的 console.log，实现参考：
 * https://stackoverflow.com/questions/10464844/is-there-a-way-to-auto-expand-objects-in-chrome-dev-tools#27610197
 * @author leuisken <[e-mail]>
 * @param {Object} obj 需要 log 的对象
 */
function expandLog(obj) {
    if (Array.isArray(obj)) {
        obj.forEach((value, index) => {
            console.group(`${index} : ${type(value)}`);
            expandLog(value);
            console.groupEnd();
        });
    }
    else if (isPlainObject(obj)) {
        Object.keys(obj)
            .forEach(key => {
                const value = obj[key];
                console.group(`${key} : ${type(value)}`);
                expandLog(value);
                console.groupEnd();
            });
    }
    else {
        console.log(obj);
    }
    return;

    /**
     * type
     *
     * @desc 针对部分常见类型给予更好的输出方式
     * @param {Object} obj 传入的对象
     * @return {string} 类型字符串
     */
    function type(obj) {
        const typeofResult = typeof obj;

        if (typeofResult !== 'object') {
            return typeofResult;
        }
        else if (obj === null) {
            return 'null';
        }
        else if (Array.isArray(obj)) {
            return 'Array';
        }
        else if (obj instanceof RegExp) {
            return 'RegExp';
        }
        else if (obj instanceof Date) {
            return 'Date';
        }
        return 'Object';
    }

    /**
     * isPlainObject
     *
     * @desc 即：jQuery.isPlainObject
     * @param {Object} obj 传入的对象
     * @return {boolean} 是否为 PlainObject
     */
    function isPlainObject(obj) {
        if (!obj
            || obj.toString() !== '[object Object]'
            || obj.nodeType
            || obj.setInterval
        ) {
            return false;
        }

        if (obj.constructor
            && !obj.hasOwnProperty('constructor')
            && !obj.constructor.prototype.hasOwnProperty('isPrototypeOf')
        ) {
            return false;
        }

        let key;
        for (key in obj) {}

        return key === undefined || obj.hasOwnProperty(key);
    }
}

这里写这个方法只是示个意，估计一般也不会有谁这么做。。其实很无奈，就和console.log、console.dir没有提供默认展开的API一样，console.group也没有提供默认收起的API。。。。

题外话

在搜索能否默认展开console.log结果的时候，在Stack Overflow上无意间搜到了这样一个结果。

https://stackoverflow.com/que...

原来 chrome 的 console，也有自己的 console 啊。。