__x__(73)1011第十二天__ JavaScript consol 对象与控制台

consol 对象

console对象是 JavaScript 的原生对象

它有点像 Unix 系统的标准输出stdout和标准错误stderr，

可以输出各种信息到控制台，并且还提供了很多有用的辅助方法

  • 常见用途
    • 调试程序，显示网页代码运行时的错误信息
    • 提供了一个命令行接口，用来与网页代码互动
  • 打开开发者工具以后，顶端有多个面板。

    • Elements：    查看网页的 HTML 源码和 CSS 代码。
    • Resources：    查看网页加载的各种资源文件（比如代码文件、字体文件 CSS 文件等），以及在硬盘上创建的各种内容（比如本地缓存、Cookie、Local Storage等）。
    • Network：    查看网页的 HTTP 通信情况。
    • Sources：    查看网页加载的脚本源码。
    • Timeline：    查看各种网页行为随时间变化的情况。
    • Performance：    查看网页的性能情况，比如 CPU 和内存消耗。
    • Console：    用来运行 JavaScript 命令
  • console.log()

    • 用于在控制台输出信息
    • 可以接受一个或多个参数，将它们连接起来输出
    • 会自动在每次输出的结尾，添加换行符
    • console.log(‘Hello World‘);    // Hello World

console.log(‘a‘, ‘b‘, ‘c‘);    // a b c
    • 如果第一个参数是格式字符串（使用了格式占位符），console.log方法将依次用后面的参数替换占位符，然后再进行输出
    • console.log(‘ %s + %s = %s‘, 1, 1, 2);    //  1 + 1 = 2

      console.log方法支持以下占位符，不同类型的数据必须使用对应的占位符。

          • %s    字符串
          • %d    整数
          • %i    整数
          • %f    浮点数
          • %o    对象的链接
          • %c    CSS 格式字符串
            • 使用%c占位符时，对应的参数必须是 CSS 代码，用来对输出内容进行 CSS 渲染

              console.log(
  ‘%cThis text is styled!‘,
  ‘color: red; background: yellow; font-size: 24px;‘
);
// 输出的内容将显示为黄底红字
      • console.log方法的两种参数格式，可以结合在一起使用 
        • console.log(‘ %s + %s ‘, 1, 1, ‘= 2‘);    // 1 + 1  = 2
  • console.info()

    • 是console.log方法的别名，用法完全一样。
    • 只不过console.info方法会在输出信息的前面，加上一个蓝色图标
  • console.debug()

    • 与console.log方法类似，会在控制台输出调试信息。
    • 但是，默认情况下，console.debug输出的信息不会显示，只有在打开显示级别在verbose的情况下，才会显示。
    • console对象的所有方法，都可以被覆盖。因此，可以按照自己的需要，定义console.log方法 
      • // 使用自定义的console.log方法，可以在显示结果添加当前时间
[‘log‘, ‘info‘, ‘warn‘, ‘error‘].forEach(function(method) {
    console[method] = console[method].bind(
        console,
        new Date().toISOString()
    );
});

console.log("出错了！");
// 2014-05-18T09:00.000Z 出错了！
  • console.warn() 方法 和 console.error() 方法 也是在控制台输出信息
    • warn方法输出信息时，在最前面加一个黄色三角，表示警告；
    • error方法输出信息时，在最前面加一个红色的叉，表示出错
    • 还会高亮显示输出文字和错误发生的堆栈
    • 其他方面都一样
    • 可以这样理解，log方法是写入标准输出（stdout），warn方法和error方法是写入标准错误（stderr）
  • console.table() 方法 可以数组或者对象将其转为表格显示

    • var languages = [
  { name: "JavaScript", fileExtension: ".js" },
  { name: "TypeScript", fileExtension: ".ts" },
  { name: "CoffeeScript", fileExtension: ".coffee" }
];

console.table(languages);
      • console.table(languages);
        ，转为表格显示如下

  • console.count()

    • 用于计数，输出它被调用了多少次
    • 每次调用greet函数，内部的console.count方法就输出执行次数 
      • function greet(user) {
    console.count();
    return ‘hi ‘ + user;
}

greet(‘bob‘)
//  : 1
// "hi bob"

greet(‘alice‘)
//  : 2
// "hi alice"

greet(‘bob‘)
//  : 3
// "hi bob"
    • 可以接受一个字符串作为参数，作为标签，对执行次数进行分类 
      • function greet(user) {
  console.count(user);
  return "hi " + user;
}

greet(‘bob‘)
// bob: 1
// "hi bob"

greet(‘alice‘)
// alice: 1
// "hi alice"

