文章导读：

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

一：效果展示

页面基本效果

二：功能实现分析

2.1 页面渲染数据

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

实现过程：

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

再轮到下一个车辆的数据，在创建行等操作，直到所有车辆信息全部添加进去结束

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

2.2 根据价格区间查找

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

select1.addEventListener('click',function(){
rtbody.innerHTML=''varnewcar=car.filter(function(value,index,arr){
returnvalue.price>=start.value&&value.price<=end.value;
            })
// console.log(newcar);newcar.forEach(function(value,index,arr){
vartr=document.createElement('tr');
tr.innerHTML='<td class="righttd">'+value.name+'  :'+value.price+'万'+'</rd>'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)
returntrue;
            }
        })
newarr.forEach(function(value,index,arr){
vartr=document.createElement('tr');
tr.innerHTML='<td class="righttd">'+value.name+'  :'+value.price+'万'+'</rd>'rtbody.appendChild(tr)
            })
    })

完整代码：

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{
margin: 0;
padding: 0;
        }
        .outbox{
position: absolute;
width: 1200px;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
border-top: 1pxsolidblack;
border-left: 1pxsolidblack;
border-right: 2.2pxsolidblack;
border-bottom: 2.2pxsolidblack;
        }
        .leftbox{
float: left;
width: 900px;
/* height: 600px; */box-sizing: border-box;
border-top: 1.4pxsolidblack;
border-left: 1.4pxsolidblack;
border-right: 5pxsolidblack;
        }
        .rightbox{
float: left;
width: 298px;
border-top: 1.5pxsolidblack;
        }
        .top{
position: relative;
width: 898px;
height: 120px;
border-bottom: 1.4pxsolidblack;
background-color: rgb(219, 219, 219);
box-sizing: border-box;
        }
        .bottom{
padding-top: 28px;
width: 898px;
padding-bottom: 28px;
background-color: rgb(244, 244, 244);
        }
table{
margin: 0auto;
width: 835px; 
border: 1.4pxsolidblack;
        }
theadtr{
width: 835px;
height: 40px;
border: 1.4pxsolidblack;
background-color: rgb(208, 241, 255);
        }
tbodytr{
width: 835px;
height: 50px;
border: 1.4pxsolidblack;
background-color: rgb(255, 239, 239);
        }
