说到输出方式我们主要分为三大类:控制台输出类、window提示框类、页面插入类;接下来我们主要介绍几种常用的
# 一、console:控制台输出类
控制在浏览器控制台输出的
# 1、console.log
- 定义:控制台输出
- 特点:输出任意数据类型的数据,控制台展示的也是对应的数据类型
- 举例:
let aa = {name: 'xiaozhima',age:18}
let bb = {name: 'lingling'}
console.log(aa,bb);
console.log({
name: 'xiaozhima',
age: '18'
})
# 2、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输出一个方法或一个数据类型的详细信息
# 3、console.warn
定义:以警告的方式输出
console.warn(‘当前操作不规范’)
# 4、console.table
- 定义:把多维的JSON数据以表格形式输出
let aa = { name: 'xiaozhima', age: 18 } console.table(aa)
# 5、console.time / console.timeEnd
- 定义:计算出time / timeEnd 中间所有程序执行所消耗的时间(预估时间,受到当前电脑性能的影响)
console.time('AA'); for (let i = 0; i < 99999999; i++) {} console.timeEnd('AA');
# 二、window提示框类
是在浏览器窗口中弹出一个提示框,提示框中输出指定的信息
# 1、alert
- 特点:
- 1、需要等到 alert 弹出框,点击确定关闭后,后面的代码才会执行(alert 会阻碍主线程的渲染)
- alert 弹出的内容都会默认转换为字符串(调用 toString)
alert('今天大家都很帅!'); console.log(100); alert([10, 20, 30]); //=>数组转换为字符串的结果 "10,20,30" alert({name:'小芝麻'}); //=>普通对象转换为字符串的结果 "[object Object]"
- 点击确认后控制台才会弹出100
# 2、confirm
特点:创建一个变量,用来接收用户选择的结果
- 用户点击确定返回true
- 用户点击取消返回false
let flag = confirm('今天大家都好好学了吗?'); console.log(flag);
点确认
与alert 区别:
- 给用户提供了确定和取消两种选择
# 3、prompt
- 特点:
- 点击的是取消返回结果是null
- 点击的是确定,会把用户输入的原因信息返回
let reason = prompt('确定要删除此信息吗?'); console.log(reason);
- 输入123456后点确认
- 点取消
- 与confirm的区别:在confirm 的基础上给用户提供书写操作的原因等信息
# 三、页面插入类
向页面指定容器中插入内容
# 1、document.write(不常用)
- 定义:在页面中直接写入
- 特点:和 alert 一样,写入的内容最后都会转换为字符串,然后写入
# 2、innerHTML
- 特点:
- 插入的信息也会变成字符串
- 基于这种方式会把之前容器中的内容给覆盖掉,想要追加,则采用
+=
的方式
box.innerHTML = 'xiaozhima';//==>会覆盖原始的所有内容 box.innerHTML += 'xiaozhima';//==>在原始内容上继续增加
# 3、innerText(与innerHTML基本相同)
- 与innerHTML唯一的区别:
- innerHTML 能够把标签文本进行识别和渲染
- innerText 会把所有内容都当作普通的文本
# 4、value
- 定义:给页面中的文本框赋值
给页面中的文本框赋值 let userName = document.getElementById('userName'); userName.value = "我是在JS中插入的内容";
思维导图如下: