你不知道的Javascript之console用法！

路灯下的光
199 阅读6分钟

这年头还有谁会用console！不会吧！没错！这年头还有我这种傻傻的在用console，向来我们应该都很熟console.log，它就是用来打印数据调试代码的，主要作用是方便你调式javascript用的，你可以看到你在页面中输出的内容。有兄弟可能会说alert不是也可以吗？是的，alert也可以，再深入了解console之前，我们先来看看下面例子：

const obj = {
 a:1,
 b:2
}
console.log(obj)
alert(obj);

上面结果console打印就是真正的obj对象，而alert打印的是[object Object]，还有一个特点就是alert会阻断程序的进行，而console不会。所以相比alert，console会更好。

为什么alert会打印这个[object Object]？ 这个[object Object]其实是等同于Object.prototype.toString.call({})这个表达式一般是用来检测数据类型，而alert打印前把变量都会用toString方法转化的，但是对于数组和变量它会正常显示。哪有什么办法可以正常打印呢？我们再看看下面例子：

function writeObj(obj){ 
　　var description = ""; 
　　for(var i in obj){ 
　　　　var property=obj[i]; 
　　　　description+=i+" = "+property+""; 
　　} 
　　alert(description); // 这样可以把所有对象属性打印出来
}
writeObj(obj)

然后我们再看看下面例子，就会发现其实alert对所有数据类型都做了toString转换。

const arr = [1,2,3];
console.log(arr);// [1,2,3]
console.log(arr.toString());// 1,2,3
alert(arr);// 1,2,3

const obj = {a:1,b:2};
console.log(obj);// {a:1,b:2}
console.log(arr.toString());// [object Object]

好的好的！废话不多说我们现在了解console.log与alert的区别以及特点了，我还得安利一个方便写console.log小工具给各位同仁：vsCode中已经默认给我们设置了全局代码console.log('');只不过它也默认被注释掉了，我们通过文件->首选项->选择用户片段搜javscript.json就可以找到并打开了：

"Print to console": {
        "prefix": "log",// 快捷字符串
        "body": [
                "console.log('$1');",// 输出的代码，$1 :这个为光标的所在位置.
                "$2" //按tab键可进行快速切换到下一行
        ],
        "description": "Log output to console" // 描述信息
}

image.png

基本知识该说也说了，现在重头戏来了，console究竟是个啥？其实console里面有24个方法：

console.log(console);

image.png

1 assert（断言）

  • assert：断言，一个很好的用于保证程序正确性的特性。我得再杠一下，都有断点了，用这个干哈，直接用断点不好吗？我们不要冲动学习一下而已！！！

    function cat(name, age, score){  
    this.name = name;  
    this.age = age;  
    this.score = score;  
}  
var c = new cat("miao", 2, [6,8,7]);  
console.assert(c.score.length!=3, "Assertion of score length failed");// 这里下面报错了
// 第一个是要执行的条件
// 第二个是报错的信息

    image.png

2 clear

  • clear：用于清除stdout，如果stdout是TTY(Teletype)，即终端将尝试清除TTY。如果stdout不是TTY，则此方法不执行任何操作。console.clear()在不同的操作系统和终端类型上将以不同的方式工作。对于Linux操作系统，console.clear()的操作类似于终端中的clear shell命令。在Windows上，console.clear()将清除Node.js二进制文件的当前终端视口。此方法不接受任何参数。

3 context

  • context：其实console对象与console.context的作用是一样的。 
    console.log(console.context());// 打印了console对象

4 count

  • count：控制台模块的内置应用程序编程接口，用于通过维护特定标签的内部计数器来对作为参数传递给它的标签进行计数。有一个参数label，它是一个可选参数，用于指定要计数的标签。默认值为“default”。

    console.count(); // default:1
console.count("a"); //a:1
console.count("a"); //a:2
console.count("b"); //b:1

5 countReset

  • countReset：重置计数器。

    console.count("a"); //a:1
console.count("a"); //a:2
console.countReset("a");
console.count("a");// a:1

