demo：数组方法-商品查询

    .search{
      width: 600px;
      margin:20px auto;
    }
    input{
      width: 50px;
    }
    table{
      width: 400px;
      border:1px solid #000;
      border-collapse: collapse;
      margin:0 auto;
    }
    th,td{
      border: 1px solid #000;
      text-align: center;
    }

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

// 利用新增的数组的方法操作数据

var data = [
  {id:1,name:"小米手机",price:3999},
  {id:2,name:"oppo手机",price:999},
  {id:3,name:"三星手机",price:2999},
  {id:4,name:"华为手机",price:4999}
]

// 1 获取相应的元素
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)

// 2:渲染数据

function setData(arr){
  // 先清空原来tbody里的内容
  tbody.innerHTML = ""
   arr.forEach(value=>{
     var tr = document.createElement('tr');
     tr.innerHTML= `
       <td>${value.id}</td>
       <td>${value.name}</td>
       <td>${value.price}</td>
     `;
     tbody.appendChild(tr);
   })
}

// 3根据价格查询商品
// 当我们点击了按钮，就可以根据我们的商品价格去帅选数组里面的对象

search_price.addEventListener('click',function(){
   var newarr = data.filter(value=>{
     return value.price >= start.value && value.price <= end.value;
   })
  //  把筛选后的数组渲染到页面中
  setData(newarr)
})


// 根据商品名称查找商品
search_pro.addEventListener('click',function(){
  var arr = []
  data.some(value=>{
    if(value.name === product.value){
      arr.push(value)
      return true
    }
  })
  setData(arr)
})