qidao123.com技术社区-IT企服评测·应用市场

标题: 【javascript】console对象 [打印本页]

---

作者: 拉不拉稀肚拉稀    时间: 2025-5-8 10:59
标题: 【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')

1. Child method called                                                                                                        index.vue:194
2. changePage                                        @ index.vue:194
3. secondItemChange                         @ index.vue:83
4. itemClick                                        @ index.vue:155
5. click                                                @ index.vue:243
6. Child method called                                                                                                        index.vue:194
7. changePage                                        @ index.vue:194
8. setFormParams                                @ index.vue:184
9. getSearch                                        @ index.vue:74
10. search                                                @ SearchBox.vue:157
11. initParameters                                @ SearchBox.vue:154
12. mounted                                                @ SearchBox.vue:123
13. Promise.then               
14. itemClick                                        @ index.vue:144
15. 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））。

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

复制代码

1. console.table([
2.   ['John', 'Smith'],
3.   ['Jane', 'Doe'],
4.   ['Emily', 'Jones']
5. ])

复制代码

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

复制代码

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

复制代码

1. console.table(
2.   [
3.     { name: 'John', age: 30, city: 'New York' },
4.     { name: 'Anna', age: 22, city: 'London' },
5.     { name: 'Mike', age: 32, city: 'Chicago' }
6.   ],
7.   ['name', 'age']
8. )

复制代码

console：log() 静态方法

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

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

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

复制代码

输出：

输出多色的信息

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

复制代码

输出：

简朴说一下占位符的用法

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

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

示例代码

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

复制代码

自定义样式占位符输出：

多个占位符

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

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

复制代码

留意事项

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

console：time() 静态方法

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

1. console.time('Run')
2. for (let i = 0; i < 4; i++) {
3.   // 代码部分
4.   console.timeLog('Run')
5. }
6. console.timeEnd('Run')
7. //输出： Run: 0.0009765625 ms        --timeLog输出
8. //                Run: 0.072998046875 ms        --timeLog输出
9. //                Run: 0.14501953125 ms        --timeLog输出
10. //                Run: 0.217041015625 ms        --timeLog输出
11. //                Run: 0.287109375 ms                --timeEnd输出

复制代码

竣事

console的方法还有许多，这里不一一介绍了，如果以后有效到的地方再行补充。
vue2 父子组件生命周期实行次序

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

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

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

• 子组件 beforeUpdate：
  
  
  
  • 子组件即将更新，数据发生变革，但 DOM 尚未更新。
    
  
  
• 子组件 updated：
  
  
  
  • 子组件更新完成，DOM 已经更新。
    
  
  
• 父组件 beforeUpdate：
  
  
  
  • 父组件即将更新，数据发生变革，但 DOM 尚未更新。
    
  
  
• 父组件 updated：
  
  
  
  • 父组件更新完成，DOM 已经更新。
    
  
  

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

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

总结

• 初始化次序：父组件先于子组件初始化，子组件在父组件的挂载过程中完本钱身的生命周期。
  
• 更新次序：子组件先于父组件更新，因为子组件的更新会影响父组件的 DOM。
  
• 销毁次序：子组件先于父组件销毁，确保子组件的全部资源在父组件销毁前已经被清理。
  

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

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

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

---

欢迎光临 qidao123.com技术社区-IT企服评测·应用市场 (https://dis.qidao123.com/)

Powered by Discuz! X3.4