con用法 js

Con 用法在 JavaScript 中的详细解析

在 JavaScript 中，con 并不是一个原生的关键字或内置对象，从上下文来看，你可能是想询问与console 相关的用法，因为console 是 JavaScript 中用于控制台输出的一个非常重要的对象，下面将详细介绍console 对象的常用方法和一些高级用法。

1.console.log()

基本用法

console.log() 是最常用的方法之一，用于在控制台输出信息。

console.log("Hello, World!");

输出多个参数

可以传递多个参数，这些参数会被转换为字符串并拼接在一起。

console.log("Age:", 25, "Name:", "John Doe");
// Output: Age: 25 Name: John Doe

格式化输出

可以使用模板字符串来格式化输出内容。

const name = "Jane";
const age = 30;
console.log(Name: ${name}, Age: ${age});
// Output: Name: Jane, Age: 30

2.console.error()

用于输出错误信息，通常在调试时使用。

console.error("This is an error message");

3.console.warn()

用于输出警告信息。

console.warn("This is a warning message");

4.console.info()

用于输出一般性的信息。

console.info("This is an informational message");

5.console.debug()

用于输出调试信息，默认情况下可能不会显示，需要在浏览器开发者工具中启用相应的设置。

console.debug("This is a debug message");

6.console.table()

用于以表格形式输出数据。

const data = [
    { name: "Alice", age: 25 },
    { name: "Bob", age: 30 }
];
console.table(data);

7.console.time() 和console.timeEnd()

用于测量代码执行时间。

console.time("timer");
// Some code to measure...
setTimeout(() => {
    console.timeEnd("timer");
}, 1000);

8.console.count()

用于计数，每次调用时计数器增加。

for (let i = 0; i < 5; i++) {
    console.count("loop iteration");
}
// Output: loop iteration: 1
//         loop iteration: 2
//         loop iteration: 3
//         loop iteration: 4
//         loop iteration: 5

9.console.trace()

用于输出当前的堆栈跟踪。

function exampleFunction() {
    console.trace();
}
exampleFunction();

10.console.clear()

用于清空控制台。

console.clear();

11.console.group() 和console.groupEnd()

用于在控制台中分组输出，便于阅读和管理。

console.group("Group 1");
console.log("Message inside group 1");
console.groupEnd();

12.console.groupCollapsed() 和console.groupEnd()

与console.group() 类似，但初始状态为折叠。

console.groupCollapsed("Collapsed Group");
console.log("Message inside collapsed group");
console.groupEnd();

13.console.dir()

用于输出 JavaScript 对象的详细信息。

const obj = { name: "John", age: 30 };
console.dir(obj);

14.console.assert()

用于断言表达式是否为真，如果为假则抛出错误。

console.assert(2 + 2 === 4, "Math is broken!");

15.console.memory()（非标准）

部分浏览器支持的内存使用统计功能。

if (window.performance && window.performance.memory) {
    const usedJSHeapSize = window.performance.memory.usedJSHeapSize;
    console.log(Used JS Heap Size: ${usedJSHeapSize / 1024 / 1024} MB);
} else {
    console.log("Memory API not supported");
}

FAQs

Q1:console.log() 和console.info() 有什么区别？

A1:console.log() 是最常用的通用日志输出方法，适用于大多数情况，而console.info() 专门用于输出一般性的信息，在某些开发环境中可能会有不同的处理方式（例如不同的颜色或图标），但两者在大多数现代浏览器中的行为是相似的。

Q2: 如何在控制台中查看对象的所有属性和方法？

A2: 可以使用console.dir() 方法来查看对象的所有属性和方法，这个方法会递归地列出对象的所有可枚举属性，包括继承的属性，示例如下：

const obj = { name: "Alice", age: 30, greet: function() { console.log("Hello"); } };
console.dir(obj);

这将会在控制台中详细展示obj 的所有属性和方法。