forEach()、filter()、some()实现查询商品小案例

<div class="search">
  按照价格查询: <input type="text" class="start"> - <input type="text" class="end">
  <button class="search-price">搜索</button>
  按照商品名称查询: <input type="text" class="product">
  <button class="search-pro">查询</button>
</div>
<table>
  <thead>
  <tr>
    <th>id</th>
    <th>产品名称</th>
    <th>价格</th>
  </tr>
  </thead>
  <tbody>
  </tbody>
</table>

JS

// 利用新增数组方法操作数据
  var data = [{
    id: 1,
    pname: '小米',
    price: 3999
  }, {
    id: 2,
    pname: 'oppo',
    price: 999
  }, {
    id: 3,
    pname: '荣耀',
    price: 1299
  }, {
    id: 4,
    pname: '华为',
    price: 1999
  }, ];
  //获取相应的元素
  var tbody = document.querySelector('tbody');
  var search_price = document.querySelector('.search-price');
  var start = document.querySelector('.start');
  var end = document.querySelector('.end');
  var product = document.querySelector('.product');
  var search_pro = document.querySelector('.search-pro');
  setData(data);
  //把数据渲染到页面上
  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);
    })
  }
  //根据价格查询商品
  search_price.addEventListener('click', function () {
    var newData = data.filter(function (value) {
      return value.price >= start.value && value.price <= end.value;
    })
    setData(newData);
  })
  //根据商品名称查询
  // 如果查询数组中唯一元素，用some方法更为合适，因为他找到这个元素以后，就不在进行循环，效率更高。
  search_pro.addEventListener('click', function () {
    var arr = [];
    data.some(function (value) {
      if(value.pname === product.value) {
        arr.push(value);
        return true;//  说明找到了这个数据 所以设置true，终止遍历；如果false会一直遍历寻找
      }
    })
    setData(arr);
  })

css

  <style>
    table {
      width: 400px;
      border: 1px solid #000;
      border-collapse: collapse;
      margin: 0 auto;
    }

    td,
    th {
      border: 1px solid #000;
      text-align: center;
    }

    input {
      width: 50px;
    }

    .search {
      width: 600px;
      margin: 20px auto;
    }
  </style>