1.6 JS中常用的几种输出方式
2020-06-30 本文已影响0人
NULL_2022
JS中常用的输出方式
- console 控制在浏览器控制台输出的
- console.log() 控制台输出日志
- console.dir() 控制台详细输出
- console.table() 把数据以表格的形式输出在控制台
- console.time() / timeEnd() 计算某一个程序消耗的时间
- console.warn() 输出警告信息
console.log : 在控制台输出，特点是:输出任意数据类型的数据，控制台展示的也是对应的数据类型
console.log(1);//=>输出:1
console.log('aa');//=>输出:aa
console.log({"name":"小李"});//=>输出:{name: "小李"}
console.dir输出一个对象或者一个值的详细信息;console.log可以一次性输出多个值，但是dir不可以
function func(){}
console.log(func);//=>输出:func(){}
console.dir(func);//=>输出:func()，且可以展开查看该对象里面的详细信息
console.log(func,10,20);//=>输出:func(){} 10 20
console.dir(func,10,20);//=>输出:func()
console.warn 以警告形式输出
//在控制台以警告形式输出
console.warn("当前操作不规范！");
console.table 可以把多维的JSON数据以表格形式输出
let arr =[{
id:1,
name:'张三'
},{
id:2,
name:'李四'
},{
id:3,
name:'王五'
}];
console.table(arr);
console.time/timeEnd 计算time/timeEnd中间所有程序执行所消耗的时间（预估时间：受到当前电脑性能的影响）
console.time('AA');
for(let i=0;i<999999;i++){}
console.timeEnd('AA');//=> 输出: AA: 2.074951171875ms
window提示框
- alert() 提示框
- confirm() 确认取消提示框
- prompt() 在confirm基础上多加一个原因
alert
/*
alert是在浏览器窗口中弹出一个提示框，提示框中输出指定的信息
+ 需要等到alert弹出框，点击确定关闭后，后面的代码才会继续执行（专业说法：alert会阻碍主线程的渲染）
+ alert输出去的内容会默认转化成字符串,默认调用的是toString，弹框中默认不显示"",但输出结果一定是字符串
*/
alert("今天天气真好！");//=> 输出"今天天气真好！"
alert([10,20,30]);//=> 输出:"10,20,30" alert输出去的内容会默认转化成字符串
alert({name:"小李"});//=>输出:"[object Object]" 普通对象转换为字符串的结果 "[object Object]"
alert(1);//=> 输出:"1"
alert(null);//=>输出:"null"
confirm
/*
confirm相对于alert来说，给用户提供了确定和取消两种选择
+ 创建一个变量，用来接收用户选则的结果：当点击确定返回true,点击取消则返回false
*/
let flag = confirm("今天是晴天吗？");
cosnole.log(flag);//如果flag是true则用户点击的是确定，若是false则点击的是取消
prompt
/*
prompt在confirm的基础上给用户提供书写操作的原因等信息
+ 创建一个变量，用来接收用户的结果，如果点击取消返回null,如果确定，则会返回用户输入的原因信息
*/
let res = prompt("确定要删除此信息吗？");
console.log(res);//如果返回null,说明点击的是取消，反之则点击的确定，返回输入的信息
向页面指定容器插入内容
- docment.write 向页面中输入内容
- innerHTML / innerText 向页面指定容器中输入内容
- value 向页面表单元素中输入内容
- ……
document.write : 把内容写到页面中
/*
把页面写到页面中:和alert一样，写入的内容最后都会转化为字符串，然后再写入
*/
document.write('AA');
document.write(10);
document.write({name:"小李"});//=> [object,Object]
innerHTML / innerText
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box{
width:200px;
height:200px;
border:1px solid lightblue;
background:lightcoral;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
/*
想要操作那个元素，就先获取到哪个元素:我们可以根据元素的ID获取到这个元素对象
document.getElementById: document=>限定在整个文档中（上下文），get=>获取 Element=>元素 By=>通过（在整个文档中，基于元素的ID获取到这个元素）
创建有一个变量，用来接收 document.getElementById('box')的结果
*/
let box = document.getElementById('box');
console.log(box);//=>输出结果 <div id="box"></div>
/*
innerHTML / innerText: 向指定容器中插入内容(插入的信息也会变为字符串再插入)
+ 基于这两种方式把之前容器中的内容覆盖掉，想要追加，需要采用 += 的方式
+ innerHTML能够把标签文本进行识别和渲染，而innerText会把所有内容当做普通的文本
*/
box.innerHTML = "JavaScript"; //覆盖原始内容
box.innerText += "hello JS!";//=> 在原始内容上继续增加
box.innerHTML += '<strong>hello JavaScript</strong>';
box.innerText += '<strong>hello JavaScript</strong>';
</script>
</body>
</html>
value
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text" id="userName">
<script>
//给页面中的文本框赋值
let userName = document.getElementById('userName');
userName.value = "我是在JS中插入的内容";
</script>
</body>
</html>
