zishu's blog

zishu's blog

一个热爱生活的博主。https://zishu.me

js奇怪的知識--console.table

這個屬性對我來說還真有些陌生,無意中發現的,查詢過 MDN 之後聽得挺有意思的,就記錄一下。

根據字面意思就是「將數據以表格的形式顯示」。這個方法需要一個必須參數 data,data 必須是一個數組或者是一個對象;還可以使用一個可選參數 columns。

表格的第一列是 index。如果數據 data 是一個數組,那麼這一列的單元格的值就是數組的索引。如果數據是一個對象,那麼它們的值就是各對象的屬性名稱。注意(在 FireFox 中)console.table 被限制為只顯示 1000 行(第一行是被標記的索引)。

1. 直接輸出#

直接進行嘗試,在控制台輸出 console.table

console.table(["雙十一", "雙十二", "雙十三"]);

PS E:\demo> node 1.js
┌─────────┬──────────┐
│ (index) │  Values  │
├─────────┼──────────┤
1'雙十二'
2'雙十三'
└─────────┴──────────┘

複製下來怪怪的,直接上個圖,就是下面這個樣子。

image


2. 定義對象進行輸出#

同樣也可以定義一個對象然後輸出

function Fun(title, date) {
  this.title = title
  this.date = date
}

const one = new Fun("雙十一", "11.11")
const two = new Fun("雙十二", "12.12")
const three = new Fun("雙十三", "你是傻子嗎,沒有13月")

console.table([one, two, three], ["title", "date"])

打印出來,就是下面這個樣子。

image

3.console.table () 的應用場景#

前面是在通過在編輯器中使用 node.js 輸出數據,看看在瀏覽器中輸出會不會不一樣的效果。

image

可以看到成功輸出數據,並且點擊表頭時,可以按照不同順序進行排序,這麼一看.... 嗯,還挺有用的(假笑)

應用場景大概就是可以對打印的數據進行更直觀的觀看,在某些情況下有利於調試代碼,以後看看是否能用得上這種方法。

載入中......
此文章數據所有權由區塊鏈加密技術和智能合約保障僅歸創作者所有。