# 题目描述

请你将预设代码中的people数组渲染在页面中。实现下面的列表:

  • 牛油1号 20岁
  • 牛油2号 21岁
  • 牛油3号 19岁

# 实现效果

1

# 代码实现

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <ul></ul>

        <script>
            var people = [
                { name: '牛油1号', id: 1, age: 20 },
                { name: '牛油2号', id: 2, age: 21 },
                { name: '牛油3号', id: 3, age: 19 },
            ]
            var ul = document.querySelector('ul');
            // 补全代码
            let data = people.map((item) => `<li>${item.name} ${item.age}岁</li>`).join("");
            ul.innerHTML = data;
        </script>
    </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21