【javascript】console对象

console 对象提供了浏览器控制台调试的接口（如：Firefox 的 Web console）。在不同浏览器上它的工作方式可能不一样，但通常都会提供一套共性的功能。———— MDN Web Docs console

前端开发工作中最常用到的方法应当就属于console.log了吧。但是我们开始先不说它，我们从console.trace方法开始。

console：trace() 静态方法

console 的 trace() 方法向 Web 控制台输出一个堆栈跟踪。我写这篇文章也是因为它，vue2项目搜索列表页由子组件搜索框页面，子组件列表页面以及他们的父组件页面组成。具体逻辑略但其中有个操作使changePage方法被调用了两次，这也导致了向后端请求两次数据。问题不大，但是这里多一次请求，哪里又多一次请求，无形中也会消耗很多的资源。既然发现了，那就小改一下吧。在changePage方法里输出console.trace('Child method called')

Child method called													index.vue:194 
changePage					@ index.vue:194
secondItemChange	 		@ index.vue:83
itemClick					@ index.vue:155
click						@ index.vue:243
Child method called													index.vue:194 
changePage					@ index.vue:194
setFormParams				@ index.vue:184
getSearch					@ index.vue:74
search						@ SearchBox.vue:157
initParameters				@ SearchBox.vue:154
mounted						@ SearchBox.vue:123
Promise.then		
itemClick					@ index.vue:144
click						@ index.vue:243

以上输出可以很清楚的看出changePage方法分别由index.vue(父组件)页面的itemClick方法（点击的时候调用，测试时走这里是正确的）和SearchBox.vue(子组件)的initParameters方法（mounted生命周期调用，要找出的多余调用）调用，接下来的事情就简单多了（将initParameters方法从子组件的mounted移动到父组件的mounted，这里可以查看vue2 父子组件生命周期执行顺序，写在文章最后）。

console：table() 静态方法

console.table将数据以表格的形式显示。

这个方法需要一个必须参数 data，data 必须是一个数组或者是一个对象；还可以使用一个可选参数 columns。

它会把数据 data 以表格的形式打印出来。数组中的每一个元素（或对象中可枚举的属性）将会以行的形式显示在表格中。

表格的第一列是 index。如果数据 data 是一个数组，那么这一列的单元格的值就是数组的索引。如果数据是一个对象，那么它们的值就是各对象的属性名称。注意（在 FireFox 中）console.table 被限制为只显示 1000 行（第一行是被标记的索引（原文：labeled index））。

console.table(['apples', 'oranges', 'bananas'])

console.table([['John', 'Smith'],['Jane', 'Doe'],['Emily', 'Jones']
])

console.table(['apples', 'oranges', 'bananas'], ['name', 'age'])

console.table({ name: 'John', age: 30, city: 'New York' })

console.table([{ name: 'John', age: 30, city: 'New York' },{ name: 'Anna', age: 22, city: 'London' },{ name: 'Mike', age: 32, city: 'Chicago' }],['name', 'age']
)

console：log() 静态方法

console.log() 方法向 Web 控制台输出一条信息。这条信息可能是单个字符串（包括可选的替代字符串），也可能是一个或多个对象。这个方法日常开发中用的可太普遍了，不再赘述。我们说下它输出带有颜色的文本好了。

输出单色的信息

console 能够解析占位符，总的就支持 5 个占位符 %o，%s，%d，%f，%c。
%c 指令将 CSS 样式应用于控制台输出，指令前的文本不会受到影响，但指令后的文本将使用参数中的 CSS 声明进行样式设置。

console.log('123%c456', 'color: red;')

输出：

输出多色的信息

console.log(`%c123%c456`, 'color: blue;', 'color: green;')

输出：

简单说一下占位符的用法

在 JavaScript 中，console.log 支持使用占位符来格式化输出内容，这使得输出信息更加清晰和易于阅读。以下是一些常见的占位符以及它们的用法：

常见占位符

• %s：占位符代表一个字符串。
• %d 或 %i：占位符代表一个整数。
• %f：占位符代表一个浮点数。
• %o 或 %O：占位符代表一个对象，可以查看对象的结构。
• %c：占位符允许使用 CSS 样式来格式化输出内容。

示例代码

// 字符串占位符
console.log('Name: %s, Age: %d', 'John', 25);
//输出：Name: John, Age: 25// 整数占位符
console.log('The answer is %d.', 42);
//输出：The answer is 42.// 浮点数占位符
console.log('Pi: %f', 3.14159);
//输出：Pi: 3.14159// 对象占位符
console.log('User: %o', { name: 'Alice', age: 30 });
//输出：User: {name: 'Alice', age: 30}// 自定义样式占位符
console.log('%cCustom styled text', 'font-size: 20px; color: red; background: yellow;');

