本文将介绍如何使用 JavaScript 动态地在 html 中渲染对象属性，并根据属性值是否存在来决定是否显示它们。我们将探讨一种更简洁的方法，避免冗余的代码，提高代码的可维护性和可读性。通过使用对象键值对和数组方法，可以有效地处理条件渲染的需求。
动态渲染对象属性
在Web开发中，经常需要根据数据动态生成HTML内容。当数据对象包含可选属性时，我们可能希望只显示那些存在的属性。下面我们将介绍一种更简洁的方法来实现这一目标。
假设我们有一个包含方向信息的对象：
let dirs = { nord: 10, est: 19, sudouest: 5 };
我们希望将这些方向信息以“标签: 值”的形式显示在HTML中，但只显示那些值不为NULL或undefined的属性。
更简洁的实现方法
避免使用大量的条件判断和重复的代码，我们可以利用JavaScript的对象和数组方法来简化实现。
首先，创建一个翻译对象，将属性名映射到更友好的显示名称：
const translations = { nord: 'Nord', sud: 'Sud', ouest: 'Ouest', est: 'Est', sudouest: 'Sud-ouest', sudest: 'Sud-est', nordouest: 'Nord-ouest', nordest: 'Nord-est' }
然后，使用Object.entries()方法将对象转换为键值对数组，并使用map()方法遍历该数组，为每个键值对生成HTML字符串。
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);
在这个代码中：
- Object.entries(dirs)将dirs对象转换为一个数组，其中每个元素都是一个包含键和值的数组，例如[[‘nord’, 10], [‘est’, 19], [‘sudouest’, 5]]。
- map(([dir, value]) => …)遍历这个数组，为每个键值对生成一个HTML字符串。
- translations[dir] || dir使用翻译对象来获取方向的显示名称。如果翻译对象中不存在该方向的名称，则使用原始的属性名。
- join(”)将所有生成的HTML字符串连接成一个字符串。
- 最后，将生成的HTML字符串插入到.content元素中。
示例代码
完整的示例代码如下：
<!DOCTYPE html> <html> <head> <title>Conditional Rendering</title> <style> .d-none { display: none; } </style> </head> <body> <div class="content"></div> <script> 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); </script> </body> </html>
注意事项
- 确保translations对象包含了所有可能出现的属性名，或者在代码中处理未知的属性名。
- 可以根据需要修改HTML结构和样式。
- 如果需要处理更复杂的数据类型，可能需要修改map()方法中的逻辑。
总结
通过使用对象键值对和数组方法，我们可以更简洁地实现条件渲染的需求，避免冗余的代码，提高代码的可维护性和可读性。这种方法适用于各种需要根据数据动态生成HTML内容的场景。
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
