一、JavaScript 核心输出语句详解
输出语句的核心作用，是将程序的运行结果、提示信息展示给用户或开发者，浏览器环境中最常用的输出方式分为「弹窗类输出」和「控制台类输出」两大类。
1.1 alert () 警告弹窗输出
alert() 是 JS 入门最基础的弹窗输出语句，用于向用户弹出一条仅可查看、不可交互的提示信息。
基础语法
alert(message);- 参数
message：必填，要展示的内容，可以是字符串、变量、表达式，会被自动转为字符串格式展示。
实战代码示例（对应示例代码片段）
// 定义变量
var name = "ggx";
// 弹窗输出变量的值
alert(name); // 页面弹出内容为 ggx 的警告框核心特性与适用场景
-
阻塞式执行：弹窗弹出后，后续的 JS 代码会暂停执行，页面渲染也会中断，直到用户点击「确定」关闭弹窗，代码才会继续运行。
-
仅支持纯文本展示，无法自定义弹窗样式、按钮逻辑，所有浏览器的 alert 弹窗均为系统默认样式。
-
适用场景：新手入门快速查看变量值、简单的用户消息提示、极简的代码调试；生产环境不推荐频繁使用，会严重影响用户体验。
1.2 console.log () 控制台打印输出
console.log() 是前端开发中最核心、最常用的输出语句，用于在浏览器开发者工具的「Console（控制台）」面板中打印内容，是前端调试的核心工具。
基础语法
console.log(message1, message2, ...);- 支持单个或多个参数，参数类型无限制：字符串、数字、布尔值、对象、数组、函数等所有 JS 数据类型均可完整打印。
实战代码示例（对应示例代码片段）
var name = "ggx";
// 1. 打印变量 console.log(name); // 控制台输出：ggx
// 2. 直接打印字符串字面量
console.log("ggx");
console.log("ggx");
// 拓展用法：多参数拼接、复杂类型打印
console.log("用户姓名：", name, " | 访问次数：", 3);
console.log({用户名: name, 年龄: 20});
// 完整打印对象结构核心特性与适用场景
-
非阻塞式执行：打印操作不会中断代码执行，也不会影响页面渲染与用户操作，对普通用户完全无感知。
-
支持完整展示复杂数据类型的结构，比如对象的属性、数组的元素、函数的源码，是 alert 无法实现的能力。
-
支持格式化输出、多参数拼接，调试灵活性极强。
-
适用场景：全流程的代码调试、开发阶段的日志输出、数据结构与运行结果的查看，是前端开发者日常开发的必备工具。
二、JavaScript 核心输入语句详解
输入语句的核心作用，是采集用户在页面上输入的数据，传递给 JS 程序进行处理，浏览器环境中最基础、最常用的输入语句为prompt()。
2.1 prompt () 输入弹窗语句
prompt() 会弹出一个带有文本输入框的对话框，引导用户输入内容，并将用户的输入结果返回给 JS 程序，是实现极简用户交互的核心语法。
基础语法
var 接收变量 = prompt(提示文本, 输入框默认值);-
第一个参数（必填）：弹窗中展示的提示文本，用于告知用户需要输入的内容。
-
第二个参数（可选）：输入框的默认填充内容，可省略。
实战代码示例（对应示例代码片段）
// 弹出输入框，提示用户输入姓名，将用户输入的结果赋值给变量n
var n = prompt("what is your name?");
// 将用户输入的内容打印到控制台
console.log(n);
// 弹窗展示用户输入的内容
alert(n);核心特性与返回值规则
-
阻塞式执行：弹窗弹出后，代码会暂停执行，直到用户点击「确定」或「取消」完成操作，代码才会继续运行。
-
返回值规则：
-
用户点击「确定」：返回输入框中的内容，无论用户输入的是数字还是文本，返回值始终是字符串类型。
-
用户点击「取消」或关闭弹窗：返回
null。
-
-
适用场景：新手入门的交互练习、极简的用户数据采集、快速获取用户输入的测试场景；生产环境通常使用自定义表单组件替代，避免阻塞页面与样式不可控的问题。
三、拓展：其他常用交互语句
除了上述核心的输入输出语句，浏览器还提供了confirm()确认弹窗语句，用于实现二次确认类的交互：
3.1 confirm () 确认弹窗语句
基础语法
var 接收变量 = confirm(提示文本);-
作用：弹出带有「确定」和「取消」两个按钮的确认框，用户点击按钮后返回对应的布尔值。
-
返回值：点击「确定」返回
true，点击「取消」返回false。 -
示例：
var isDelete = confirm("您确定要删除这条数据吗？");
if(isDelete){
console.log("执行删除操作");
}else{
console.log("取消删除");
}
四、JS 输入输出语句核心汇总速查表
为了方便快速查阅与记忆，将所有核心语句的关键信息整理为下表：
|---------------------------------|-------|------------------------|----------------------|--------|-----------------|
| 语句类型 | 基础语法 | 核心作用 | 返回值 | 是否阻塞代码 | 核心适用场景 |
| alert(message) | 弹窗输出 | 弹出警告框，向用户展示提示信息 | 无返回值 | 是 | 新手调试、极简消息提示 |
| console.log(msg1,msg2...) | 控制台输出 | 浏览器控制台打印内容，用于开发调试 | 无返回值 | 否 | 前端开发全流程调试、日志输出 |
| prompt(提示文本, 默认值) | 弹窗输入 | 弹出带输入框的弹窗，采集用户输入 | 确定返回输入字符串，取消返回 null | 是 | 极简用户输入采集、入门交互练习 |
| confirm(提示文本) | 确认交互 | 弹出带确认 / 取消按钮的弹窗，获取用户选择 | 确定返回 true，取消返回 false | 是 | 操作二次确认、风险操作校验 |
五、新手避坑指南与注意事项
-
全局变量 name 的坑 示例代码中使用了
var name="ggx"，这里需要特别注意：在浏览器全局作用域下，name是window对象的内置属性，默认强制为字符串类型，若赋值非字符串类型会被自动转为字符串，极易引发变量异常。新手开发时，尽量避免使用 name 作为全局变量名。 -
阻塞式语句的生产环境限制
alert、prompt、confirm均为阻塞式语句，会中断页面渲染与代码执行，严重影响用户体验，且样式无法自定义。生产环境中，消息提示、用户输入、二次确认等需求，均推荐使用 UI 组件库的自定义弹窗 / 表单组件实现。 -
prompt 返回值的类型问题
prompt的返回值永远是字符串或 null ，即使用户输入的是数字，也会返回字符串格式的数字。若需要进行数值运算，必须先通过Number()进行类型转换，否则会出现字符串拼接的异常结果。 示例var age = prompt("请输入您的年龄"); // 错误写法：age是字符串，会执行字符串拼接，而非数值加法 console.log(age + 1); // 正确写法：先转为数字类型 console.log(Number(age) + 1); -
console.log 复杂类型打印的快照坑 当使用
console.log打印对象、数组等引用类型数据时，浏览器控制台保存的是数据的引用，展开查看时会展示数据的最新值 ，而非打印时的快照值。调试时若需要固定打印时的值，可先通过JSON.parse(JSON.stringify(数据))深拷贝后再打印。