使用filter和some方法写一个商品查询案例

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);

效果如图：

data表格.png

根据商品价格查询功能

根据价格查询商品，当我们点击查询按钮，可以根据我们输入的商品价格区间去筛选数组里面的对象。这里运用了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)
})

查询商品名称为 "华为"的商品如图：