console.log 顯示數組對象的內容

Question

我嘗試使用console.log以便我可以看到包含多個對象的數組的內容。 但是我收到一條錯誤消息，說console.log不是對象等。我使用的是 jquery 1.6.2，我的數組是這樣的：

filters = {dvals:[{'brand':'1', 'count':'1'},
                  {'brand':'2', 'count':'2'}, 
                  {'brand':'3', 'count':'3'}]}

console.log(filters);

我想要做的是將array(filters)的內容以過濾器格式寫出到警報框（這就是我認為console.log所做的）。 我怎么做？

Answer 1

將數組轉儲為字符串有兩種潛在的簡單解決方案。 根據您使用的環境：

…現代瀏覽器使用 JSON：

JSON.stringify(filters);
// returns this
"{"dvals":[{"brand":"1","count":"1"},{"brand":"2","count":"2"},{"brand":"3","count":"3"}]}"

……像 node.js 這樣的東西，你可以使用 console.info()

console.info(filters);
// will output:
{ dvals: 
[ { brand: '1', count: '1' },
  { brand: '2', count: '2' },
  { brand: '3', count: '3' } ] }

---

編輯：

JSON.stringify 帶有另外兩個可選參數。 第三個“空格”參數啟用漂亮的打印：

JSON.stringify(
                obj,      // the object to stringify
                replacer, // a function or array transforming the result
                spaces    // prettyprint indentation spaces
              )

例子：

JSON.stringify(filters, null, "  ");
// returns this
"{
 "dvals": [
  {
   "brand": "1",
   "count": "1"
  },
  {
   "brand": "2",
   "count": "2"
  },
  {
   "brand": "3",
   "count": "3"
  }
 ]
}"

Answer 2

在 Javascript 中將對象打印到控制台很簡單。 只需使用以下語法：

console.log( object );

要么

console.log('object: %O', object );

下面是一個相對未知的方法，它將對象或數組作為表格打印到控制台：

控制台表（對象）；

我認為重要的是要說這種日志語句僅在瀏覽器環境中有效。 我在谷歌瀏覽器中使用了它。 您可以在開發人員控制台中查看 console.log 調用的輸出：通過右鍵單擊網頁中的任何元素並選擇“檢查”打開它。 選擇選項卡“控制台”。

Answer 3

console.log不會產生任何消息框。 我不認為它在任何版本的 IE（或 Firefox）中都不可用，除非添加 firebug 或一些等效的東西。

但是它在 Safari 和 Chrome 中可用。 既然你提到了 Chrome，我將在我的例子中使用它。

您需要打開您的窗口及其對應的開發人員窗口。 您可以通過右鍵單擊頁面上的任何元素並選擇“檢查元素”來執行此操作。 您的窗口將分為兩部分，開發人員部分位於底部。 在兩部分之間的分界處是一個帶按鈕的欄，最右邊的按鈕標有“控制台”。 您需要單擊它才能切換到控制台選項卡。 在 Windows 上的大多數瀏覽器中按 F12 獲取開發人員工具，在 macOS 上按 command + shift + I。

在那里，您將能夠通過來自該控制台的 javascript 與加載在頂部的任何頁面進行交互，並且您的console.log任何消息都將顯示在那里。

Answer 4

console對象在Internet Explorer 8或更高版本中可用，但前提是您按F12或通過菜單打開開發人員工具窗口。

即使您再次關閉“開發者工具”窗口，它仍然可用，直到您關閉 IE。

Chorme 和 Opera 總是有一個可用的console ，至少在當前版本中是這樣。 Firefox 在使用 Firebug 時有一個console ，但它也可能提供一個沒有 Firebug 的console 。

在任何情況下，使用console輸出都是可選的保存方法。 以下是有關如何執行此操作的一些示例：

if (console) {
    console.log('Hello World!');
}

if (console) console.debug('value of someVar: ' + someVar);

Answer 5

我熱烈推薦這個片段，以確保意外留下的代碼片段不會在客戶端瀏覽器上失敗：

/* neutralize absence of firebug */
if ((typeof console) !== 'object' || (typeof console.info) !== 'function') {
    window.console = {};
    window.console.info = window.console.log = window.console.warn = function(msg) {};
    window.console.trace = window.console.error = window.console.assert = function(msg) {};
}

與定義一個空函數不同，此代碼段也是在需要時滾動您自己的控制台代理的一個很好的起點，即將這些信息轉儲到 .debug 容器中，顯示警報（可能會得到很多）等等......

如果您確實使用 firefox+firebug，則console.dir()最適合轉儲數組輸出，請參見此處。

Answer 6

似乎 Firebug 或您使用的任何調試器未正確初始化。 當您嘗試訪問 console.log() 方法時，您確定 Firebug 已完全初始化嗎？ 檢查控制台選項卡（如果它設置為激活）。

另一種可能性是，您自己在代碼中的任何地方覆蓋了控制台對象。

Answer 7

Json 代表 JavaScript Object Notation，實際上所有 json 都是 javascript 對象，因此您的數組已經是 json 形式。 要在 div 中寫出來，你可以做很多事情，我認為最簡單的事情之一是：

 objectDiv.innerHTML = filter;

其中 objectDiv 是您要使用 jquery 從 DOM 中選擇的 div。 如果你想列出數組的一部分，你可以訪問它們，因為它是一個像這樣的 javascript 對象：

 objectDiv.innerHTML = filter.dvals.valueToDisplay; //brand or count depending.

編輯：任何你想成為一個字符串但目前不是的（這是罕見的 javascript 將幾乎所有的東西都當作一個字符串）只需使用內置的toString()函數。所以如果你需要，上面的行將是filter.dvals.valueToDisplay.toString();

澄清的第二個編輯：這個答案是對 OP 的評論的回應，而不是完全回應他的原始問題。