使用 JavaScript 条件渲染 HTML 数据：更简洁的方法

使用 JavaScript 条件渲染 HTML 数据：更简洁的方法

本文介绍如何使用 JavaScript 有条件地在 HTML 中渲染数据，避免冗余代码。通过将方向名称与翻译解耦，并利用 Object.entries 和 map 方法，可以更简洁地生成 HTML 结构，仅显示存在的属性及其对应的值。本文提供示例代码，展示了如何实现这一目标，并优化了代码的可读性和可维护性。

在前端开发中，经常需要根据数据的存在与否，动态地在 HTML 页面上渲染内容。当需要处理大量相似的属性时，传统的条件判断方法可能会导致代码冗余且难以维护。本文将介绍一种更简洁、更高效的方法，利用 JavaScript 的 Object.entries 和 map 方法，结合对象解构和翻译映射，实现有条件的数据渲染。

实现思路

1. 数据准备： 准备包含数据的 JavaScript 对象，例如包含方向信息的对象。
2. 翻译映射： 创建一个翻译对象，将属性名（如 "nord"）映射到用户友好的显示名称（如 "Nord"）。
3. 对象转换： 使用 Object.entries 将对象转换为键值对数组。
4. 数组映射： 使用 map 方法遍历键值对数组，根据值是否存在生成相应的 HTML 字符串。
5. HTML 拼接： 将生成的 HTML 字符串拼接成完整的 HTML 结构。
6. 页面渲染： 将生成的 HTML 结构插入到页面中。

代码示例

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

function print_directions(dirs) {
  const translations = {
    nord: 'Nord',
    sud: 'Sud',
    ouest: 'Ouest',
    est: 'Est',
    sudouest: 'Sud-ouest',
    sudest: 'Sud-est',
    nordouest: 'Nord-ouest',
    nordest: 'Nord-est'
  }

  const html = Object.entries(dirs)
    .map(([dir, value]) => `<div class="info-dir">
    ${translations[dir] || dir}:
    <span>${value}</span>
  </div>`)
    .join('');
  document.querySelector(".content").innerHTML = html;
}

let dirs = { nord: 10, est: 19, sudouest: 5 };
print_directions(dirs);

代码解释

Spell.tools

高颜值AI内容营销创作工具

下载

• translations 对象用于将属性名映射到对应的显示名称。如果属性名在 translations 对象中找不到对应的翻译，则直接使用属性名作为显示名称。
• Object.entries(dirs) 将 dirs 对象转换为键值对数组，例如 [["nord", 10], ["est", 19], ["sudouest", 5]]。
• map(([dir, value]) => ...) 遍历键值对数组，对于每个键值对，使用模板字符串生成一个包含方向名称和值的 HTML div 元素。
• ${translations[dir] || dir} 用于获取方向名称的翻译，如果找不到翻译，则使用属性名本身。
• join('') 将生成的 HTML 字符串数组拼接成一个完整的 HTML 字符串。
• document.querySelector(".content").innerHTML = html; 将生成的 HTML 字符串插入到 class 为 "content" 的 HTML 元素中。

CSS 样式 (可选)

.d-none {
  display: none;
}

HTML 结构 (可选)

<div class="content"></div>

总结

通过使用 Object.entries 和 map 方法，可以更简洁、更高效地实现有条件的数据渲染。这种方法不仅减少了代码量，还提高了代码的可读性和可维护性。在处理大量相似属性时，这种方法尤其有效。

注意事项

• 确保 translations 对象包含所有需要翻译的属性名。
• 如果属性值可能包含 HTML 特殊字符，需要进行转义，以避免安全问题。
• 可以根据实际需求，自定义 HTML 结构和 CSS 样式。
• 此方法适用于需要动态生成大量相似 HTML 结构的情况。对于少量静态 HTML 结构，使用传统的条件判断方法可能更简单直接。