有没有办法压缩我的Javascript代码，使其更加简洁？

我已经做了一个基本的网站，它从下拉列表中获取输入，也可以是文本输入，并基于此提供结果。我对编码相当陌生，我只是把它们作为个人项目来学习，但我觉得一定有办法让代码更简洁？如果有人有任何意见，帮助我提高它将不胜感激

此外，我想知道如何使它，使javascript将接受朴茨茅斯和朴茨茅斯，而不是大写，例如，目前它只接受它，如果它的类型完全是因为它在代码中

谢谢：）

函数chinesePortsmouth（）{
var chineseFood=[‘中国的味道’、‘高贵的房子’、‘锡罐’]；
var chineseFood=chineseFood[Math.floor（Math.random（）*chineseFood.length）]；
document.getElementById（“restDisplay”）.innerHTML=中国食品；
}
函数chineseBrighton（）{
var chineseFood=[‘中国花园’、‘幸运星’、‘好朋友’]；
var chineseFood=chineseFood[Math.floor（Math.random（）*chineseFood.length）]；
document.getElementById（“restDisplay”）.innerHTML=中国食品；
}
朴茨茅斯函数（）{
var italianFood=['Bella Calabria'、'Sopranos'、'O Sole Mio Two']；
var意大利人食品=意大利人食品[Math.floor（Math.random（）*italianFood.length）]；
document.getElementById（“restDisplay”）.innerHTML=food；
}
布莱顿函数（）{
var italianFood=['Al Duomo'、'Polpo Brighton'、'Si Signore']；
var意大利人食品=意大利人食品[Math.floor（Math.random（）*italianFood.length）]；
document.getElementById（“restDisplay”）.innerHTML=food；
}
函数Indian朴茨茅斯（）{
var indianFood=[‘阿卡什’、‘蓝眼镜蛇’、‘香料商人’]；
var indianFood=indianFood[Math.floor（Math.random（）*indianFood.length）]；
document.getElementById（“restDisplay”）.innerHTML=indianFood；
}
函数indianBrighton（）{
var indianFood=[‘咖喱叶咖啡’、‘印度夏季’、‘辣椒泡菜’]；
var indianFood=indianFood[Math.floor（Math.random（）*indianFood.length）]；
document.getElementById（“restDisplay”）.innerHTML=indianFood；
}
功能墨西哥朴茨茅斯（）{
墨西哥食品变量=['Chiquito'，'Bonitas'，'Las Iguanas']；
var mexicanFood=mexicanFood[Math.floor（Math.random（）*mexicanFood.length）]；
document.getElementById（“restDisplay”）.innerHTML=墨西哥食品；
}
功能墨西哥布莱顿（）{
var mexicanFood=['Dos Sombreros'，'Wahaca Brighton'，'Carlito Burrito']；
var mexicanFood=mexicanFood[Math.floor（Math.random（）*mexicanFood.length）]；
document.getElementById（“restDisplay”）.innerHTML=墨西哥食品；
}
函数restChoice（）{
var e=document.getElementById（“餐厅”）；
var result=e.options[e.selectedIndex].text；
var inputVal=document.getElementById（“搜索”）.value；
如果（结果=“中文”和输入值=“朴茨茅斯”）{
chinesePortsmouth（）；
}else if（结果==“中文”&&inputVal==“布莱顿”）{
chineseBrighton（）；
}else if（结果==“意大利语”&&inputVal==“朴茨茅斯”）{
意大利语朴茨茅斯（）；
}else if（结果==“意大利语”&&inputVal==“布莱顿”）{
意大利人布莱顿（）；
}else if（结果==“印第安人”&&inputVal==“朴茨茅斯”）{
印度朴茨茅斯（）；
}否则如果（结果==“印度”&&inputVal==“布莱顿”）{
印度布莱顿（）；
}else if（结果==“墨西哥”&&inputVal==“朴茨茅斯”）{
墨西哥朴茨茅斯（）；
}else if（结果==“墨西哥”&&inputVal==“布莱顿”）{
墨西哥布莱顿（）；
}
}
按钮
中国人
意大利人
印度的
墨西哥人

在尝试重构时，一个好的技巧是始终思考是什么使每个函数都是唯一的。在本例中，函数之间的唯一区别是数组。鉴于此，您可以创建一个接受数组的函数，因为它是唯一未知的函数

function setRestDisplay(foodItems) {
    var item = foodItems[Math.floor(Math.random() * foodItems.length)];
    document.getElementById("restDisplay").innerHTML = foodItems;
}

---

试着自己找出

restChoice

，如果仍然卡住，请告诉我：）

一个好的做法是检查您总是重复自己的代码。记住原则。同时，让函数执行其特定任务，这将有助于您在将来查明错误/bug。您可以尝试使用对象对逻辑进行分组并为其分配方法。在本例中，我使用一个对象将餐厅食物选择分组为数组。然后创建一个函数，根据所选餐厅选择食物

