JS中常用的输出方式

彩色的云朵
1,240 阅读3分钟

JS中常用的三大类输出方式

一、console 控制在浏览器控制台输出的

1、console.log()

  • console.log()在控制台输出，
  • 特点：输出任意数据类型的数据,控制台展示的也是对应的数据类型
     console.log('aaa');
     console.log({name:"liling"});

在控制台输出为：

8BGPA42~C(5YUR}VBWZ`O_6.png

2、console.dir()

  • console.dir()输出一个对象或者一个值的详细信息。
    let arr = { name: '云朵', age: 20 }
    console.dir(arr);

在控制台输出为：

image.png

  • 与console.log()的区别：console.log()可以一次性输出多个值，但是console.dir()不行,一次只能输出一个值。
   function func(){}
   console.log(func,100,200);
   console.dir(func);

在控台输出为：

image.png

可以看到console.dir()输出一个对象或者一个值的详细信息，并且一次只能输出一个值。

3、console.table()

  • console.table() 是把多维的JSCON数据以表格形式输出。
      let arr=[{id:1,name:'yunduo'},
            {id:2,name:'云朵'}];
      console.table(arr);

在控制台输出为：

image.png

4、console.time()/timeEnd()

  • 计算出time和timeEnd中间所有程序执行所消耗的时间(预估时间：受到当前电脑性能的影响)。
    console.time('AA');
    for(let i = 0;i < 99999;i++){}
    console.timeEnd('AA');

在控制台输出为：

image.png

5、console.warn()

  • console.warn()以警告的方式输出。
 console.warn('当前操作不规范!');

在控制台输出为：

image.png

二、window弹出提示框

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

1、alert() 提示框

  • 需要等到alert弹出框，点击确定关闭后，后面的代码才会继续执行(alert/confirm/prompt会阻碍主线程的渲染)。
  • alert弹出的内容都会默认转换为字符串。
    alert('大家好!');
    console.log(100);
    alert([10,20,30]); //->数组转换为字符串的结果 "10,20,30"
    alert({name:'云朵'}); //->普通对象转换为字符串的结果 "[object Object]"

image.png 点击确定后，在控制台输出100，

image.png

数组转换为字符串：

image.png

普通对象转换为字符串：

image.png

2、confirm() 确认取消提示框

  • confirm相对于alert来说，给用户提供了确定和取消两种选择。
  • 可以创建一个变量，用来接收用户选择的结果，点击确定返回true,点击取消返回flase。
    let flag = confirm('今天上课了吗？');
    console.log(flag);

image.png

点击确定，在控制台输出true,

image.png

点击取消，在控制台输出flase,

image.png

3、prompt() 在confirm基础上多加一个原因

  • prompt在confirm的基础上给用户提供书写操作的原因等信息。
  • 创建一个变量reason,点击的是取消,reason返回结果是null,点击确定，reason返回用户输入的原因等信息。
    let reason =  prompt('确定要删除此信息吗？');
    console.log(reason);

image.png

输入123，点击确定，输出为123.

image.png

点击取消，输出为null.

image.png

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

1、 document.write 向页面中输入内容

  • 把内容写到页面当中，和alert一样，写入的内容最后都会转换为字符串，然后再写入。
    document.write('AA');
    document.write(10);
    document.write({name:'云朵'});//若要写入的内容是一个对象则写入页面的内容为  AA10[object Object]

结果为：

image.png

2、 innerHTML 向页面指定容器中输入内容

  • innerHTML ：向指定容器中插入内容，插入的信息也会变为字符串再插入。
  • innerHTML：会把之前容器中的内容给覆盖掉，想要追加，则采用+=的方式。
    
    <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
         #box{
            border: 1px solid lightcoral;
            background-color: lightblue;
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
    <div id="box">
    </div>
    <script>
        box.innerHTML = "彩色的";
        box.innerText  = "云朵";//=>覆盖原始的所有内容
        box.innerHTML += "彩色的";
        box.innerText  += "云朵";  //=>在原始内容上继续增加

    </script>
    
</body>
</html>

结果：

image.png

3、innerText 向页面指定容器中输入内容

innerText和inner HTML有相同的特点：
  • 向指定容器中插入内容，插入的信息也会变为字符串再插入。
  • 会把之前容器中的内容给覆盖掉，想要追加，则采用+=的方式。
innerText与innerHTML唯一的区别是：

innerText把所有内容都当作普通的文本，而innerHTML能够把标签文本进行识别和渲染。

    
    box.innerText = "<strong>我是重点内容</strong>";
    box.innerHTML = "<strong>我是重点内容</strong>";

4、 value 向页面表单元素中输入内容

  • 向页面的文本框赋值。
   <input type="text" id = "userName">
   <script>
        let userName = document.getElementById('userName');
        userName.Value = "大家加油！";
   </script>

image.png

avatar
文章
阅读
粉丝