javascript - 检查数组值

Question

我正在开发一个情人节测验页面。

有 4 个测验，在这 4 个中，您有一些选择。选择这 4 个选项后，会出现一个按钮，供用户查看目的地的结果。这么平静，我想知道是否有办法改进或优化部分代码。

例如，我正在谈论的这一部分是检查数组。如果是“夜晚、炎热、巴西和冒险”，结果将是“里约热内卢”。有几个目的地，我做了一切，如果它非常大。还有其他更好的方法吗？

let valueInfos;

if (dataQuiz.indexOf("dia") > -1 && dataQuiz.indexOf("calor") > -1 && dataQuiz.indexOf("brasil") > -1 && dataQuiz.indexOf("aventura") > -1) {
  valueInfos = ["Chapada diamantina", "O Parque Nacional da Chapada Diamantina é uma região de serras, vales, rios, cachoeiras, grutas e de muitas aventuras para você curtir muito durante o dia.", "https://www.smiles.com.br/dicas-smiles/destinos/chapada-diamantina"];
} else if (dataQuiz.indexOf("dia") > -1 && dataQuiz.indexOf("calor") > -1 && dataQuiz.indexOf("brasil") > -1 && dataQuiz.indexOf("romantica") > -1) {
  valueInfos = ["GRAMADO", "Para os românticos de plantão, preparem-se para o encanto da beleza única de Gramado.", "https://www.smiles.com.br/dicas-smiles/destinos/gramado"];
} else if (dataQuiz.indexOf("dia") > -1 && dataQuiz.indexOf("calor") > -1 && dataQuiz.indexOf("brasil") > -1 && dataQuiz.indexOf("tranquila") > -1) {
  valueInfos = ["FERNANDO DE NORONHA", "Fernando de Noronha é perfeita para você curtir dias de sol em algumas das praias mais especiais de todo o país, sem contar a agitada vida marinha.", "https://www.smiles.com.br/dicas-smiles/destinos/fernando-de-noronha"];
} else if (dataQuiz.indexOf("dia") > -1 && dataQuiz.indexOf("calor") > -1 && dataQuiz.indexOf("exterior") > -1 && dataQuiz.indexOf("aventura") > -1) {
  valueInfos = ["RESERVA MASAI MARA", "Já pensou em visitar a África? A reserva Masai Mara fica no Quênica e é um destino perfeito para os aventureiros que buscam explorar a vida selvagem da savana africana.", "https://www.smiles.com.br/dicas-smiles/destinos/reserva-masai-mara-no-quenia"];
} else if (dataQuiz.indexOf("dia") > -1 && dataQuiz.indexOf("calor") > -1 && dataQuiz.indexOf("exterior") > -1 && dataQuiz.indexOf("romantica") > -1) {
  valueInfos = ["CANCÚN", "Se para você o melhor jeito de curtir o dia com é dentro de um mar com águas cristalinas, resorts e vida noturna seu destino tem que ser Cancún.", "https://www.smiles.com.br/dicas-smiles/destinos/cancun"];
} else if (dataQuiz.indexOf("dia") > -1 && dataQuiz.indexOf("calor") > -1 && dataQuiz.indexOf("exterior") > -1 && dataQuiz.indexOf("Tranquila") > -1) {
  valueInfos = ["VENEZA", "Quem nunca sonhou com um passeio de gôndola em Veneza? A beleza da cidade italiana é incomparável para aqueles que preferem um destino tranquilo e com uma culinária esplêndida.", "https://www.smiles.com.br/dicas-smiles/destinos/veneza"];
} else if (dataQuiz.indexOf("dia") > -1 && dataQuiz.indexOf("frio") > -1 && dataQuiz.indexOf("brasil") > -1 && dataQuiz.indexOf("aventura") > -1) {
  valueInfos = ["CANELA", "Explore o Lago Negro, a flora e a arquitetura importada da Alemanha e Itália nesse destino único.", "https://www.smiles.com.br/dicas-smiles/destinos/gramado-e-canela"];
} else if (dataQuiz.indexOf("dia") > -1 && dataQuiz.indexOf("frio") > -1 && dataQuiz.indexOf("brasil") > -1 && dataQuiz.indexOf("romantica") > -1) {
  valueInfos = ["GRAMADO", "Se sua viagem dos sonhos envolve temperaturas baixas e passeios ao ar livre, prepare-se para se encantar pela beleza única de Gramado.", "https://www.smiles.com.br/dicas-smiles/destinos/gramado"];
} else if (dataQuiz.indexOf("dia") > -1 && dataQuiz.indexOf("frio") > -1 && dataQuiz.indexOf("brasil") > -1 && dataQuiz.indexOf("tranquila") > -1) {
  valueInfos = ["PORTO ALEGRE", "Gosta de passear ao ar livre, ver o pôr do sol e ainda pegar um barzinho ou restaurante depois? A capital gaúcha é o seu destino.", "https://www.smiles.com.br/dicas-smiles/destinos/porto-alegre"];
} else if (dataQuiz.indexOf("dia") > -1 && dataQuiz.indexOf("frio") > -1 && dataQuiz.indexOf("exterior") > -1 && dataQuiz.indexOf("aventura") > -1) {
  valueInfos = ["CHILE", "O Chile é conhecido não só pela sua cordilheira, mas por ter o céu mais bonito do mundo. Prepare-se para assistir um show de estrelas no deserto do Atacama.", "https://www.smiles.com.br/dicas-smiles/destinos/santiago"];
} else if (dataQuiz.indexOf("dia") > -1 && dataQuiz.indexOf("frio") > -1 && dataQuiz.indexOf("exterior") > -1 && dataQuiz.indexOf("romantico") > -1) {
  valueInfos = ["PARIS", "Pensou em romance, pensou em Paris. A capital francesa é há séculos considerada uma das cidades mais elegantes do mundo inteiro, capaz de conquistar qualquer coração.", "https://www.smiles.com.br/dicas-smiles/destinos/paris"];
} else if (dataQuiz.indexOf("dia") > -1 && dataQuiz.indexOf("frio") > -1 && dataQuiz.indexOf("exterior") > -1 && dataQuiz.indexOf("tranquila") > -1) {
  valueInfos = ["BARILOCHE", "Frio, neve e chocolate. Não tem passeio mais gostoso que curtir um clima diferente como este argentino.", "https://www.smiles.com.br/dicas-smiles/destinos/bariloche"];
} else if (dataQuiz.indexOf("noite") > -1 && dataQuiz.indexOf("calor") > -1 && dataQuiz.indexOf("brasil") > -1 && dataQuiz.indexOf("aventura") > -1) {
  valueInfos = ["RIO DE JANEIRO", "Praia, mar, uma orla maravilhosa e uma vida noturna incrível vão fazer você se apaixonar por este destino.", "https://www.smiles.com.br/dicas-smiles/destinos/rio-de-janeiro"];
}

