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中插入的內容";
  複製代碼

  

思惟導圖以下：