如何返回完整JavaScript对象而非显示[object Object]？

你编写了一段用于更新对象属性的代码，但尝试在页面上展示对象时，页面只显示[object Object]，无法看到完整的对象结构。

原代码如下：

HTML代码 #

<div id="demo"></div>

JavaScript代码 #

const recordCollection = {
        2548: {
            albumTitle: 'Slippery When Wet',
            artist: 'Bon Jovi',
            tracks: ['Let It Rock', 'You Give Love a Bad Name']
        },
        2468: {
            albumTitle: '1999',
            artist: 'Prince',
            tracks: ['1999', 'Little Red Corvette']
        },
        1245: {
            artist: 'Robert Palmer',
            tracks:[]
        },
        5439: {
            albumTitle: 'ABBA Gold'
        }
    }

function updateRecords(records, id, prop, value) {
    let demo = document.getElementById('demo');
    
    if (prop !== "tracks" && value !== "") {
        records[id][prop] = value;
    } else if (prop === "tracks" && records[id].hasOwnProperty("tracks") === false) {
        // let add = [];
        records[id][prop] == [value];
    } else if (prop === "tracks" && value !== "") {
        records[id][prop].push(value);
    } else if (value === "") {
        delete records[id][prop];
    }

    demo.innerHTML = records;
    return demo;
}

updateRecords(recordCollection, 5439, 'artist', 'ABBA');

1. 解决[object Object]的显示问题 #

直接将对象赋值给innerHTML时，JavaScript会自动调用对象的toString()方法，而默认的toString()返回值就是[object Object]。要展示完整对象结构，需要把对象转换成格式化的JSON字符串，使用JSON.stringify()方法即可：

修改这一行：

demo.innerHTML = records;

为：

// 第二个参数null表示不过滤属性，第三个参数2表示用2个空格缩进，让结构更清晰
demo.innerHTML = JSON.stringify(records, null, 2);

2. 修复代码中的赋值错误 #

在处理tracks属性不存在的分支里，你误用了比较运算符==，应该改成赋值运算符=，否则无法正确给对象添加tracks属性：

修改这一行：

records[id][prop] == [value];

为：

records[id][prop] = [value];

修改后的完整JavaScript代码 #

const recordCollection = {
        2548: {
            albumTitle: 'Slippery When Wet',
            artist: 'Bon Jovi',
            tracks: ['Let It Rock', 'You Give Love a Bad Name']
        },
        2468: {
            albumTitle: '1999',
            artist: 'Prince',
            tracks: ['1999', 'Little Red Corvette']
        },
        1245: {
            artist: 'Robert Palmer',
            tracks:[]
        },
        5439: {
            albumTitle: 'ABBA Gold'
        }
    }

function updateRecords(records, id, prop, value) {
    let demo = document.getElementById('demo');
    
    if (prop !== "tracks" && value !== "") {
        records[id][prop] = value;
    } else if (prop === "tracks" && !records[id].hasOwnProperty("tracks")) {
        records[id][prop] = [value];
    } else if (prop === "tracks" && value !== "") {
        records[id][prop].push(value);
    } else if (value === "") {
        delete records[id][prop];
    }

    demo.innerHTML = JSON.stringify(records, null, 2);
    return demo;
}

updateRecords(recordCollection, 5439, 'artist', 'ABBA');

内容的提问来源于stack exchange，提问作者Skynet