return valueInfos;

标签： javascriptarrays

Answer 1

我想我会为每个城市和您可以拥有的每种过滤器/属性创建一个常量，例如calor, frio, dia, night...

const SHIFTS = {
  DAY: 'dia',
  NIGHT: 'noite',
}

const TEMPERATURES = {
  HOT: 'calor',
  COLD: 'frio',
}

const LOCATIONS = {
  BRAZIL: 'brasil',
  ABROAD: 'exterior',
}

const GENRES = {
  ADVENTURE: 'aventura',
  ROMANTIC: 'romantica',
  QUIET: 'tranquila',
}

然后我会在一个常量中创建每个城市，以便轻松了解您拥有多少个城市以及属性是什么，并将它们添加到一个CITIES常量中：

const CHAPADA_DIAMANTINA = {
  filters: {
    shift: SHIFTS.DAY,
    temperature: TEMPERATURES.HOT,
    location: LOCATIONS.BRAZIL,
    genre: GENRES.ADVENTURE,
  },
  content: {
    title: "Chapada diamantina", 
    body: "O Parque Nacional da Chapada Diamantina é uma região de serras, vales, rios, cachoeiras, grutas e de muitas aventuras para você curtir muito durante o dia.", 
    link: "https://www.smiles.com.br/dicas-smiles/destinos/chapada-diamantina",
  },
}

const GRAMADO = {
  filters: {
    shift: SHIFTS.DAY,
    temperature: TEMPERATURES.HOT,
    location: LOCATIONS.BRAZIL,
    genre: GENRES.ADVENTURE,
  },
  content: {
    title: "GRAMADO", 
    body: "Para os românticos de plantão, preparem-se para o encanto da beleza única de Gramado.", 
    link: "https://www.smiles.com.br/dicas-smiles/destinos/gramado"
  },
}

...

const CITIES = [CHAPADA_DIAMANTINA, GRAMADO, ...]

另外，我不知道您是如何创建dataQuiz数组的，但我更愿意创建一个对象。只需链接filters每个城市

{
  shift: 'dia|noite',                   // SHIFTS
  temperature: 'calor|frio',            // TEMPERATURES
  location: 'brasil|exterior',          // LOCATIONS
  genre: 'aventura|romantica|tranquila' // GENRES
}

所以，现在你可以保持你的逻辑简短

const quizMatchesWithCity = (quiz, city) => {
  const { filters } = city
  
  // you can use isEqual from lodash or ramda
  return isEqual(quiz, filter)
  
  // or with vanilla JS
  const props = Object.keys(quiz) // ['shift', 'temperature', 'location', 'genre']
  return props.every(prop => {
    const quizValue = quiz[prop]
    const cityFilterValue = city[prop]

    return quizValue === cityFilterValue
  }) 
}

// I would change `dataQuiz` to something like
// {
//   shift: 'dia|noite', 
//   temperature: 'calor|frio',
//   location: 'brasil|exterior',
//   genre: 'aventura|romantica|tranquila'
// }
const getContent = (dataQuiz) => {
  const city = CITIES.find(city => quizMatchesWithCity(dataQuiz, city))

  if (city) {
    const { content } = city
    const { 
      title,
      body,
      link,
    } = content

    return [title, body, link]
  }

  return ['NOT FOUND', '', '']
}

而已。你喜欢它吗？