JS中的三大类输出方式

说到输出方式咱们主要分为三大类：控制台输出类、window提示框类、页面插入类；接下来咱们主要介绍几种经常使用的

1、console：控制台输出类

控制在浏览器控制台输出的

一、console.log

• 定义：控制台输出
• 特色：输出任意数据类型的数据，控制台展现的也是对应的数据类型
• 举例：

let aa = {name: 'xiaozhima',age:18}
let bb = {name: 'lingling'}
console.log(aa,bb);
console.log({
    name: 'xiaozhima',
    age: '18'
})
复制代码

二、console.dir

• 定义：输出一个对象或者一个值的详细信息

  let aa = { name: 'xiaozhima', age: 18 }
  console.dir(aa);
  console.dir({
      name: 'xiaozhima',
      age: '18'
  })
  复制代码

  

• 与console.log的区别：console.log能够一次性输出多个值，可是dir不能够

  let aa = { name: 'xiaozhima', age: 18 }
  let bb = { name: 'lingling' }
  console.log(aa, bb);
  复制代码

  

  let aa = { name: 'xiaozhima', age: 18 }
  let bb = { name: 'lingling' }
  console.dir(aa, bb);//==>第二个变量未识别
  复制代码

• 实际状况中常常使用console.dir输出一个方法或一个数据类型的详细信息

三、console.warn

• 定义：以警告的方式输出

  console.warn(‘当前操做不规范’)
  复制代码

四、console.table

• 定义：把多维的JSON数据以表格形式输出

  let aa = { name: 'xiaozhima', age: 18 }
  console.table(aa)
  复制代码

五、console.time / console.timeEnd

• 定义：计算出time / timeEnd 中间全部程序执行所消耗的时间（预估时间，受到当前电脑性能的影响）

  console.time('AA');
  for (let i = 0; i < 99999999; i++) {}
  console.timeEnd('AA');
  复制代码

2、window提示框类

是在浏览器窗口中弹出一个提示框，提示框中输出指定的信息

一、alert

• 特色：
  • 一、须要等到 alert 弹出框，点击肯定关闭后，后面的代码才会执行（alert 会阻碍主线程的渲染）
  • alert 弹出的内容都会默认转换为字符串（调用 toString）

  alert('今天你们都很帅！');
  console.log(100);
  alert([10, 20, 30]); //=>数组转换为字符串的结果 "10,20,30"
  alert({name:'小芝麻'}); //=>普通对象转换为字符串的结果 "[object Object]"
  复制代码

  

• 点击确认后控制台才会弹出100

  

二、confirm

• 特色：建立一个变量，用来接收用户选择的结果

  • 用户点击肯定返回true
  • 用户点击取消返回false

  let flag = confirm('今天你们都好好学了吗？');
  console.log(flag);
  复制代码

  

• 点确认

  

• 与alert 区别：

  • 给用户提供了肯定和取消两种选择

三、prompt

• 特色：
  • 点击的是取消返回结果是null
  • 点击的是肯定，会把用户输入的缘由信息返回

  let reason = prompt('肯定要删除此信息吗？');
  console.log(reason);
  复制代码

  

• 输入123456后点确认

  

• 点取消

  

• 与confirm的区别：在confirm 的基础上给用户提供书写操做的缘由等信息

3、页面插入类

向页面指定容器中插入内容

一、document.write（不经常使用）

• 定义：在页面中直接写入
• 特色：和 alert 同样，写入的内容最后都会转换为字符串，而后写入

二、innerHTML

• 特色：
  • 插入的信息也会变成字符串
  • 基于这种方式会把以前容器中的内容给覆盖掉，想要追加，则采用+=的方式

  box.innerHTML = 'xiaozhima';//==>会覆盖原始的全部内容
  box.innerHTML += 'xiaozhima';//==>在原始内容上继续增长
  复制代码

三、innerText（与innerHTML基本相同）

• 与innerHTML惟一的区别：
  • innerHTML 可以把标签文本进行识别和渲染
  • innerText 会把全部内容都看成普通的文本

四、value

• 定义：给页面中的文本框赋值

  给页面中的文本框赋值
  let userName = document.getElementById('userName');
  userName.value = "我是在JS中插入的内容";
  复制代码

  

思惟导图以下：