javascript - 是否可以通过将参数传递给函数来将函数中的数据存储到对象文字？

Question

我添加了我的 html 和 js 片段，但它仍然没有完成。抱歉，如果代码有点困惑，这是我第一次尝试自己构建这样的东西。

`

var selectBread = document.querySelectorAll(".bread-select");
var sauceSelect = document.querySelectorAll(".sauces-select");
var checkBoxes = document.getElementsByTagName("input");
var orderModal = document.getElementById("order-modal");
let chosenItem;
let chosenItemPrice;
var ingredients = [];
var ingredientsPrice = [];
let selectedItem;
var sideDishes = [];
var drink = [];
var toasted;
var currentSandwich = {};
var breadAndPrice = [
  ["baguette", 0.8],
  ["burger bun", 0.8],
  ["ciabatta", 0.9],
  ["focaccia", 1.5],
  ["ftira", 0.8],
  ["olive bread", 1.3],
  ["rye bread", 1.3],
  ["sliced bread", 0.9],
  ["tortilla", 1.6],
  ["wheat bread", 0.9],
  ["whole grain bread", 1.2]
];
var sauceAndPrice = [
  ["chili sauce", 0.25],
  ["garlic and olive oil", 0.35],
  ["ketchup", 0.15],
  ["mayonnaisee", 0.15],
  ["garlic basil mayo", 0.45],
  ["mustard", 0.25]
];

function getBreadInfo(el, currentOption) {
  for (var i = 0; i < el.length; i++) {
    //add event listener to all bread select menu options
    el[i].addEventListener("change", function() {
      selectedItem = event.target.value; //current selected item
      getArrIndex(currentOption, selectedItem);
      if (event.target.name === "bread-select") {
        currentSandwich.breadType = chosenItem;
        currentSandwich.breadPrice = chosenItemPrice;
      } else if (event.target.name === "sauce-select") {
        currentSandwich.sauce = chosenItem;
        currentSandwich.saucePrice = chosenItemPrice;
      } else if (event.target.name === "side-dishes-select") {
        currentSandwich.sideDish = chosenItem;
        currentSandwich.sideDishPrice = chosenItemPrice;
      } else if (event.target.name === "drinks-select") {
        currentSandwich.drinkSelect = chosenItem;
        currentSandwich.drinkPrice = chosenItemPrice;
      } else if (event.target.name === "toasted-select") {
        currentSandwich.toasted = chosenItem;
      }
    });
  }
}

function getArrIndex(arr, val) {
  // val is the selected item
  for (var i = 0; i < arr.length; i++) {
    //iterate through the current choosen array
    if (arr[i][0] === val) {
      // when selected item is found in the array
      chosenItem = arr[i][0]; // store the item in choosenItem value
      chosenItemPrice = arr[i][1]; // store the item price in choosenItem value
    }
  }
}
getBreadInfo(selectBread, breadAndPrice);
getBreadInfo(sauceSelect, sauceAndPrice);
//get the index of the selected item from the bread and price array

function getIngredientsInfo() {
  for (var i = 0; i < checkBoxes.length; i++) {
    //loop check boxes
    checkBoxes[i].addEventListener("change", function() {
      //add event listener to check boxes
      if (event.target.checked) {
        //check if check boxes are checked
        ingredients.push(event.target.name); //push the name of ingredient to ingredients array
        ingredientsPrice.push(event.target.value); //get the price of the item checked from value attr and push it to ingredientsPrice array
      } else if (event.target.checked === false) {
        var index = ingredients.indexOf(event.target.name);
        ingredients.splice(index, 1);
        ingredientsPrice.splice(index, 1);
      }
    });
  }
}
getIngredientsInfo();

<section class="order-section">
  <h2 class="selection-header">Choose your...</h2>
  <div class="select-container">

    <select class="bread-select" name="bread-select">
      <option selected disabled>Bread Type</option>
      <option value="baguette">Baguette</option>
      <option value="burger bun">Burger Bun</option>
      <option value="ciabatta">Ciabatta</option>
      <option value="focaccia">Focaccia</option>
      <option value="ftira">Ftira</option>
      <option value="olive bread">Olive Bread</option>
      <option value="rye bread">Rye Bread</option>
      <option value="sliced bread">Sliced Bread</option>
      <option value="tortilla">Tortilla</option>
      <option value="wheat bread">Wheat Bread</option>
      <option value="whole grain bread">Whole Grain Bread</option>
    </select>


    <select class="sauces-select" name="sauce-select">
      <option selected disabled>Sauces</option>
      <option value="chili sauce">Chili Sauce</option>
      <option value="garlic and olive oil">Garlic and Olive Oil</option>
      <option value="ketchup">Ketchup</option>
      <option value="mayonnaise">Mayonnaise</option>
      <option value="garlic basil mayo">Garlic Basil Mayo</option>
      <option value="mustard">Mustard</option>
    </select>

    <select class="side-dishes-select" name="side-dishes-select">
      <option selected disabled>Side Dishes</option>
      <option value="coleslaw">Coleslaw</option>
      <option value="curly fries">Curly Fries</option>
      <option value="mixed salad">Mixed Salad</option>
      <option value="potato wedges">Potato Wedges</option>
      <option value="potatoes salad">Potatoes Salad</option>
      <option value="sliced Potatoes fries">Sliced Potatoes Fries</option>
      <option value="sweet potatoes fries">Sweet Potatoes Fries</option>
    </select>

    <select class="drinks-select" name="drinks-select">
      <option selected disabled>Drinks</option>
      <option value="Still Water">Still Water</option>
      <option value="Fizzy Water">Fizzy Water</option>
      <option value="coca cola">Coca Cola</option>
      <option value="sprite">Sprite</option>
      <option value="fanta">Fanta</option>
      <option value="kinnie">Kinnie</option>
      <option value="cisk">Cisk</option>
    </select>

    <select class="toasted-select" name="toasted-select">
      <option selected disabled>Toasted</option>
      <option value="yes">Yes</option>
      <option value="no">No</option>
    </select>
  </div>

</section>

`我有一个函数，我用它从选择菜单中获取数据，我想通过将数据作为参数传递来将数据保存到对象中。目前我找到的唯一解决方案是使用 if 语句，但它看起来很糟糕。请帮助重构这个？

      if (event.target.name === "bread-select") {
    currentSandwich.breadType = chosenItem;
    currentSandwich.breadPrice = chosenItemPrice;
  } else if (event.target.name === "sauce-select") {
    currentSandwich.sauce = chosenItem;
    currentSandwich.saucePrice = chosenItemPrice;
  } else if (event.target.name === "side-dishes-select") {
    currentSandwich.sideDish = chosenItem;
    currentSandwich.sideDishPrice = chosenItemPrice;
  } else if (event.target.name === "drinks-select") {
    currentSandwich.drinkSelect = chosenItem;
    currentSandwich.drinkPrice = chosenItemPrice;
  } else if (event.target.name === "toasted-select") {
    currentSandwich.toasted = chosenItem;
  }

Answer 1

我建议转换是可行的方法，它既更快又更好。

switch(event.target.name) {
  case 'bread-select':
    currentSandwich.breadType = chosenItem;
    currentSandwich.breadPrice = chosenItemPrice;
    break;
  ...
  default:
}

谢谢