const restaurants = {
  chinesePortsmouth: ['The Taste Of China', 'Noble House', 'Tin Tin'],
  chineseBrighton: ['China Garden', 'The Lucky Star', 'Good Friends'],
  italianFood: ['Bella Calabria', 'Sopranos', 'O Sole Mio Two'],
  italianBrighton: ['Al Duomo', 'Polpo Brighton', 'Si Signore'],
  indianPortsmouth: ['The Akash', 'Blue Cobra', 'Spice Merchants'],
  indianBrighton: ['Curry Leaf Cafe', 'Indian Summer', 'The Chilli Pickle'],
  mexicanPortsmouth: ['Chiquito', 'Bonitas', 'Las Iguanas'],
  mexicanBrighton: ['Dos Sombreros', 'Wahaca Brighton', 'Carlito Burrito']
};

function pickFood (foodChoices) {
  return foodChoices[Math.floor(Math.random() * foodChoices.length)];
}

function restChoice() {
  var e = document.getElementById('restaurants');
  var inputVal = document.getElementById('search').value.toLowerCase();
  var result = e.options[e.selectedIndex].text;
  let name = null;
  
  if (result == 'Chinese' && inputVal == 'porstmouth') {
    name = 'chinesePortsmouth';
  } else if (result == 'Chinese' && inputVal == 'Brighton') {
    name = 'chineseBrighton';
  } else if (result == 'Italian' && inputVal == 'porstmouth') {
    name = 'italianPortsmouth';
  } else if (result == 'Italian' && inputVal == 'Brighton') {
    name = 'italianBrighton';
  } else if (result == 'Indian' && inputVal == 'porstmouth') {
    name = 'indianPortsmouth';
  } else if (result == 'Indian' && inputVal == 'Brighton') {
    name = 'indianBrighton';
  } else if (result == 'Mexican' && inputVal == 'porstmouth') {
    name = 'mexicanPortsmouth';
  } else if (result == 'Mexican' && inputVal == 'Brighton') {
    name = 'mexicanBrighton';
  }

  // Render food choice
  document.getElementById("restDisplay").innerHTML = pickFood(restaurants[name]);
}

对于接受朴茨茅斯和朴茨茅斯，只需检查拼写，而不考虑其样式大小写。在本例中，首先将输入的值小写，然后将其与“朴茨茅斯”进行比较

const restaurants = {
  chinesePortsmouth: ['The Taste Of China', 'Noble House', 'Tin Tin'],
  chineseBrighton: ['China Garden', 'The Lucky Star', 'Good Friends'],
  italianFood: ['Bella Calabria', 'Sopranos', 'O Sole Mio Two'],
  italianBrighton: ['Al Duomo', 'Polpo Brighton', 'Si Signore'],
  indianPortsmouth: ['The Akash', 'Blue Cobra', 'Spice Merchants'],
  indianBrighton: ['Curry Leaf Cafe', 'Indian Summer', 'The Chilli Pickle'],
  mexicanPortsmouth: ['Chiquito', 'Bonitas', 'Las Iguanas'],
  mexicanBrighton: ['Dos Sombreros', 'Wahaca Brighton', 'Carlito Burrito']
};

function pickFood (foodChoices) {
  return foodChoices[Math.floor(Math.random() * foodChoices.length)];
}

function restChoice() {
  var e = document.getElementById('restaurants');
  var inputVal = document.getElementById('search').value.toLowerCase();
  var result = e.options[e.selectedIndex].text;
  let name = null;
  
  if (result == 'Chinese' && inputVal == 'porstmouth') {
    name = 'chinesePortsmouth';
  } else if (result == 'Chinese' && inputVal == 'Brighton') {
    name = 'chineseBrighton';
  } else if (result == 'Italian' && inputVal == 'porstmouth') {
    name = 'italianPortsmouth';
  } else if (result == 'Italian' && inputVal == 'Brighton') {
    name = 'italianBrighton';
  } else if (result == 'Indian' && inputVal == 'porstmouth') {
    name = 'indianPortsmouth';
  } else if (result == 'Indian' && inputVal == 'Brighton') {
    name = 'indianBrighton';
  } else if (result == 'Mexican' && inputVal == 'porstmouth') {
    name = 'mexicanPortsmouth';
  } else if (result == 'Mexican' && inputVal == 'Brighton') {
    name = 'mexicanBrighton';
  }

  // Render food choice
  document.getElementById("restDisplay").innerHTML = pickFood(restaurants[name]);
}

// Can be Portsmouth,portsmouth,PORTSMOUTH,pOrtSmouth
var inputVal = document.getElementById('search').value;

if (inputVal.toLowerCase() === 'portsmouth) {
  // Do Something
}