返回對象內容[object Object]

Question

嘗試從我的對象數組中獲取作爲文本的內容。

var array = [ 

    first = { 
     name: 'first', 
     color: 'red', 
    }, 

    second = { 
     name: 'second', 
     color: 'green', 
    }, 

    third = { 
     name: 'third', 
     color: 'blue', 
    }, 
]; 

$('.first').text(first); 
$('.second').text(second); 
$('.third').text(third); 

而是我得到：

[object Object] 

似乎無法找到這個隨時隨地的答案，我失去了一些東西明顯？

codepen demo

Answer 1

您正在呼籲JSON對象。你可以使用點符號像搶的對象中的內容：

Codepen - dot notation

$('.first').text(first.name + first.color); 
$('.second').text(second.name + second.color); 
$('.third').text(third.name + third.color); 

---

如果你真的想打印出來的對象，雖然，你可以使用JSON.stringify()，如：

Codepen - JSON.Stringify()

$('.first').text(JSON.stringify(first)); 
$('.second').text(JSON.stringify(second)); 
$('.third').text(JSON.stringify(third)); 

Answer 2

首先如果設置了"use strict"模式，代碼將會中斷，因爲您正在隱式創建全局變量。

其次，當調用方法.text()和設定的值，它需要一個string或function值，那麼，在這種情況下該方法toString()被隱式要求的對象first, second, third返回"[object Object]"，其中Object是對象類型。

現在，創建陣列的正確方法是：

var list = [ 
    { name: "first", color: "red" }, 
    { name: "second", color: "green" } 
]; 

或創建變量：

var first = { name: "first", color: "red" }; 
var second = { name: "second", color: "green" }; 
var list = [first, second]; 

現在我們有JavaScript對象，我們可以爲了創建JSON字符串將它們傳遞給.text()方法。

$(".first").text(JSON.stringify(list[0])); 
// Or... 
$(".first").text(JSON.stringify(first)); 

PD：您也可以override the methods toString() and valueOf()但這種方法更OOP。