td{
width: 278px;
border: 1.4pxsolidblack;
text-align: center;
font-weight: bold;
font-size: 17px;
letter-spacing: 3px;
        }
        .price{
position: absolute;
top: 22px;
left: 37px;
letter-spacing: 2px;
font-size: 18px;
font-weight: 500;
        }
        .start,.end{
padding-left: 6px;
width: 100px;
height: 30px;
outline: none;
font-size: 20px;
        }
        .pricebox{
position: absolute;
top: 19px;
left: 325px;
letter-spacing: 2px;
font-size: 18px;
font-weight: 800;
        }
        .select1{
position: absolute;
width: 170px;
height: 37px;
top: 17px;
right: 115px;
font-size: 14.5px;
letter-spacing: 2px;
background-color: rgb(255, 226, 154);
border: 1pxsolidblack;
        }
        .name-p{
position: absolute;
bottom: 22px;
left: 94px;
letter-spacing: 2px;
font-size: 18px;
font-weight: 500;
        }
        .name{
position: absolute;
bottom: 16px;
left: 325px;
letter-spacing: 2px;
font-size: 18px;
width: 235px;
height: 30px;
outline: none;
padding-left: 6px;
        }
        .select2{
position: absolute;
width: 170px;
height: 37px;
bottom: 15px;
right: 115px;
font-size: 14.5px;
letter-spacing: 2px;
background-color: rgb(255, 226, 154);
border: 1pxsolidblack;
        }
        .select1:hover{
background-color: rgb(255, 210, 95);
        }
        .select2:hover{
background-color: rgb(255, 214, 110);
        }
        .rtable{
margin: 0auto;
width: 240px;
margin-top: 40px;
margin-bottom: 40px;
        }
        .rthead .rtr{
width: 240px;
height: 40px;
border: 1.4pxsolidblack;
background-color: rgb(208, 241, 255);
        }
        .rtbody .rtr{
width: 240px;
height: 40px;
border: 1.4pxsolidblack;
background-color: rgb(255, 201, 114);
        }
        .rtd{
width: 240px;
border: 1.4pxsolidblack;
text-align: center;
font-weight: bold;
font-size: 17px;
letter-spacing: 3px;
        }
        .righttd{
width: 240px;
border: 1.4pxsolidblack;
text-align: center;
font-weight: bold;
font-size: 17px;
letter-spacing: 3px;
background-color: rgb(255, 234, 206);
        }
        .clear{
width: 85px;
height: 85px;
position: absolute;
top: 16px;
right: 13px;
border: 1pxsolidblack;
font-weight: 400;
font-size: 15px;
background-color: #fff;        }
        .clear:hover{
background-color: rgb(247, 247, 247);
        }
</style></head><body><divclass="outbox"><divclass="leftbox"><divclass="top"><buttonclass="clear">清空查询</button><pclass="price">您要查询的价格区间为(万元):</p><divclass="pricebox"><inputtype="text"class="start">~<inputtype="text"class="end"></div><inputtype="button"class="select1"value="从价格区间查询"><pclass="name-p">您要查询的车辆名称为:</p><inputtype="text"class="name"><inputtype="button"class="select2"value="从车辆名称查询"></div><divclass="bottom"><tablecellspacing="0"style="border-collapse: collapse;"><thead><tr><td>汽车编号</td><td>汽车名称</td><td>汽车售价(万元)</td></tr></thead><tbody></tbody></table></div></div><divclass="rightbox"><tablecellspacing="0"style="border-collapse: collapse;"class="rtable"><theadclass="rthead"><trclass="rtr"><tdclass="rtd">查询结果</td></tr></thead><tbodyclass="rtbody"></tbody></table></div></div><script>varcar=[
            {
'id':1000001,
'name':'奥迪A6 Avent',
'price':46            },
            {
'id':1000002,
'name':'奥迪A6 allroad',
'price':52            },
            {
'id':1000003,
'name':'奥迪RS6',
'price':145            },{
'id':1000004,
'name':'奥迪RS7',
'price':154            },
            {
'id':1000005,
'name':'奥迪A7L',
'price':82            },
            {
'id':1000006,
'name':'GTR R32',
'price':140            },
            {
'id':1000007,
'name':'GTR R33',
'price':101            },
            {
'id':1000008,
'name':'GTR R34',
'price':180            },
            {
'id':1000009,
'name':'GTR R35',
'price':160            }
        ]
vartbody=document.querySelector('tbody');
varrtbody=document.querySelector('.rtbody');
varstart=document.querySelector('.start');
varend=document.querySelector('.end');
varselect1=document.querySelector('.select1');
varclear=document.querySelector('.clear');
varselect2=document.querySelector('.select2');
varname1=document.querySelector('.name');
clear.addEventListener('click',function(){
window.location.reload()
        })
car.forEach(function(value,index,arr){
vartr=document.createElement('tr');
tr.innerHTML='<td>'+value.id+'</td><td>'+value.name+'</td><td>'+value.price+'</td>'tbody.appendChild(tr)
        })
select1.addEventListener('click',function(){
rtbody.innerHTML=''varnewcar=car.filter(function(value,index,arr){
returnvalue.price>=start.value&&value.price<=end.value;
            })
// console.log(newcar);newcar.forEach(function(value,index,arr){
vartr=document.createElement('tr');
tr.innerHTML='<td class="righttd">'+value.name+'  :'+value.price+'万'+'</rd>'rtbody.appendChild(tr)
            })
        })
select2.addEventListener('click',function(){
rtbody.innerHTML=''newarr=[]
car.some(function(value,index,arr){
if(value.name==name1.value){
newarr.push(value)
returntrue;
            }
        })
newarr.forEach(function(value,index,arr){
vartr=document.createElement('tr');
tr.innerHTML='<td class="righttd">'+value.name+'  :'+value.price+'万'+'</rd>'rtbody.appendChild(tr)
            })
    })
</script></body></html>

JS 根据价格区间筛选物品

文章导读：

一：效果展示

二：功能实现分析

2.2 根据价格区间查找

2.3 根据输入结果准确查找

完整代码：

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

JS 根据价格区间筛选物品

文章导读：

一：效果展示

二：功能实现分析

2.2 根据价格区间查找

2.3 根据输入结果准确查找

完整代码：

热门文章

最新文章

相关课程

相关电子书

相关实验场景