ES6 forEach&filter运用
作者：互联网
商品查询
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