上QQ阅读APP看书，第一时间看更新
1.4.2 项目实训——Console控制台的使用
视频4
1．实验需求
调用console控制台的一系列方法实现以下输出。
（1）输出信息。
（2）调试输出。
（3）输出对象的层次结构。
（4）输出数据表格化。
（5）统计代码执行时间。
（6）分组输出信息。
（7）统计代码执行的次数。
（8）当表达式为false时，输出信息。
（9）用来追踪函数的调用轨迹。
（10）清除控制台所有内容。
2．实验步骤
<!DOCTYPE html>
<html lang=＂zh＂>
<head>
<meta charset=＂UTF-8＂>
<meta name=＂viewport＂ content=＂width=device-width, initial-scale=1.0＂>
<meta http-equiv=＂X-UA-Compatible＂ content=＂ie=edge＂>
<title>console的使用</title>
</head>
<body>
<script>
// 问题1：输出信息
console.log(＇Web前端开发＇);// 输出普通信息
console.info(＇Web前端开发＇);// 输出提示信息 (在lE上有区分)
console.error(＇Web前端开发＇);// 输出错误信息
console.warn(＇Web前端开发＇);// 输出警示信息
// 问题2：调试输出
/*此函数作用与 console.log 作用相同，均为调试输出。目前谷歌浏览器和Opera不支持console.debug()，在控制台中看不到效果。可在lE浏览器中看到效果
*/
console.debug(＂这是一行文字＂);
// 问题3：输出对象的层次结构
/*
此函数作用与console.log作用效果相同，但是打开节点时，两者之间存在差异。在观察节点时，dir的效果要明显好于log的
*/
var oBody = document.body;
console.dir(oBody)
// 问题4：输出数据表格化
var students = [{
name: ＇张三＇,
email: ＇zhangsan@163.com＇,
qq: 12345
},
{
name: ＇李四＇,
email: ＇lisi@126.com＇,
qq: 12346
},
{
name: ＇王五＇,
email: ＇wangwu@sina.com＇,
qq: 12347
},
{
name: ＇赵六＇,
email: ＇zhaoliu@gmail.com＇,
qq: 12348
}
];
console.table(students);
let person = {
name: ＇Harrison＇,
age: 20,
say() {
console.log(this.name + ＇很帅！＇);
}
}
console.table(person);
// 问题5：统计代码执行时间
console.time(＇统计for循环总循环时间＇);
for (var i = 0, count = 0; i < 99999; i++) {
count++;
}
console.timeEnd(＇统计for循环总循环时间＇);
console.time(＇统计while循环总循环时间＇);
var i = 0, count = 0;
while (i < 99999) {
count++;
i++;
}
console.timeEnd(＇统计while循环总循环时间＇);
// 问题6：分组输出信息
console.group(＇前端1组＇);
console.log(＇前端1组-1＇);
console.log(＇前端1组-2＇);
console.log(＇前端1组-3＇);
console.groupEnd();
console.group(＇Java2组＇);
console.log(＇Java2-1＇);
console.log(＇Java2-2＇);
console.log(＇Java2-3＇);
console.groupEnd();
// 问题7：统计代码执行的次数
function testFn() {
console.count(＇当前函数被调用的次数＇);
}
testFn();
testFn();
testFn();
for (i = 0; i < 5; i++) {
console.count(＇for循环执行次数＇);
}
// 问题8：当表达式为false时，输出信息
var flag = false;
console.assert(flag, ＇当flag为false时才输出！＇);
// 问题9：用来追踪函数的调用轨迹
var x = fn3(1, 1);
function fn3(a, b) {
return fn2(a, b);
}
function fn2(a, b) {
return fn1(a, b);
}
function fn1(a, b) {
return fn(a, b);
}
function fn(a, b) {
console.trace();// 运行后，会显示fn()的调用轨迹
return a + b;
}
// 问题10：清除控制台所有内容
// console.clear()
</script>
</body>
</html>
在控制台输出结果如图1-31所示。
图1-31 Console输出结果
【代码分析】
打开Chrome浏览器，按<F12>键，在控制台查看运行结果。代码中使用Console的不同方法输出不同的内容，注意输出内容的颜色及代表的含义。