自定义样式占位符输出：

多个占位符

可以同时使用多个占位符，依次传递参数即可：

console.log('Name: %s, Age: %d, Score: %f', 'Jane', 28, 88.5);
// 输出：Name: Jane, Age: 28, Score: 88.5

注意事项

• 占位符的顺序必须与传递的参数顺序一致。
• 如果传递的参数类型与占位符类型不匹配，可能会导致意外的输出。
• 使用 %c 时，第二个参数为 CSS 样式字符串，可以包含多个样式属性。
  通过使用这些占位符，可以使控制台输出更加组织化和易于理解。

console：time() 静态方法

console.time() 方法是作为计算器的起始方法。
该方法一般用于测试程序执行的时长。
console.timeEnd() 方法为计算器的结束方法，并将执行时长显示在控制台。
如果一个页面有多个地方需要使用到计算器，可以添加标签参数来设置。
console.timeLog() 在控制台输出计时器的值，可以添加标签参数，如果没有传入 label 参数，则以 default: 作为引导返回数据，如果添加了label参数，会以 label: 作为引导返回数据。

console.time('Run')
for (let i = 0; i < 4; i++) {// 代码部分console.timeLog('Run')
}
console.timeEnd('Run')
//输出： Run: 0.0009765625 ms	--timeLog输出
//		Run: 0.072998046875 ms	--timeLog输出
//		Run: 0.14501953125 ms	--timeLog输出
//		Run: 0.217041015625 ms	--timeLog输出
//		Run: 0.287109375 ms		--timeEnd输出

结束

console的方法还有很多，这里不一一介绍了，如果以后有用到的地方再行补充。

vue2 父子组件生命周期执行顺序

在 Vue 2 中，父子组件的生命周期执行顺序遵循一定的规则，这些规则决定了组件在初始化、更新和销毁时各个生命周期钩子的执行时机。以下是父子组件生命周期的执行顺序：

父子组件初始化时的生命周期顺序（从父到子）

1. 父组件 beforeCreate：
   • 父组件开始初始化，此时组件实例刚刚创建，数据观测（data observer）和事件/挂载相关操作尚未初始化。
2. 父组件 created：
   • 父组件实例已经创建完成，数据观测、事件/挂载相关操作已经初始化，但 DOM 还未生成。
3. 父组件 beforeMount：
   • 父组件即将挂载，此时模板编译完成，但尚未渲染到页面上。
4. 子组件 beforeCreate：
   • 子组件开始初始化，此时子组件实例刚刚创建，数据观测和事件/挂载相关操作尚未初始化。
5. 子组件 created：
   • 子组件实例已经创建完成，数据观测、事件/挂载相关操作已经初始化。
6. 子组件 beforeMount：
   • 子组件即将挂载，模板编译完成，但尚未渲染到页面上。
7. 子组件 mounted：
   • 子组件挂载完成，DOM 已经渲染到页面上。
8. 父组件 mounted：
   • 父组件挂载完成，此时子组件也已经挂载完成，父组件的 DOM 包含子组件的 DOM。

父子组件更新时的生命周期顺序（从子到父）

1. 子组件 beforeUpdate：
   • 子组件即将更新，数据发生变化，但 DOM 尚未更新。
2. 子组件 updated：
   • 子组件更新完成，DOM 已经更新。
3. 父组件 beforeUpdate：
   • 父组件即将更新，数据发生变化，但 DOM 尚未更新。
4. 父组件 updated：
   • 父组件更新完成，DOM 已经更新。

父子组件销毁时的生命周期顺序（从子到父）

1. 子组件 beforeDestroy：
   • 子组件即将销毁，组件实例仍然存在，但即将被销毁。
2. 子组件 destroyed：
   • 子组件销毁完成，组件实例已经被销毁，所有指令和事件监听器都被移除。
3. 父组件 beforeDestroy：
   • 父组件即将销毁，组件实例仍然存在，但即将被销毁。
4. 父组件 destroyed：
   • 父组件销毁完成，组件实例已经被销毁，所有指令和事件监听器都被移除。

总结

• 初始化顺序：父组件先于子组件初始化，子组件在父组件的挂载过程中完成自己的生命周期。
• 更新顺序：子组件先于父组件更新，因为子组件的更新会影响父组件的 DOM。
• 销毁顺序：子组件先于父组件销毁，确保子组件的所有资源在父组件销毁前已经被清理。

这种顺序设计是为了确保在组件树中，父组件可以控制子组件的初始化和销毁，同时在更新时子组件的更新先于父组件，以保证 DOM 的正确性。

参考

console
5分钟教你使用 console.log 输出五彩斑斓的黑
console.time()
kimi AI