JS对象数组的遍历和解构的一起使用

tomcat2022 / 2023-08-31 / 原文

<!DOCTYPE html>
<html class="no-js">
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <title></title>
        <meta name="description" content="" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="stylesheet" href="" />
    </head>
 
    <body>
        <div class="list">

        </div>

       
    </body>

    <script>
       
        const goodsList=[
            {
                id:'20000',
                name:'诚心如意手摇咖啡机',
                price:'289.00',
                picture:'images/slider01.jpg',
            },
            {
                id:'2008855',
                name:'小米手机',
                price:'255.00',
                picture:'images/slider02.jpg',
            },
            {
                id:'255885',
                name:'大华摄像头',
                price:'222.00',
                picture:'images/slider03.jpg',
            },
        ]
            //声明一个字符串
            let str=''
            //遍历数据

            goodsList.forEach(item=>{
               const {name,price,picture}=item; //解构的写法
               str +=`
                    <div class="item">
                        <img src=${picture} alt="">
                        <p class="name">${name}</p>
                        <p class="price">${price}</p>
               `
            })

           document.querySelector('.list').innerHTML=str;

    </script>
</html>