JavaScript对象在HTML中的高效展示：避免this误用与数组操作技巧-js教程-PHP中文网

JavaScript对象在HTML中的高效展示：避免this误用与数组操作技巧

碧海醫心

发布： 2025-07-16 23:42:02

原创

1110人浏览过

JavaScript对象在HTML中的高效展示：避免this误用与数组操作技巧

本教程旨在解决将JavaScript类实例的属性显示到HTML中的常见问题。我们将探讨this关键字在类外部的正确使用范围，并提供一种高效、专业的解决方案，通过将多个对象存储在数组中，并结合使用Array.prototype.map()和Array.prototype.join()方法，将对象数据动态渲染到网页上。

在前端开发中，我们经常需要将后端获取或前端创建的数据对象动态地展示在网页上。当数据以javascript类的实例形式存在时，如何正确、高效地将其属性渲染到html中是一个常见需求。本节将详细阐述这一过程，并纠正一个常见的this关键字误用问题。

理解this关键字的作用域

在JavaScript中，this关键字的值取决于函数被调用的方式。在一个类（class）的内部，例如在构造函数或方法中，this通常指向当前类的实例。然而，在类的外部，全局作用域或普通函数中直接使用this，其指向往往不是我们期望的类实例。

考虑以下原始代码片段：

class Film {
    // ... class properties and methods ...
}

let film1 = new Film('El hobbit', 'peter jackson', 'aventura', '23-02-2002');
// ... film2, film3 ...

const peliHtml = document.getElementById('films');
peliHtml.innerHTML = `${this.Film.title}`; // 错误的使用方式

登录后复制

这里的错误在于peliHtml.innerHTML =${this.Film.title};这行代码。在全局作用域下，this通常指向window对象（在严格模式下可能是undefined），而Film是一个类名，不是window对象的属性，更不是一个具体的Film实例。因此，this.Film会是undefined，尝试访问undefined的title属性会导致运行时错误。

核心原则： this关键字仅在类内部（如方法或构造函数中）才代表当前类的实例。在类的外部，应直接引用具体的实例变量（如film1、film2等）。

立即学习“Java免费学习笔记（深入）”；

高效展示多个对象：数组、map()与join()

当需要展示多个同类型对象（如多部电影）的属性时，最佳实践是将这些对象存储在一个数组中。然后，可以利用数组的高阶函数来遍历和处理这些数据。

1. 将对象实例放入数组

首先，创建多个Film类的实例，并将它们收集到一个数组中。这使得数据的管理和遍历变得更加方便。

class Film {
    title = '';
    director = '';
    genre = '';
    date = '';

    constructor(title, director, genre, date){ // 确保构造函数参数与属性匹配
        this.title = title;
        this.director = director;
        this.genre = genre;
        this.date = date;
    }

    getDates(){ // 示例方法，可用于获取格式化日期信息
        return `marca: ${this.title} - director: ${this.director}, genre: ${this.genre}, date: ${this.date}`;
    };
}

let film1 = new Film('El hobbit', 'peter jackson', 'aventura', '23-02-2002');
let film2 = new Film('El hobbit 2', 'peter jackson', 'aventura', '23-02-2010');
let film3 = new Film('El hobbit 3', 'peter jackson', 'aventura', '23-02-2020');

// 将所有电影对象放入一个数组
const films = [film1, film2, film3];

登录后复制

2. 使用Array.prototype.map()提取所需属性

Array.prototype.map()方法是一个非常有用的高阶函数，它会遍历数组中的每个元素，并对每个元素执行一个回调函数，然后将回调函数的返回值组成一个新的数组。这非常适合从对象数组中提取特定的属性。

在本例中，我们希望提取每部电影的title属性：

知我AI

一款多端AI知识助理，通过一键生成播客/视频/文档/网页文章摘要、思维导图，提高个人知识获取效率；自动存储知识，通过与知识库聊天，提高知识利用效率。

101

查看详情

const filmTitles = films.map(film => film.title);
// filmTitles 现在会是 ['El hobbit', 'El hobbit 2', 'El hobbit 3']

登录后复制

3. 使用Array.prototype.join()连接字符串

Array.prototype.join()方法可以将数组中的所有元素连接成一个字符串。你可以指定一个分隔符来分隔每个元素。

为了将提取出的电影标题显示在一个段落中，我们可以用逗号和空格作为分隔符：

const filmTitlesString = filmTitles.join(', ');
// filmTitlesString 现在会是 "El hobbit, El hobbit 2, El hobbit 3"

登录后复制

4. 将结果渲染到HTML

最后，将生成的字符串赋值给HTML元素的innerHTML属性。

const peliHtml = document.getElementById('films');
peliHtml.innerHTML = filmTitlesString;

登录后复制

完整示例代码

结合上述步骤，完整的HTML和JavaScript代码如下：

HTML (index.html)

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>电影列表</title>
</head>
<body>
    <h1>电影列表</h1>
    <p id="films"></p>

    <script src="app.js"></script>
</body>
</html>

登录后复制

JavaScript (app.js)

class Film {
  title = '';
  director = '';
  genre = '';
  date = '';

  constructor(title, director, genre, date) {
    this.title = title;
    this.director = director;
    this.genre = genre;
    this.date = date;
  }

  getDates() {
    return `电影名称: ${this.title} - 导演: ${this.director}, 类型: ${this.genre}, 上映日期: ${this.date}`;
  }
}

// 创建电影实例
let film1 = new Film('霍比特人：意外之旅', '彼得·杰克逊', '冒险/奇幻', '2002-02-23');
let film2 = new Film('霍比特人2：史矛革之战', '彼得·杰克逊', '冒险/奇幻', '2010-02-23');
let film3 = new Film('霍比特人3：五军之战', '彼得·杰克逊', '冒险/奇幻', '2020-02-23');

// 将所有电影实例放入一个数组
const films = [film1, film2, film3];

// 获取HTML元素
const peliHtml = document.getElementById('films');

// 使用map提取所有电影的标题，然后使用join连接成一个字符串
peliHtml.innerHTML = films.map(film => film.title).join(', ');

登录后复制

运行此代码，您将在<p id="films"></p>元素中看到“霍比特人：意外之旅, 霍比特人2：史矛革之战, 霍比特人3：五军之战”。

总结与最佳实践

this的作用域： 记住this关键字在类外部不指向类的实例。避免在全局或非方法函数中直接使用this.ClassName.property的形式。
数据集合： 当处理多个同类型数据时，将它们组织到数组中是最佳实践。
Array.prototype.map()： 这是转换数组元素的强大工具，非常适合从对象数组中提取特定属性或进行其他一对一的转换。
Array.prototype.join()： 用于将数组元素连接成一个单一的字符串，特别适合将提取的数据展示在文本内容中。
DOM操作： 使用document.getElementById()获取元素，并利用innerHTML或textContent来动态更新其内容。对于更复杂的结构，考虑使用document.createElement()和appendChild()来构建DOM树。