如何用JavaScript筛选数组中指定目的地的表单数据

问题说明 #

通过HTML表单收集旅行数据并存入arrViaje数组，需筛选出目的地为Canarias、Mallorca、Galicia的记录，但当前filtrar函数无法正常工作，以下是原代码：

原JavaScript代码：

let arrViaje = [];

function recoger() {
  let nombre = document.getElementById("name").value
  let origen = document.getElementById("origin").value
  let destino = document.getElementById("destiny").value
  let personas = document.getElementById("people").value
  let fechas = document.getElementById("dates").value

  let viaje = {
    name: nombre,
    origin: origen,
    destiny: destino,
    people: personas,
    dates: fechas
  }
  console.log(viaje)

  arrViaje.push(viaje);
  console.log(arrViaje)
}

function filtrar() {
  let ciudadSinFiltrar = "Canarias"
  let ciudad = ciudadSinFiltrar.toLowerCase
  let filteredArray = arrViaje.filter((city) => city.filter(ciudad))
  console.log(filteredArray)
}

原HTML代码：

<div class="formulario">
  <form action="">
    <input type="text" class="datos" id="name" placeholder="Nombre">
    <input type="text" class="datos" id="origin" placeholder="Origen">
    <input type="text" class="datos" id="destiny" placeholder="Destino">
    <input type="text" class="datos" id="people" placeholder="Personas">
    <input type="text" class="datos" id="dates" placeholder="Fecha">
  </form>
  <button onclick="recoger()">Mas información</button>
  <button onclick="filtrar()">Filtrar</button>
</div>

错误分析 #

原filtrar函数存在3个核心问题：

• 仅指定了单一目标城市，未包含需求中的Mallorca和Galicia；
• toLowerCase是字符串方法，需加括号调用（toLowerCase()），否则只是引用方法本身而非执行转换；
• 错误调用city.filter(ciudad)：city是数组中的对象而非数组，不能使用filter方法，需直接判断对象的destiny属性是否符合条件。

修正后的代码 #

以下是修复后的filtrar函数，同时优化了大小写不敏感匹配逻辑，避免用户输入大小写不一致导致筛选失效：

let arrViaje = [];

function recoger() {
  let nombre = document.getElementById("name").value
  let origen = document.getElementById("origin").value
  let destino = document.getElementById("destiny").value
  let personas = document.getElementById("people").value
  let fechas = document.getElementById("dates").value

  let viaje = {
    name: nombre,
    origin: origen,
    destiny: destino,
    people: personas,
    dates: fechas
  }
  console.log(viaje)

  arrViaje.push(viaje);
  console.log(arrViaje)
}

function filtrar() {
  // 定义需要筛选的目的地列表，统一转为小写
  const targetDestinations = ['canarias', 'mallorca', 'galicia'];
  // 筛选逻辑：将当前记录的目的地转为小写并去空格，判断是否在目标列表中
  const filteredArray = arrViaje.filter(item => 
    targetDestinations.includes(item.destiny.toLowerCase().trim())
  );
  console.log(filteredArray);
  // 可选：如果需要将筛选结果展示到页面，可在此添加DOM操作
}

关键优化点 #

• 使用数组targetDestinations存储所有需要筛选的目的地，便于后续维护；
• 调用toLowerCase()统一转换为小写，同时用trim()去除输入前后空格，避免无效空格导致匹配失败；
• 使用Array.includes()方法判断当前记录的目的地是否在目标列表中，逻辑清晰且高效。

内容的提问来源于stack exchange，提问作者shambayaya