6 debug

  • debug：控制台模块的内置应用程序编程接口，用于将消息打印到换行符中的stdout。与console.log()方法类似。它有两个参数：data:此参数指定要打印的数据；args:这是可选参数，用于指定要作为替换值在传递给数据的消息中传递的参数。所有传递的参数均发送到util.format()。主要用于输出调试信息。 
    console.debug("Sample debug message with args:%d", 39);
// Sample debug message with args:39

7 dir

  • dir：显示一个对象所有的属性和方法。

    const obj = {
    a:1,
    b:2,
    c:function(){
    }
}
console.dir(obj);

8 dirxml

  • dirxml：网页的某个节点（node）所包含的html/xml代码。

    <div id="box">前端你好！</div>
  <script>
    // 获取 div
    const div = document.getElementById('box');
    // 输出对象 html/xml 代码
    console.dirxml('console.dirxml:', div);
  </script>

9 error

  • error：用于输出错误信息到控制台。

    console.error("这是一个错误。");

10 group

  • group：创建一个新的分组，用于在控制台中创建一组消息。它指示消息组的开始以及调用控制台后写入的所有消息。group()方法将写入消息组内部。

    console.group(); 
console.log('Vue');
console.log('React');
console.log('Angular');

    image.png

11 groupCollasped

  • groupCollasped：折叠分组，group一打印就展开信息组了。

    console.groupCollapsed(); // 折叠分组
console.log('Vue');
console.log('React');
console.log('Angular');

12 groupEnd

  • groupEnd：控制group方法分组结束。

    console.group(); // 折叠分组
console.log('Vue');
console.log('React');
console.log('Angular');
console.groupEnd();

    image.png

13 info

  • info：与log、debug没啥区别。

14 log

  • log：打印数据信息。log支持的格式标志有%s（占位符）、%d或%i（整数）、%o%O（对象）、%c（css样式）。

    console.log('%d','12');
console.log('%s',123);
console.log('%c俺是带颜色的','color:green;background:yellow;');

15 memory

  • memory：这是一个属性，并不是是函数，此属性是用来查看内存使用情况，如果我们使用过多的console.log()会占用大量的内存，导致浏览器出现卡死情况。它有三个属性：jsHeapSizeLimit（JS堆栈内存大小限制）、totalJSHeapSize（可使用的内存）、usedJSHeapSize（JS对象（包括V8引擎内部对象）占用的内存，不得大于totalJSHeapSize，若大于，则可能内存泄漏）。

    image.png

16 profile

  • profile：性能分析器，该特性是非标准的，请尽量不要在生产环境中使用它。

17 profileEnd

  • profileEnd：结束性能分析器的，主要用来结束profile记录的配置信息。

18 table

  • table：将数据以表格的形式表示，必传一个参数，参数为数组或对象。
// 当传入的是数组时
const arr = [1,3,5,7];
console.table(arr);

image.png

// 当传入的是对象时
const obj = {a:1,b:2}
console.table(obj);

image.png

19 time

  • time：计时器计时开始，结合timeEnd使用

20 timeEnd

  • timeEnd：计时器计时结束。
console.time('a');
a();
console.timeEnd('a');

image.png

21 timeLog

  • timeLog：结合time使用，打印时间，功能与timeEnd差不多。

22 timeStamp

  • timeStamp：选择用一个参数来作为时间戳标签，然后标记旁边就会显示这个标签。

23 trace

-trace：追踪调用栈信息。

    function c() {
      console.trace();
      console.log("c");
    }

    function b() {
      console.log("b");
      c();
    }

    function a() {
      
      console.log("a");
      b();
    }
    
    a();

这个例子可以看到调用栈顺序为c、b、a。因为a是最先调用的，然后就入栈，接着是b调用入栈，最后是c调用入栈，栈顶就是c。

image.png

24 warn

  • warn：用于在控制台输出警告信息。
console.warn('警告信息！');

image.png

avatar
文章
阅读
粉丝