【JavaScript 进阶教程】汽车商城根据价格区间筛选车辆案例

本案例源码链接（非VIP可私聊获取）：https://download.csdn.net/download/weixin_52212950/86286910https://download.csdn.net/download/weixin_52212950/86286910

文章导读：  

         这篇文章实现一个小案例：在购物平台选商品时我们经常会输价格区间，然后筛选出在这个区间内的商品，其实有JavaScript基础我们就已经能实现了，利用循环判断等知识。但是这篇文章是新方法 forEach，filter，some 的使用实现，可以让我们的实现更轻松。

文章目录：

一：效果展示

 二：功能实现分析

2.1 页面渲染数据

2.2 根据价格区间查找

2.3 根据输入结果准确查找

 三：完整代码

---

一：效果展示

页面基本效果

 根据价格区间搜索

 根据车辆名称搜索

---

 二：功能实现分析

2.1 页面渲染数据

我们的数据存放格式为数组放对象，在写入大量数据后要将其渲染到页面的主表格中，我们可以使用 forEach 方法来实现，每次迭代都会执行一次基础的创建行，添加行的操作

---

实现过程：

• 遍历开始，首先轮到的是数组第一个元素，即第一个车辆的数据，然后创建行tr，给行tr添加内容，内容中直接将车辆信息的编号id，名称name，价格price写入，然后再在tbody内加上创建好的行
• 再轮到下一个车辆的数据，在创建行等操作，直到所有车辆信息全部添加进去结束

car.forEach(function(value,index,arr){
            var tr=document.createElement('tr');
            tr.innerHTML=''+value.id+''+value.name+''+value.price+''
            tbody.appendChild(tr)
        })

---

2.2 根据价格区间查找

既然是筛选数据，那自然是选择我们的 filter 方法了，为了不让表格数据每次搜索完后上一次的数据还保留，所以每次点击后先清空右侧表格内的数据再去执行筛选。filter 返回的是一个新数组，所以需要一个新定义的数组去接收。筛选过后再使用 forEach 将新数组渲染到右侧的搜错结果表格即可

select1.addEventListener('click',function(){
            rtbody.innerHTML=''
            var newcar=car.filter(function(value,index,arr){
                return value.price>=start.value&&value.price<=end.value;
            })
            // console.log(newcar);
            newcar.forEach(function(value,index,arr){
                var tr=document.createElement('tr');
                tr.innerHTML=''+value.name+'  :'+value.price+'万'+''
                rtbody.appendChild(tr)
            })
        })

---

2.3 根据输入结果准确查找

在大批数据中要准确查找某个信息时，使用 some 方法比较合适，因为 some 一旦查找到就会停止遍历，数据量大时可以节省效率，很明显我们这个功能也要让其返回一个符合条件的新数组，但是some返回的结果是一个布尔值，所以此处我们需要自定义数组，然后去用 push 方法将复合查找要求的数据添加到新数组里，并且一旦查找到就让其 返回 ture 终止循环遍历

select2.addEventListener('click',function(){
        rtbody.innerHTML=''
        newarr=[]
        car.some(function(value,index,arr){
            if(value.name==name1.value){
                newarr.push(value)
                return true;
            }
        })
            newarr.forEach(function(value,index,arr){
                var tr=document.createElement('tr');
                tr.innerHTML=''+value.name+'  :'+value.price+'万'+''
                rtbody.appendChild(tr)
            })
    })

---

 三：完整代码

    
    
    
    
    


    

        

            

                清空查询
               
您要查询的价格区间为(万元):
               

                    ~ 
               
               
               
您要查询的车辆名称为:
                   
               
            
            

               

                   

                       

                           
汽车编号
                           
汽车名称
                           
汽车售价(万元)
                       
                   
                   

                   
               
            
       
       

        

            

                

                    
查询结果