ES6 forEach&filter运用

2021-06-20 10:58:40 阅读：196 来源： 互联网

标签：ES6 name commodity price filter item let forEach str

商品查询

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>

标签：ES6,name,commodity,price,filter,item,let,forEach,str
来源： https://blog.csdn.net/qq_57509012/article/details/118067220

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

ES6 forEach&filter运用