html页面遍历map
时间: 2023-06-29 22:15:00 浏览: 86
另一种遍历Map的方式
在 HTML 页面上遍历 Map 可以使用 JavaScript 中的 `Map` 对象的 `forEach` 方法。以下是一个简单的示例:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>遍历 Map</title>
</head>
<body>
<ul id="list"></ul>
<script>
const map = new Map([
['key1', 'value1'],
['key2', 'value2'],
['key3', 'value3']
]);
const list = document.getElementById('list');
map.forEach((value, key) => {
const li = document.createElement('li');
li.textContent = `${key}: ${value}`;
list.appendChild(li);
});
</script>
</body>
</html>
```
在这个示例中,我们创建了一个 `Map` 对象,并使用 `forEach` 方法遍历其中的键值对。对于每个键值对,我们创建一个新的 `li` 元素,并将其添加到 HTML 页面中的一个 `ul` 元素中。注意,我们使用了模板字面量来将键和值拼接在一起,以便在 `li` 元素中显示。
阅读全文