JavaScript中常用的資料輸出方式解析
在js中，一般使用如下幾種方式進行資料的輸出：
1. 在瀏覽器的控制檯輸出
瀏覽器F12開啟瀏覽器控制檯（一般前端開發人員必備瀏覽器為谷歌瀏覽器，下面就以谷歌瀏覽器為例對控制檯盡心解析）；
1.1 Elements : 頁面中的元素都在這個裡面，經常用來調式頁面的樣式
1.2 Network : 包含了所有的資原始檔（html、css、js、圖片、向後臺請求的資料介面等），並告訴我們每一個檔案載入完成的事件；這樣我們可以針對載入時間過長的資源進行相關優化
1.3 Sources : 包含了我們專案中的html、js、css所有的原始碼，很多程式設計師扒一些優秀網站程式碼的時候就用到了它
1.4 Resources : 當前網站本地儲存的資料（cookie、localStorage、sessionStorage）
1.5 Console : 當前頁面向控制檯輸出的資料就在這裡顯示了
1.6 Toggle device toolbar ： 控制檯左上角有一個手機、PC轉換圖示按鈕，單擊可以進入手機端模擬器，這裡有模擬各種主流手機型號的手機尺寸的選項，也可以自己自定義新增對應的手機尺寸；我們的移動端開發就是在這個模擬器中完成的
1.7 我們還可以利用控制檯對js程式碼加斷點進行頁面bug除錯
好了，言歸正傳。上面我們對控制檯有了一個深刻的瞭解，那麼怎麼在瀏覽器的控制檯進行資料的輸出呢？
console.log();
console.info();
console.debug();
console.warn();//輸出警告資訊
console.error();//輸出錯誤資訊
console.dir();//輸出一個物件的詳細資訊
console.table();//將json資料按照表格的形式輸出，這樣在檢視結構時能夠更加的清晰直觀
2. 向頁面中某個元素中寫入內容
element.innerHTML、element.innerTex
示例：
varoEle = document.getElementById(''oId");
oEle.innerHTML = "<strong>加點料，更直觀！！</strong>"
上面兩個個用法相同，那麼它們有什麼區別呢？
1>. firefox（火狐）瀏覽器中不支援innerText，而innerHTML則不存在瀏覽器相容性問題。
2> innerText只能新增文字，即使有html標籤，也不能有效識別，而是當作文字寫入到元素中；而innerHTML不僅可以新增文字，還可以新增html標籤
3> 一般在js專案中，開發人員統一使用innerHTML，基本上不會使用innerText
3. 在頁面中彈出需要顯示的內容
window.alert(); //j警告框，確保使用者收到訊息
window.confirm(); //確認框，返回使用者操作的布林值
window.prompt(); //提示框，根據給出的提示讓使用者輸入資訊並返回
提示：上面三個，前面的window可以省略，直接使用alert() 、 confirm() 、 prompt()
4. 向頁面中直接輸出內容
document.write();
提示：相對於上面三種資料輸出方式，一般情況下不建議使用第4種；第4種可以用來向頁面種新增一個廣告
以上就是今天要講的，資料輸出的幾種方式，你學會了嗎？更多精彩內容請關注下面公眾號，吃喵的小魚乾！！內容不定時更新
