js中常用的输出方式js中常用的输出方式

46 阅读 0 评论 31 点赞

我是靠谱客的博主笑点低毛豆，最近开发中收集的这篇文章主要介绍js中常用的输出方式js中常用的输出方式，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

js中常用的输出方式

1、console控制台：在浏览器控制台输出

console.log; =>可以输出任意数据类型，控制台展示的类型也是对应的数据类型
```
console.log('a',10,{name:'Teal'},[10,20],false); // =>a 10 {name: "Teal"} (2) [10, 20] false
```

console.dir; =>输出一个对象或一个值得详细信息

console.dir({name:'Teal',age:20}); // =>Object age: 20 name: "Teal" __proto__: Object

console.wran; =>输出一个黄色背景的提示信息

cosnole.wran('当前操作不符合规范'); // => 黄色背景：‘当前操作不符合规范’

console.table; =>将json数据转化为表格输出
```
console.table({name:'teal',age:20})// =>
```
(index) Value
name “teal”
age 20

(index)	Value
name	“teal”
age	20

console.time/timeEnd; =>计算中间程序运行的预估时间（预估时间：会受到当前电脑性能的影响）

console.time('a'); //a表示当前计算的任务名称
for(let i=0;i<99999999;i++){}
console.timeEnd('a'); // => a: 51.40185546875 ms

2、window提示框

alert; =>alert是浏览器窗口弹出一个提示框，提示框中输出指定的信息，但输出的是字符串
```
alert(20); // =>"20"
```
config;=>相对于alert来说，给用户添加了两个选择按钮，第一个就是确定按钮第二个是取消按钮，我们可以通过用户点击的按钮拿到用户点击了那个按钮
```
const bool=confirm('是否点击');
console.log(bool); // =>点击按钮输出true,点击取消输出false
```
prompt; =>相对于confirm来说在提供按钮的基础上还添加了输入框供用户输入信息，我们可以通过用户点击按钮来拿到用户输入的数据
```
const data=prompt('请输入内容');
cosnole.log(date); // =>如果用户点击了确定按钮就会输出用户输入的值，如果点击了取消就会输出null
```

3、向页面写入数据

document.write;=>把内容写入到页面中
```
document.write(123); // =>"123"
```

innerHTML/innerText；向指定的容器中插入信息，基于这两种方法会把原有的数据给覆盖掉，想要追加内容采用+=方式，innerHTML还可以将语义化标签解析成代码，而innerText会将其当作字符串直接输出

<!DOCTYPE html>
<html lang="ZH-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>text</title>
</head>
<body>
<div id="box">123</div>
</body>
</html>
<script>
// 读取内容
console.log(document.querySelector('#box').innerHTML); // =>"123"
console.log(document.querySelector('#box').innerText); //=>"123
//覆盖原有数据
console.log(document.querySelector('#box').innerHTML=456) // =>456
console.log(document.querySelector('#box').innerText=456) // =>456
//追加内容
console.log(document.querySelector('#box').innerHTML+='aaa'); // =>456aaa
console.log(document.querySelector('#box').innerText+='aaa'); // =>456aaaaaa
//渲染语义化标签
console.log(document.querySelector('#box').innerHTML='<h1>123</h1>'); // =>一级标题下的123
console.log(document.querySelector('#box').innerText='<h1>123</h1>'); // =>"<h1>123</h1>"
</script>

value;=>给页面中的input赋值

<!DOCTYPE html>
<html lang="ZH-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>text</title>
</head>
<body>
<input type="text" id="output">
</body>
</html>
<script>
document.querySelector('#output').value='我是输入框中的内容'; // =>在输入框中有“我是输入框中的内容”这几个字
</script>