用JavaScript通过商品查询效果案例学习数组常用方法，输入价格区间可以筛选出价格区间的商品，也可以根据商品名称进行查询

好的，下面是一个简单的实现：

HTML代码：

<label for="name">商品名称：</label>
<input type="text" id="name" placeholder="请输入商品名称">
<label for="minPrice">最低价格：</label>
<input type="number" id="minPrice">
<label for="maxPrice">最高价格：</label>
<input type="number" id="maxPrice">
<button onclick="search()">查询</button>

<table id="table">
  <thead>
    <tr>
      <th>商品名称</th>
      <th>价格</th>
    </tr>
  </thead>
  <tbody id="tbody">
    <tr>
      <td>商品1</td>
      <td>10</td>
    </tr>
    <tr>
      <td>商品2</td>
      <td>20</td>
    </tr>
    <tr>
      <td>商品3</td>
      <td>30</td>
    </tr>
  </tbody>
</table>

JavaScript代码：

const products = [
  { name: '商品1', price: 10 },
  { name: '商品2', price: 20 },
  { name: '商品3', price: 30 }
];

function search() {
  const name = document.getElementById('name').value;
  const minPrice = Number(document.getElementById('minPrice').value);
  const maxPrice = Number(document.getElementById('maxPrice').value);

  const filteredProducts = products.filter(product => {
    if (name && !product.name.includes(name)) {
      return false;
    }
    if (minPrice && product.price < minPrice) {
      return false;
    }
    if (maxPrice && product.price > maxPrice) {
      return false;
    }
    return true;
  });

  const tbody = document.getElementById('tbody');
  tbody.innerHTML = '';
  filteredProducts.forEach(product => {
    const tr = document.createElement('tr');
    const tdName = document.createElement('td');
    tdName.innerText = product.name;
    tr.appendChild(tdName);
    const tdPrice = document.createElement('td');
    tdPrice.innerText = product.price;
    tr.appendChild(tdPrice);
    tbody.appendChild(tr);
  });
}

以上代码实现了：

1. 从输入框中获取商品名称、最低价格和最高价格。
2. 使用数组的 `filter` 方法筛选出符合条件的商品，条件包括商品名称和价格区间。
3. 根据筛选出的商品生成 HTML 表格，并将其添加到页面中。