ES6 - Day2实例 - 商品查询案例

4. ES6实例 - 商品查询案例

4.1 查询商品

自己写的：

// 利用新增数组方法操作数据
var data = [{
    id: 1,
    pname: '小米',
    price: 3999
}, {
    id: 2,
    pname: 'oppo',
    price: 999
}, {
    id: 3,
    pname: '荣耀',
    price: 1299
}, {
    id: 4,
    pname: '华为',
    price: 1999
}];
// 1. 获取相应的元素
var tbody = document.querySelector('tbody');
var startInput = document.querySelector('.start');
var endInput = document.querySelector('.end');
var searchBtn = document.querySelector('.search-price');

//创建表格
function addTab(value){
    var tr = document.createElement('tr');
    tr.innerHTML = '<td>' + value.id + '</td><td>' + value.pname + '</td><td>' + value.price + '</td>'
    tbody.appendChild(tr);
}

// 2. 把数据渲染到页面中
data.forEach(function(value){
    addTab(value);
});

// 3. 根据价格查询商品
searchBtn.onclick = function(){
    //先清空原来tbody的内容
    tbody.innerHTML = '';
    data.filter(function(value){
        if(value.price <= endInput.value && value.price >= startInput.value){
            addTab(value);
        }
    })
}

教程写的：

// 1. 获取相应的元素
var tbody = document.querySelector('tbody');
var startInput = document.querySelector('.start');
var endInput = document.querySelector('.end');
var searchBtn = document.querySelector('.search-price');

setData(data);

// 2. 把数据渲染到页面中
function setData(mydata){
    //先清空原来tbody的内容
    tbody.innerHTML = '';
    mydata.forEach(function(value){
        var tr = document.createElement('tr');
        tr.innerHTML = '<td>' + value.id + '</td><td>' + value.pname + '</td><td>' + value.price + '</td>'
        tbody.appendChild(tr);
    });
}

// 3. 根据价格查询商品
searchBtn.addEventListener('click', function(){
    var newData = data.filter(function(value){
        return value.price <= endInput.value && value.price >= startInput.value;
    });
    // 筛选完后将内容渲染到页面中
    setData(newData);
})

// 4. 按商品名称查询商品
proBtn.addEventListener('click', function(){
    var arr = [];
    data.some(function(value){
        // 当return返回true以后就不在进行查找了
        // some适用于查找唯一元素
        if(value.pname === productInput.value){
            arr.push(value);
            return true;    // return 后面必须写 true
        }
    });
    // 筛选完后将内容渲染到页面中
    setData(arr);

    //当要查找的元素不唯一时，适合使用 filter 进行查找
    // var proData = data.filter(function(value){
    //     return value.pname === productInput.value;
    // });
    // // 筛选完后将内容渲染到页面中
    // setData(proData);
})