“我报名参加金石计划1期挑战——瓜分10万奖池，这是我的第11篇文章，点击查看活动详情”

js常见输出方式

一、JS的输出方式

控制台输出

• console.log: 在控制台输出，优势：不会转换数据类型，输出什么格式的数据都可以。 console.log({name:’zhufeng’,btn}); 可一次输出多个值，输出多个值中间用逗号隔开
• console.dir: 详细输出 比log输出更加详细一些，只有在查看引用数据类型时能看出区别 一次只输出一个值
• console.table: 把多维的JSON数据展示成为一个表格
• console.warn: 以警告的方式输出
• console.time/timeEnd： 计算出time/timeEnd中间所有程序执行所消耗的时间（预估时间：受到当前电脑性能的影响） console.time('AA'); for (let i = 0; i < 99999999; i++) {} console.timeEnd('AA'); //=>AA: 218.3701171875ms

浏览器弹框

alert/confirm/prompt 都是把要输出的内容先转换为字符串 然后再输出

• alert：会以字符串输出 2.会阻碍代码的执行

  • 在浏览器中弹出一个提示框（提供确定按钮，点击确定弹框消失） 点击确定后，后面的代码才会执行（alert会阻碍主线程的渲染） 使用alert弹框提示信息，提示的内容最后都会被转化为字符串输出（调用了 toString这个方法） alert(1+1);//=>”2” alert({12,23});//=>”12,23” alert({name:’zhufeng’});//=>”[object Object]”
    • alert() 是一个内置函数 作用 把一个值变为字符串 然后让浏览器弹出一个框框，最后把字符串输出
    • alert() 把函数只想的就是这个事情 返回值是undefined

• confirm: 在alert基础上增加了让用户选择性的操作（提供两个按钮：确定和取消） （不常用） var Flag=confirm(‘are you sure delete this!’); alert(Fleg); 当用户点击确定按钮的时候，我们接收到的结果是true，点击的是取消按钮 我们接受到的结果是false，此后我们可以根据接受的结果做不同的处理即可

• prompt: 在confirm基础上增加让用户输入的效果（不常用） var flag=prompt(‘are you sure delete this!’); 用户点击取消按钮，我们获取到的结果是null，如果点击的是确定按钮，我们 将会获取到用户输入的内容（如果用户没有输入任何内容，获取的结果是空字 符串）。 真实项目中，尤其是需要样式精美的网站中，我们的提示框一般都是用自己封 装插件和组件来实现的，不用内置的（原生js组件）。

内容写入页面

• document.write向body中写入内容（内容转为字符串再写入）
• innerHTML/innerText向指定容器中插入内容。 基于这两种方式会把之前容器中的内容给覆盖掉，想要追加，则采用+=的方式 innerHTML可以识别字符串的标签并且渲染标签，而innerText会把所有内容都当做普通的文本 不能渲染标签
• value给页面中的文本框赋值

// 1.document.write
document.write('AA');
document.write(10);
document.write({
	name: '东方淼淼'
}); //=>"[object Object]"
// 2.**innerHTML/innerText**
// 想操作谁就先获取谁
let box = document.getElementById('box');
// 使用id获取元素
box.innerHTML = "东方";  //=>覆盖原始的所有内容
box.innerText = "淼淼";
// box.innerHTML += "东方"; //=>在原始内容上继续增加
// box.innerText += "淼淼";
// box.innerHTML = "<strong>我是重点内容</strong>";
// box.innerText = "<strong>我是重点内容</strong>";
// 3.value
// 给页面中的文本框赋值
let userName = document.getElementById('userName');
userName.value = "我是在JS中插入的内容";