【console】console用法大全:

news2024/10/7 2:30:51

文章目录

        • 一、`console.log`普通信息/`console.info`提示性信息/`console.error`错误信息/`console.warn`警示信息
        • 二、`console.time()和console.timeEnd()`=>查看执行所用时间
        • 三、`console.group()和console.groupEnd()`=>让控制台输出的语句产生不同的层级嵌套关系
        • 四、`console.profile和console.profileEnd`=>查看CPU使用相关信息
        • 五、`console.assert`=>对输入的表达式进行断言,只有表达式为false时,才输出相应的信息到控制台
        • 六、`console.count`=>统计代码被执行的次数
        • 七、`console.dir(object)`=>将传入对象的属性,包括子对象的属性以列表形式输出
        • 八、`console.table()`=>将传入的对象或数组以表格形式输出
        • 九、`console.trace()`=>追踪函数的调用过程


一、console.log普通信息/console.info提示性信息/console.error错误信息/console.warn警示信息

在这里插入图片描述
在这里插入图片描述

占位符含义
%sstring 字符串占位符
%d数字 数字占位符
%oobject 对象占位符
%c样式 占位写样式

占位符:%s string 字符串占位符:
console.log(“今天来的%s不少”,“客人”); // 今天来的客人不少
console.log(“今天来的%s不少,%s也不少”,“客人”,“朋友”); // 今天来的客人不少,朋友也不少

占位符:%d 数字 数字占位符:
console.log(“今天来了%d个人”,10); // 今天来了10个人
console.log(“今天来了%d个人”,“10”); // 今天来了NaN个人 ,字符串"10"会识别成非数
console.log(“今天来了%d个人”,10+=5); // 报错;运算表达式会报错;
var a = 10; console.log(“今天来了%d个人”,a+=5); // 今天来了15个人;变量的运算是可以的;
console.log(“今天来了%s个人”,25); // 今天来了25个人; 用字符串的形成输出了,并没报错;
字符串不能转数字,数字却可以转成字符串;

占位符:%o object 对象占位符:
console.log(“今天来了%o人”,“{a:10}”); // 今天来了’{a:10}‘人; 对象也能出来;
console.log(“今天来了%o人”,“[1,2,3]”); // 今天来了’[1,2,3]'人; 数组也是对象;
console.log(“今天来了%o人”,1); // 今天来了1人;数字1,转换成包装类Number;

点位符:%c 样式 占位写样式:
console.log(“%c今天来了20人”, “color:red”); // 定个样式,从头开始生效;
在这里插入图片描述

加个定时器,变色的:
在这里插入图片描述

setInterval(x=>{
    console.log('%c我%c爱%c你', 
    'color:rgb(' + parseInt(Math.random() * 256) + ',' + parseInt(Math.random() * 256) + ',' + parseInt(Math.random() * 256) + ')',
    'color:rgb(' + parseInt(Math.random() * 256) + ',' + parseInt(Math.random() * 256) + ',' + parseInt(Math.random() * 256) + ')',
    'color:rgb(' + parseInt(Math.random() * 256) + ',' + parseInt(Math.random() * 256) + ',' + parseInt(Math.random() * 256) + ')');
},1000);

在这里插入图片描述

二、console.time()和console.timeEnd()=>查看执行所用时间

在这里插入图片描述

三、console.group()和console.groupEnd()=>让控制台输出的语句产生不同的层级嵌套关系

在这里插入图片描述

四、console.profile和console.profileEnd=>查看CPU使用相关信息

在这里插入图片描述

五、console.assert=>对输入的表达式进行断言,只有表达式为false时,才输出相应的信息到控制台

在这里插入图片描述
在这里插入图片描述

六、console.count=>统计代码被执行的次数

在这里插入图片描述
在这里插入图片描述

七、console.dir(object)=>将传入对象的属性,包括子对象的属性以列表形式输出

在这里插入图片描述

八、console.table()=>将传入的对象或数组以表格形式输出

在这里插入图片描述

九、console.trace()=>追踪函数的调用过程

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/669629.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

什么是HTTP 500内部服务器错误,要怎么修复

HTTP 500是一种原始的错误代码,它指示网站服务器在处理请求时发生了内部错误,不过具体错误原因是不确定的。一般情况下,这种错误通常是由服务器程序上的bug或者配置问题造成的。当服务器收到请求时,尝试执行它时,但是发…

使用径向基函数(RBF)神经网络对我们自己的excel数据进行分类---包括详细的python代码,RBFRegressor

