如何打印JavaScript对象数据 避免出现[object Object]错误

问题原因 #

• autor构造函数属性拼写错误：代码中写的是this.aepellidos = apellidos，多了一个字母e，应该是apellidos，这是访问属性返回undefined的核心原因之一
• autores是存储多个作者对象的数组，不能直接拼接进字符串，也不能直接用element.autores.nombre获取属性，需要先遍历数组取出每个作者的属性拼接成可读字符串
• 给id为insertar的元素绑定点击事件时重复赋值，后一次赋值会覆盖前一次，当前代码是页面加载时就直接触发录入流程，暂时不影响核心功能
• 直接使用document.write会清空原有页面内容，更推荐往页面中插入DOM节点展示内容

修复后的完整代码 #

JavaScript代码 #

var biblioteca = new Array();

function libro(titulo, autores, anyo, editorial) {
    this.titulo = titulo;
    this.autores = autores;
    this.anyo = anyo;
    this.editorial = editorial;
}
    
// 修复构造函数属性拼写错误
function autor(nombre, apellidos, edad, nacionalidad) {
    this.nombre = nombre;
    this.apellidos = apellidos;
    this.edad = edad;
    this.nacionalidad = nacionalidad;
}
    
window.onload = function () {
    document.getElementById("mostrar").onclick = Mostrar;
}

function insertarlibro() {
    var autores = new Array();
    var titulo = prompt("Insertar el nombre del titulo del libro");
    var anyo = parseInt(prompt("Año"));
    var editorial = prompt("Inserta su editorial");
    var numautores = parseInt(prompt("Cuantos autores vas a insertar"));
    for (let i = 0; i < numautores; i++) {
        let autorObj = insertarautor();
        autores.push(autorObj);
    }
    var registrohecho = new libro(titulo, autores, anyo, editorial);
    return registrohecho;
}
    
function insertarautor() {
    var nombre = prompt("Insertar el nombre del autor").toUpperCase();
    var apellidos = prompt("Insertar el apellidos del autor").toUpperCase();
    var edad = parseInt(prompt("Edad"));
    var nacionalidad = prompt("¿De que pais es el autor?");
    var registrohecho = new autor(nombre, apellidos, edad, nacionalidad);
    return registrohecho;
}

var numlibros = parseInt(prompt("Cuantos libros vas a insertar"));
for (let i = 0; i < numlibros; i++) {
    var insertalibro = insertarlibro();
    biblioteca.push(insertalibro);
}

// 修复展示逻辑
function Mostrar() {
    // 清空原有页面内容，避免重复展示
    document.body.innerHTML = '';
    biblioteca.forEach(element => {
        // 遍历作者数组拼接为可读字符串
        let autoresStr = element.autores.map(autorItem => {
            return `${autorItem.nombre} ${autorItem.apellidos}（年龄：${autorItem.edad}，国籍：${autorItem.nacionalidad}）`
        }).join('、');
        var muestra = `<p>书名：${element.titulo} <br>
        作者：${autoresStr} <br>
        出版年份：${element.anyo} <br>
        出版社：${element.editorial}</p><hr>`;
        document.body.innerHTML += muestra;
    });
}

HTML代码（无需修改） #

<div id="insertar">
    <input type="button" value="Insertar">
</div>
<div id="mostrar">
    <input type="button" value="Mostrar">
</div>

补充说明 #

如果需要单独取某一个作者的属性，要通过数组索引获取，比如取第一个作者的姓名写法为element.autores[0].nombre，索引从0开始对应数组内的第1个元素。

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