牛客JS题（十二）列表动态渲染

news2025/2/28 15:17:38

注释很详细，直接上代码

涉及知识点：

忍者码风
reduce注意事项

题干：

在这里插入图片描述

我的答案

<!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');
            // 补全代码
            const solve1=()=>{//先当一波忍者，一行解决，干净利落
                ul.innerHTML='';//日常清空
                //people.forEach(person=>{ul.innerHTML+=`<li>${person.name} ${person.age}</li>`})
                //people.map(p=>{ul.innerHTML+=`<li>${p.name} ${p.age}</li>`});
                // ul.innerHTML=people.map(p=>`<li>${p.name} ${p.age}</li>`).join('');
                //记得给累加器赋值初始值，因为如果不赋初始值累加器会直接将第一个元素当作初始值，
                //但是我们是转化以后的累加字符串，而实际的类型是对象，会导致第一个元素为[object Object]
                ul.innerHTML=people.reduce((acc,cur)=>acc+=`<li>${cur.name} ${cur.age}</li>`,'')
            }
            //solve1();
 
            const solve2=()=>{//这里我们用中规中矩的方法
                ul.innerHTML='';
                people.forEach(person=>{
                    var li=document.createElement('li');
                    li.innerHTML=`${person.name} ${person.age}`;
                    ul.appendChild(li);
                })
            }
            solve2();
        </script>
    </body>
</html>