greet(‘bob‘)
// bob: 2
// "hi bob"

  • console.dir()

    • 对一个对象进行检查（inspect），并以易于阅读和打印的格式显示
    • 对于输出 DOM 对象非常有用，因为会显示 DOM 对象的所有属性
    • Node 环境之中，还可以指定以代码高亮的形式输出 
      • console.dir(obj, {colors: true});
    • console.dirxml() 方法主要用于以目录树的形式，显示 DOM 节点
  • console.assert() 

    • 主要用于程序运行过程中，进行条件判断
    • 如果不满足条件，就显示一个错误，但不会中断程序执行。
    • 这样就相当于提示用户，内部状态不正确 
      • console.assert(false, ‘判断条件不成立‘)    // Assertion failed: 判断条件不成立

// 相当于
try {
    if (!false) {
        throw new Error(‘判断条件不成立‘);
    }
} catch(e) {
      console.error(e);
}
      • 判断子节点的个数是否大于等于500

        console.assert(list.childNodes.length < 500, ‘节点个数大于等于500‘);

  • console.time()，console.timeEnd()

  • 用于计时，可以算出一个操作所花费的准确时间
  • console.time(‘Array initialize‘);

var array= new Array(1000000);
for (var i = array.length - 1; i >= 0; i--) {
    array[i] = new Object();
};

console.timeEnd(‘Array initialize‘);
// Array initialize: 1914.481ms
  • console.group() 和   console.groupEnd()
    • 用于将显示的信息分组。
    • 只在输出大量信息时有用，
    • 分在一组的信息，可以用鼠标折叠/展开
  • console.groupCollapsed()  和   console.groupEnd()

    • 该组的内容，在第一次显示时是收起的（collapsed），而不是展开的
  • console.trace()

    • 显示当前执行的代码在堆栈中的调用路径
    • console.trace()
// console.trace()
//   (anonymous function)
//   InjectedScript._evaluateOn
//   InjectedScript._evaluateAndWrap
//   InjectedScript.evaluate
  • console.clear()
    • 清除当前控制台的所有输出，将光标回置到第一行
    • 如果用户选中了控制台的“Preserve log”选项，console.clear方法将不起作用

  • 控制台命令行 API

    • 自带的命令行方法

      • $_  属性返回上一个表达式的值
      • $0 - $4  制台保存了最近5个在 Elements 面板选中的 DOM 元素，$0代表倒数第一个（最近一个），$1代表倒数第二个，以此类推直到$4
      • $(selector)  返回第一个匹配的元素，等同于document.querySelector()。注意，如果页面脚本对$有定义，则会覆盖原始的定义。比如，页面里面有 jQuery，控制台执行$(selector)就会采用 jQuery 的实现，返回一个数组
      • $$(selector)  返回选中的 DOM 对象，等同于document.querySelectorAll
      • inspect(object)方法打开相关面板，并选中相应的元素，显示它的细节
        • 比如inspect(document)会在 Elements 面板显示document元素
      • getEventListeners(object)方法    返回一个对象，该对象的成员为object登记了回调函数的各种事件（比如click或keydown），每个事件对应一个数组，数组的成员为该事件的回调函数
      • keys(object)方法    返回一个数组，包含object的所有键名
      • values(object)方法    返回一个数组，包含object的所有键值 
        • var o = {‘p1‘: ‘a‘, ‘p2‘: ‘b‘};

keys(o)    // ["p1", "p2"]
values(o)    // ["a", "b"]
      • monitorEvents(object[, events])方法    监听特定对象上发生的特定事件。事件发生时，会返回一个Event对象，包含该事件的相关信息 
        • monitorEvents(window, "resize");    // 单个事件的监听方法
monitorEvents(window, ["resize", "scroll"]);    // 多个事件的监听方法
      • unmonitorEvents方法用于停止监听 
        • monitorEvents($0, ‘mouse‘);
unmonitorEvents($0, ‘mousemove‘);
      • monitorEvents允许监听同一大类的事件。所有事件可以分成四个大类
        • mouse："mousedown", "mouseup", "click", "dblclick", "mousemove", "mouseover", "mouseout", "mousewheel"
        • key："keydown", "keyup", "keypress", "textInput"
        • touch："touchstart", "touchmove", "touchend", "touchcancel"
        • control："resize", "scroll", "zoom", "focus", "blur", "select", "change", "submit", "reset" 
          • monitorEvents($("#msg"), "key");

