JavaScript 输出

张

张建站

2026/4/12 11:19:15

10分钟阅读

JavaScript 输出学习笔记详细版一、JavaScript 输出方式概览JavaScript 提供了多种输出方式适用于不同的场景控制台输出- 用于调试和开发网页内容输出- 用于用户界面展示弹窗输出- 用于简单交互文档写入- 用于动态生成内容二、控制台输出Console1.console.log()- 基础输出console.log(Hello, World!);console.log(42);console.log(true);console.log({name:张三,age:25});console.log([1,2,3,4,5]);特点最常用的调试输出方法可以输出任何数据类型在浏览器开发者工具的控制台中显示2.console.info()- 信息输出console.info(这是一条信息消息);特点与log()类似但通常带有信息图标用于一般性信息提示3.console.warn()- 警告输出console.warn(这是一个警告信息);console.warn(变量 user 可能未定义);特点显示为黄色警告图标用于提示潜在问题但不影响程序运行4.console.error()- 错误输出console.error(发生了一个错误);console.error(newError(数据库连接失败));特点显示为红色错误图标用于报告错误信息会显示错误堆栈跟踪5.console.debug()- 调试输出console.debug(调试信息函数开始执行);特点通常被过滤掉只在调试模式下显示用于详细的调试信息6.console.table()- 表格输出constusers[{name:张三,age:25,city:北京},{name:李四,age:30,city:上海},{name:王五,age:28,city:广州}];console.table(users);console.table({a:1,b:2,c:3});特点以表格形式展示数组或对象更清晰地查看数据结构7.console.time()和console.timeEnd()- 计时器console.time(循环执行时间);letsum0;for(leti0;i1000000;i){sumi;}console.timeEnd(循环执行时间);特点测量代码执行时间输出格式标签耗时8.console.count()- 计数器functionprocessUser(userId){console.count(处理用户${userId});// 处理逻辑}processUser(1);processUser(1);processUser(2);processUser(1);特点统计函数或代码块执行次数自动递增计数器9.console.group()和console.groupEnd()- 分组输出console.group(用户信息);console.log(姓名张三);console.log(年龄25);console.log(城市北京);console.group(联系方式);console.log(邮箱zhangsanexample.com);console.log(电话13800138000);console.groupEnd();console.groupEnd();特点将相关输出分组可以折叠/展开查看10.console.trace()- 堆栈跟踪functionfunctionA(){functionB();}functionfunctionB(){functionC();}functionfunctionC(){console.trace(追踪当前调用栈);}functionA();特点显示当前代码执行的调用栈用于调试复杂的调用链11.console.assert()- 断言constage15;console.assert(age18,年龄必须大于等于 18 岁);constisValidtrue;console.assert(isValid,验证失败);特点条件为 false 时输出错误信息条件为 true 时不输出任何内容12.console.clear()- 清空控制台console.clear();特点清空控制台内容保留部分浏览器的历史记录三、网页内容输出1. 修改 DOM 元素内容innerHTML- 设置 HTML 内容// 获取元素constelementdocument.getElementById(demo);// 设置 HTML 内容element.innerHTMLh1你好世界/h1p这是一个段落/p;// 动态生成内容constusers[张三,李四,王五];letuserListul;users.forEach(user{userListli${user}/li;});userList/ul;document.getElementById(userList).innerHTMLuserList;注意可以解析 HTML 标签存在 XSS 安全风险避免直接输出用户输入textContent- 设置纯文本内容constelementdocument.getElementById(demo);element.textContenth1你好/h1;// 会显示为纯文本不会解析 HTML特点安全不会解析 HTML性能优于 innerHTML推荐用于输出用户输入innerText- 设置可见文本内容constelementdocument.getElementById(demo);element.innerText你好世界;特点考虑 CSS 样式如 display: none 的元素不会显示保留换行和空格格式性能略低于 textContent2. 创建和插入元素// 创建新元素constnewDivdocument.createElement(div);newDiv.classNamecontainer;newDiv.innerHTMLp新创建的段落/p;// 插入到页面中document.body.appendChild(newDiv);// 插入到特定位置constcontainerdocument.getElementById(container);constnewParagraphdocument.createElement(p);newParagraph.textContent插入的段落;// 插入到容器末尾container.appendChild(newParagraph);// 插入到特定位置之前constreferenceNodecontainer.firstChild;container.insertBefore(newParagraph,referenceNode);// 替换节点constoldNodedocument.getElementById(old);constnewNodedocument.createElement(div);newNode.textContent新节点;container.replaceChild(newNode,oldNode);3. 修改元素属性constimgdocument.getElementById(myImage);// 修改 src 属性img.srcnew-image.jpg;// 修改 classimg.classNamenew-class another-class;// 修改 styleimg.style.width200px;img.style.heightauto;img.style.border1px solid #ccc;// 修改自定义属性img.setAttribute(data-id,123);img.setAttribute(data-name,示例图片);// 获取属性constsrcimg.getAttribute(src);constdataIdimg.getAttribute(data-id);4. 使用document.write()不推荐// 在页面加载时写入内容document.write(h1你好世界/h1);document.write(p这是一个段落/p);// 写入多个内容document.write(ul);document.write(li项目 1/li);document.write(li项目 2/li);document.write(/ul);注意如果在页面加载完成后调用会覆盖整个页面不推荐在现代开发中使用仅用于简单的测试或学习场景四、弹窗输出1.alert()- 警告框alert(这是一个警告框);alert(用户名username);alert(欢迎回来${userName});特点模态对话框阻塞代码执行只有一个确定按钮用于重要提示2.confirm()- 确认框constresultconfirm(确定要删除吗);if(result){console.log(用户点击了确定);}else{console.log(用户点击了取消);}特点返回布尔值true 表示确定false 表示取消有确定和取消两个按钮用于需要用户确认的操作3.prompt()- 提示框constnameprompt(请输入您的姓名,默认姓名);if(name!null){console.log(用户输入name);}else{console.log(用户取消了输入);}特点返回用户输入的字符串取消时返回 null可以设置默认值用于获取用户输入五、实际应用场景示例1. 调试复杂对象constuserData{id:1,name:张三,profile:{age:25,address:{city:北京,district:朝阳区}},hobbies:[阅读,游泳,编程]};// 格式化输出console.log(JSON.stringify(userData,null,2));// 表格形式console.table(userData);// 分组输出console.group(用户详情);console.log(基本信息:,userData.name,userData.id);console.group(详细信息);console.log(年龄:,userData.profile.age);console.log(地址:,userData.profile.address.city);console.groupEnd();console.groupEnd();2. 性能测试// 测试数组操作性能console.time(数组操作);constarr[];for(leti0;i100000;i){arr.push(i);}constfilteredarr.filter(xx%20);constmappedfiltered.map(xx*2);console.timeEnd(数组操作);console.log(结果数量:,mapped.length);3. 错误处理与日志functiondivide(a,b){if(b0){console.error(除数不能为 0,{a,b});thrownewError(除数不能为 0);}console.debug(计算${a}/${b});returna/b;}try{constresultdivide(10,0);console.log(结果:,result);}catch(error){console.error(发生错误:,error.message);console.trace(错误堆栈);}4. 动态内容生成functionrenderUserList(users){constcontainerdocument.getElementById(userList);if(!users||users.length0){container.innerHTMLp暂无用户数据/p;return;}lethtmlul classuser-list;users.forEach((user,index){htmlli classuser-item>${index} span classuser-name${escapeHtml(user.name)}/span span classuser-age${user.age}岁/span button onclickeditUser(${index})编辑/button /li;});html/ul;container.innerHTMLhtml;}// XSS 防护functionescapeHtml(text){constdivdocument.createElement(div);div.textContenttext;returndiv.innerHTML;}六、最佳实践1. 开发环境 vs 生产环境// 创建日志工具constlogger{debug:(...args){if(process.env.NODE_ENVdevelopment){console.debug(...args);}},info:(...args)console.info(...args),warn:(...args)console.warn(...args),error:(...args)console.error(...args)};// 使用logger.debug(调试信息);// 生产环境不会输出logger.error(错误信息);// 始终输出2. 避免滥用 console// ❌ 不推荐console.log(函数开始);console.log(变量 a:,a);console.log(变量 b:,b);console.log(函数结束);// ✅ 推荐console.log(函数执行:,{a,b});// 或使用分组console.group(函数执行详情);console.log(变量 a:,a);console.log(变量 b:,b);console.groupEnd();3. 安全输出// ❌ 不安全element.innerHTMLuserInput;// ✅ 安全element.textContentuserInput;// 或element.innerHTMLescapeHtml(userInput);4. 性能考虑// ❌ 性能差for(leti0;i10000;i){console.log(i);}// ✅ 性能好constlogs[];for(leti0;i10000;i){logs.push(i);}console.log(logs);七、浏览器兼容性方法ChromeFirefoxSafariEdgeconsole.log✅✅✅✅console.table✅✅✅✅console.time✅✅✅✅console.group✅✅✅✅console.assert✅✅✅✅八、总结JavaScript 提供了丰富的输出方式选择合适的输出方法可以提高开发效率和用户体验开发调试使用console系列方法用户界面使用 DOM 操作修改页面内容简单交互使用alert、confirm、prompt性能优化避免不必要的输出合理使用分组和格式化安全考虑优先使用textContent而非innerHTML输出用户输入掌握这些输出技巧能让你的 JavaScript 开发更加高效和安全