文章目录 一、 径向基神经网络(Radial Basis Function Neural Network)是什么?二、径向基函数(RBF)神经网络对我们自己的excel数据进行分类---包括详细的python代码总结 一、 径向基神经网络(Radial Basis Function Neural Networ…

Go 将引入标准库 v2 版本,首个动手的是:math/rand/v2!

大家好,我是煎鱼。 最近 Go 核心团队负责人 Russ Cox(下称:rsc)发起了一项 “讨论”。希望正式开启 Go 标准库的 v2 版本,相当于老树发新芽了。 Go 标准库升级 v2 原因 这次会发起这个提案的最直接原因是:我…

编译原理笔记8:语法分析(2)上下文无关文法 CFG

目录 CFG 概述及其四元组表示产生式集合表示 CFGCFG,用推导,产生语言直接推导由 CFG 产生语言在?为啥从右往左叫规范?凭什么歧视左? 总结一下这些奇奇怪怪的东西 前几篇博客中说到的词法分析,做的是从 【xy…

驱动开发:内核注册表增删改查

注册表是Windows中的一个重要的数据库,用于存储系统和应用程序的设置信息,注册表是一个巨大的树形结构,无论在应用层还是内核层操作注册表都有独立的API函数可以使用,而在内核中读写注册表则需要使用内核装用API函数,如…

Spring Cloud灰度部署

1、背景(灰度部署) 在我们系统发布生产环境时,有时为了确保新的服务逻辑没有问题,会让一小部分特定的用户来使用新的版本(比如客户端的内测版本),而其余的用户使用旧的版本,那么这个在Spring Cloud中该如何…

第五届双态IT北京用户大会回顾 | 基于运维数据治理的数智化转型

专题演讲人:擎创科技CTO 葛晓波 文末附有本场专题演讲视频 ●前言 各行业的云原生发展程度各有不同,并不是所有业务应用都适合云原生的形态,如若过度追求云原生化反而会使得企业运维压力骤增,运维成本激增。 从数字化转型的角度…

软考:软件工程:软件定义,特点,软件生命周期,软件危机,软件开发模型

软考:软件工程: 提示:系列被面试官问的问题,我自己当时不会,所以下来自己复盘一下,认真学习和总结,以应对未来更多的可能性 关于互联网大厂的笔试面试,都是需要细心准备的 (1&#…

C++——vector容器模拟实现

目录 1. 基本成员函数 2. 默认成员函数 2.1 构造函数 2.2 析构函数 2.3 拷贝构造函数 2.4 赋值运算符重载函数 3. 容器访问相关函数 3.1 operator[ ]运算符重载 3.2 迭代器 3.3 范围for 4. vector空间增长问题 4.1 vector 容量和大小 4.2 vector扩容 4.3 重新定义…

均匀B样条采样从LiDAR数据中快速且鲁棒地估计地平面

文章:Fast and Robust Ground Surface Estimation from LiDAR Measurements using Uniform B-Splines 作者:Sascha Wirges, Kevin Rsch, Frank Bieder and Christoph Stiller 编辑:点云PCL 代码: https://github.com/KIT-MRT/poin…

全志V3S嵌入式驱动开发(编译器升级到7.5)

【 声明:版权所有,欢迎转载,请勿用于商业用途。 联系信箱:feixiaoxing 163.com】 看过我们文章的朋友都知道,前面为了做v3s的驱动,对linux kernel进行了两次升级。第一次升级是从4.10.y升级到4.14.y&#x…

【Python】open打开文件出现的错误解决

一、Python中关于打开open打开文件出现的错误解决 (第一种)UnicodeDecodeError: ‘utf-8’.......... (第二种)UnicodeDecodeError: ‘gbk’......... 二、问题解决 两种解决方式针对不同错误,实际应用中可以都试试…

PCB设计实验|第五周|LED显示电路PCB库设计|3月27日

目录 实验四 LED显示电路PCB库设计 一、实验原理 二、实验环境 三、实验结果 四、实验总结 实验四 LED显示电路PCB库设计 一、实验原理 LED(Light- Emitting-Diode中文意思为发光二极管)是一种能够将电能转化为可见光的半导体,它改变了白炽灯钨丝发光与节能…

裁剪图片软件有哪些?这些图片裁剪工具很好用

有哪些好用的图片裁剪软件呢?有时候,将一张大图缩小到更小的尺寸可以改善图片的质量,因为它可以减少像素和噪点。这对于那些需要在网上展示高质量图片的人来说尤其重要。裁剪后的图片可能更清晰、更锐利,并且更适合在各种设备上观…

Alex-Net 与 VGG-16

Alex-Net 由加拿大多伦多大学的 Alex Krizhevsky、Ilya Sutskever(G. E. Hinton 的两位博士生)和 Geoffrey E. Hinton 提出,网络名“Alex-Net”即 取自第一作者名。 下图所示是 Alex-Net 的网络结构,共含五层卷积层和三层全连接层。其中,Ale…

03.SELF-INSTRUCT+Alpaca

文章目录 前言泛读储备知识提示学习提示工程Promt Engineering答案工程 背景介绍研究SELF-INSTRUCT的动机研究意义&贡献 精读Overview种子任务步骤1:定义指令数据步骤2:自动指令数据生成步骤2.1指令生成步骤2.2指令分类步骤2.3实例生成步骤2.4筛选和…

19.组件之间传递数据

不同组件传递数据的时候,最好不要直接传递复杂数据类型(比如对象,数组) 前端需要处理的数据层级一般不会很多,需要在多处使用的数据一般会被放到数据库中 目录 1 组件的关系 2 父向子传递数据-props 3 子向父传递数据-自定义事件 4 …

分布式任务调度平台 XXL-JOB 实战

❤ 作者主页:欢迎来到我的技术博客😎 ❀ 个人介绍:大家好,本人热衷于Java后端开发,欢迎来交流学习哦!( ̄▽ ̄)~* 🍊 如果文章对您有帮助,记得关注、点赞、收藏、…

Scrum敏捷估算

无论是团队研发一款产品或者开发某一个项目,我们都需要回答“我们大概什么时间能够完成?”, 或者到某一个时间点,我们能够做到什么程度, 因此和传统的开发模式一样,我们在工作开始之前需要对我们需要做的事…

Linux Vim基本操作(文件的打开和编辑)完全攻略(有图有真相)

首先学习如何使用 Vim 打开文件。 Vim 打开文件 使用 Vim 打开文件很简单,例如在命令行模式下打开一个自己编写的文件 /test/vi.test,打开方法如下: [rootitxdl ~]# vim /test/vi.test 刚打开文件时 Vim 处于命令模式,此时文件…