// 上面代码表示监听    所有 key 大类     的事件
  • 其他方法
    • clear()：    清除控制台的历史。
    • copy(object)：    复制特定 DOM 元素到剪贴板。
    • dir(object)：    显示特定对象的所有属性，是console.dir方法的别名。
    • dirxml(object)：    显示特定对象的 XML 形式，是console.dirxml方法的别名。
  • debugger()

    • 主要用于除错，作用是设置断点。
    • 如果有正在运行的除错工具，程序运行到debugger语句时会自动停下
    • 如果没有除错工具，debugger语句不会产生任何结果，JavaScript 引擎自动跳过这一句
    • Chrome 浏览器中，当代码运行到debugger语句时，就会暂停运行，自动打开脚本源码界面 
      • for(var i = 0; i < 5; i++){
    console.log(i);
    if (i === 2){
        debugger;    // 打印出0，1，2以后，就会暂停，自动打开源码界面，等待进一步处理
    }
}

原文地址：https://www.cnblogs.com/tianxiaxuange/p/9775526.html

时间： 2024-07-29 12:09:56

__x__(73)1011第十二天__ JavaScript consol 对象与控制台的相关文章

__x__(75)1012第十三天__ JavaScript 包装对象

包装对象 所谓“包装对象”,就是分别与数值.字符串.布尔值相对应的Number.String.Boolean三个原生对象 这三个原生对象可以把原始类型的值变成(包装成)对象 var v1 = new Number(123); var v2 = new String('abc'); var v3 = new Boolean(true); typeof v1 // "object" typeof v2 // "object" typeof v3 // "obj

__x__(60)0925第十天__ JavaScript 函数对象

1. 创建一个函数对象 var myFunc = new Function(); // typeof myFunc 将会打印 function 将要封装的代码以字符串的方式传递给构造函数 var aFunc = new Function("console.log('Hello!');"); console.log(aFunc); // 打印: " function anonymous(){ console.log("Hello!"); } " 使

__x__(54)0918第七天__ JavaScript

JavaScript 运算符,也叫操作符 对一个或者多个值进行运算,都是会返回结果的. 比如: typeof    返回一个值的类型,返回值类型是字符串. 隐式类型转换: 任意值 = 任意值 + "";    // 就能转换成字符串 任意值 = 任意值 - 0;    // 就能转换成Number 任意值 = +任意值;    // 就能转换成 Number,更简洁 任意值 = !!任意值;    // 即可将 任意值 转换成布尔类型的值 算术运算符, 不会对等号右边的值产生影响: 对

JavaScript实现对象的深度克隆【简洁】【分享】

JavaScript实现对象的深度克隆 代码实现如下: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>clone</title> 6 7 <script type="text/javascript"> 8 //对象深度克隆方法 9 10 11 ////

JavaScript - Array对象的使用 及 数组排序 sort

<html> <head> <head> <body> <script language="javascript"> // Array对象 // 第一种构造方法 var arr = new Array(); alert(arr.length); arr[0] = 520 ; arr[1] = "wjp" ; alert(arr.length); // 第二种构造方法 // Array(4) ; // 第三种

JavaScript原生对象属性和方法详解——Array对象 转载

length 设置或返回 数组中元素的数目. 注意:设置 length 属性可改变数组的大小.如果设置的值比其当前值小,数组将被截断,其尾部的元素将丢失.如果设置的值比它的当前值大,数组将增大,新的元素被添加到数组的尾部,它们的值为 undefined.所以length不一定代表数组的元素个数. var arr = new Array(3) arr[0] = "John" arr[1] = "Andy" arr[2] = "Wendy" cons

JavaScript的对象——灵活与危险

没有哪种数据结构比JavaScript的对象更简单灵活了.作为一个弱动态类型语言,JavaScript对对象的属性没有任何约束, 这带来的结果就是,在使用的时候很爽,想加啥属性直接加上去就行了,根本没有类或模板的限制, 想读啥属性直接"点"出来就行了,写出来那是相当简洁:然而这样的代码在运行的时候呢-- JavaScript这种灵活性最大的一个问题也是没有约束.比如一个网店系统有两个部分,一部分产生订单对象, 另一部分拿到订单对象来展示.咱们前端程序员自然是干后面展示那部分事儿的,比如

奔跑吧，我的JavaScript(3)---JavaScript浏览器对象

Window对象 1.是BOM的核心,window对象指向当前的浏览器窗口,最高层对象之一. 2.所有JavaScript全局对象,函数以及变量均自动成为window对象成员 3.全局变量是window对象的属性 4.全局函数是window对象的方法 5.window尺寸 window.innerHright/window.innerWidth,浏览器窗口的内部高度/宽度 6.window方法 window.open()       打开新窗口 window.close()      关闭窗口

JQuery $.each遍历JavaScript数组对象实例

查看一个简单的jQuery的例子来遍历一个JavaScript数组对象. var json = [ {"id":"1","tagName":"apple"}, {"id":"2","tagName":"orange"}, {"id":"3","tagName":"banana&q