JavaScript简易菜单交互流程核心是函数封装菜单显示、输入处理与选项分发,配合prompt或readline获取输入,通过条件判断或对象映射执行操作,主循环持续运行直至用户选择退出。

在 JavaScript 中实现简易菜单交互流程,核心是用函数封装菜单显示、用户输入处理和选项分发逻辑,通常配合 prompt(浏览器)或 readline(Node.js)获取输入,再用条件判断或对象映射执行对应操作。
基础结构:显示菜单 + 获取选择
先定义一个字符串数组表示菜单项,用循环拼接显示;再用 prompt 获取用户输入(注意类型转换):
function showMenu() {
const options = ["1. 查看状态", "2. 修改设置", "3. 退出"];
console.log("\n=== 简易菜单 ===");
options.forEach(item => console.log(item));
const choice = prompt("请输入选项编号:");
return parseInt(choice, 10);
}
分支处理:用 if-else 或 switch 分发操作
拿到数字选择后,用 switch 清晰分发不同功能。每个 case 调用对应的小函数,保持主流程干净:
function handleChoice(choice) {
switch (choice) {
case 1:
console.log("当前状态:运行中");
break;
case 2:
const newSetting = prompt("请输入新设置值:");
console.log(`已设置为:${newSetting}`);
break;
case 3:
console.log("再见!");
return false; // 表示退出
default:
console.log("无效输入,请重试");
}
return true; // 继续循环
}
主循环:持续交互直到用户选择退出
把菜单显示和选择处理包进一个 while 循环,让交互可持续:
立即学习“Java免费学习笔记(深入)”;
function runMenu() {
let running = true;
while (running) {
const choice = showMenu();
running = handleChoice(choice);
}
}
runMenu(); // 启动菜单
进阶技巧:用对象映射替代硬编码分支
当选项变多时,用对象把数字键映射到函数更易维护:
const menuActions = {
1: () => console.log("状态检查中..."),
2: () => console.log("进入设置模式"),
3: () => {
console.log("退出程序");
return false;
}
};
function handleChoice(choice) {
if (menuActions[choice]) {
return menuActions[choice](); // 执行对应函数
}
console.log("无效选项");
return true;
}
不复杂但容易忽略细节:记得校验输入是否为有效数字、处理空输入、给用户提供明确的退出方式。


















