1、前言:
最近在学习JavaScript es6中的一些方法,这些方法用起来非常方便,不用再写老长一段嵌套循环代码去实现一些小功能了。自己看教学视频的时候跟着做了一个商品查询案例,希望这个案例可以帮到一些跟我一样的初学者,加深理解一些方法的运用。这个案例存放了五种手机的数据,要实现 价格区间查找 和 商品名称查找 两种查找方式。
2、HTML标签
先写一些简单的标签,包括三个input输入框,两个查询按钮,一个table表格。因为是做一个小的demo,就不追究样式的美观了,有点简陋。
<div class="search">
<span>按照价格查询:</span>
<input type="text" class="start">
<span>-</span>
<input type="text" class="end">
<button class="search-price">搜索</button>
<span>按照商品名称查询: </span>
<input type="text" class="product">
<button class="search-pro">查询</button>
</div>
<div class="table">
<table>
<thead>
<tr>
<th>id </th>
<th>产品名称</th>
<th>价格</th>
</tr>
</thead>
<tbody>
<tr>
</tr>
</tbody>
</table>
</div>
3、CSS样式
然后写一点简单地样式,最起码要能看让人看得懂是吧。这里面table标签使用绝对定位,向右移动50%,然后再向左移动自身宽度50%,从而达到绝对居中的方法很常用,跟我一样的初学者可以记一下哈。
<style>
.search {
text-align: center;
}
input {
width: 40px;
height: 12px;
}
.table {
position: relative;
margin-top: 10px;
}
table {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
th,
td {
margin: 0;
padding: 0;
text-align: center;
width: 100px;
}
th:nth-child(2n-1),
td:nth-child(2n-1) {
border: 1px solid #000;
}
th:nth-child(2n),
td:nth-child(2n) {
border-top: 1px solid #000;
border-bottom: 1px solid #000;
width: 120px;
}
</style>
4、创建数据
在script标签里面创建商品数据,以数组的形式创建,里面包含了五个对象。
// 创建商品数组
var data = [{
id: 1,
pname: '小米',
price: 2899
}, {
id: 2,
pname: 'oppo',
price: 1699
}, {
id: 3,
pname: '荣耀',
price: 3299
}, {
id: 4,
pname: '华为',
price: 4999
}, {
id: 5,
pname: 'vivo',
price: 999
}, ];
5、获取HTML元素
接下来要获取HTML中相应的元素,渲染数据和业务逻辑都要挂载到这些元素里面,这里使用document.querySelector()来匹配HTML里面创建的标签对象。
var tbody = document.querySelector('tbody');
var search_price = document.querySelector('.search-price');
var start = document.querySelector('.start');
var end = document.querySelector('.end');
var search_pro = document.querySelector('.search-pro');
var product = document.querySelector('.product');
6、渲染数据
把数据渲染到页面中,生成一张商品表格,这里我把渲染的功能封装到函数里面了,等下在查询点击事件 里面还要复用的,这里面注意渲染数据前要先清空原来tbody的数据,不然实现查询功能的时候,查询出来符合条件的数据会和原来的数据并存,原来的数据不会消失,视觉效果很不好。
function setData(data) {
// 先清空原来tbody的数据
tbody.innerHTML = '';
data.forEach(function(value) {
// console.log(value);
var tr = document.createElement('tr');
tr.innerHTML =
`<td>${value.id}</td>
<td>${value.pname}</td>
<td>${value.price}</td>`
tbody.appendChild(tr)
})
}
setData(data);
效果如图:
根据商品价格查询功能
根据价格查询商品,当我们点击查询按钮,可以根据我们输入的商品价格区间去筛选数组里面的对象。这里 运用了filter()方法来筛选数组里面的对象,filter()方法可以筛选出数组中指定条件的所有元素并返回一 个新的数组。得到筛选的数组后,我们利用前面封装的setData函数重新把数据渲染到页面中。
search_price.addEventListener('click', function() { //绑定点击事件
let newData = data.filter(function(value) {
return value.price >= start.value && value.price <= end.value;
})
// 把筛选出来的对象渲染到页面中
setData(newData)
});
查询价格1000-3000元商品如图所示:
根据商品名称查询功能
根据商品名称查询数组,由于是查询数组中的唯一元素,使用some()方法会更好一点,some()也是根据指定的条件去筛选数组中的元素,但是some()方法找到第一个符合条件的元素就会立刻终止退出循环,这样效率会比filter()更高,当然这里是用filter也是没有问题的。some()方法返回的是一个布尔值,所以还需要加上一个判断语句来定位找到的元素,并声明一个空的数组来接受筛选出来的元素。
search_pro.addEventListener('click', function() {
var arr = [];
data.some(function(value) {
if (value.pname === String(product.value)) {
arr.push(value)
return true
}
})
setData(arr)
})
查询商品名称为 "华为"的商品 如图: