ES6 forEach&filter运用

2024-02-09 09:51:34

商品查询

css样式：

 <style>
         .search {
            width: 600px;
            margin: 40px auto;
        }
        input {
            width: 50px;
        }
    </style>

body：

<body>
    <!-- 过滤案例：
        一个商品数组  5个商品  
        定义一个商品类 id name content price

        两个按钮：显示所有商品  商品名称 +商品详情+商品单价
        价格区间 Input 40 input 60 显示在区间范围内的商品 -->
    <div class="search">
        <button id="btn">显示所有商品</button><br>
        按照价格查询：<input type="text" id="start" /> -
        <input type="text" id="end" />
        <button id="search-price">搜索</button> 按照商品名称查询：
        <input type="text" id="product" />
        <button id="search-pro">查询</button>
    </div>
    <ul id="com">

    </ul>
</body>

js:

<script>
    function Commodity(id,name,content,price){
        this.id=id;
        this.name=name;
        this.content=content;
        this.price=price;
    }
    let commodity = [new Commodity(1,"小米","骁龙865处理器 / 1亿像素8K电影相机 / 双模5G / 新一代LPDDR5内存 / 对称式立体声 / 90Hz刷新率+180Hz采样率 / UFS 3.0高速存储 / 全面适配Wi-Fi 6 / 超强VC液冷散热 / 30W极速闪充+30W无线闪充+10W无线反充 / 4780mAh大电量 / 多功能NFC",990),
                    new Commodity(2,"OPPO","全面屏拍照手机 全网通 移动联通电信4G 双卡双待手机 云母绿 4GB+128GB",1299),
                    new Commodity(3,"荣耀","1亿像素超清影像 66W超级快充 10亿色超曲屏 5G全网通 8GB+128GB（初雪水晶）",3999),
                    new Commodity(4,"华为","全网通 6.5英寸OLED曲面屏 超感知徕卡影像 有线无线双超级快充 8GB+128GB（亮黑色）",4580),
                    new Commodity(5,"iphon","Apple iPhone 12 (A2404) 256GB 白色 支持移动联通电信5G 双卡双待手机【值享焕新版】",11250)];
    console.log(commodity);
    //获取相应的元素.
    let btn = document.getElementById("btn");
    let start = document.getElementById("start");
    let end = document.getElementById("end");
    let search =document.getElementById("search-price");
    let com = document.getElementById("com");
    let product = document.getElementById("product");
    let pro = document.getElementById("search-pro");
   
    //一.查询显示所有商品
    btn.onclick=function(){
        let str = "";
        //1.forEach + 箭头函数 方式
        commodity.forEach(item=>{
            str+=`<li>商品：${item.name}; <p>详细： ${item.content}</p> <p> 价格：${item.price}</p></li>`;
        })

        //2.for循环方式
        // for (let n = 0; n < commodity.length; n++) {
        //     str+=`<li>商品：${commodity[n].name};  价格：${commodity[n].price}</li>`;
        // }
        com.innerHTML=str
    }

    // 二.按照需求查询商品
    pro.onclick = function(){
        var name = product.value;
        let result = commodity.filter(item=>item.name==name)
        let str = "";
        result.forEach(item=>{
            str+=`<li>商品：${item.name};  价格：${item.price}</li>`;
        })
        com.innerHTML = str == "" ?"对不起，没有相关信息":str;
    }
    

    //三.根据价格查询商品
        //当我们点击了按钮，就可以根据我们的商品价格去筛选数组里面的对象
        search.onclick = function(){
            let str = "";
            let open = commodity.filter(item=>{
                // console.log(value);
                return item.price >= start.value && item.price <= end.value;
            });
            console.log(open)
            open.forEach(item=>{
                str+=`<li>商品：${item.name};  价格：${item.price}</li>`;
            })
            com.innerHTML=str == "" ?"对不起，没有相关信息":str;
        };
    console.log(search)
    
</script>

码农公寓

相关文章