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

合集 - 自己的JS自己写的笔记(3)
1.JS对象数组的遍历和解构的一起使用
2.JS面向对象小案例 模态框 3.js深拷贝案例
收起
复制代码
<!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>
复制代码

 

posted @   斯斯20222  阅读(31)  评论(0)  编辑  收藏  举报
相关博文：
·  js深拷贝案例
·  JS面向对象小案例 模态框
·  js 数组对象操作
·  js数组解构 与 对象解构
·  js数组和变量的遍历
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
· AI与.NET技术实操系列（六）：基于图像分类模型对图像进行分类
点击右上角即可分享
微信分享提示
SQL AI 助手