Question

我的html中有一个<select>标记，其中包含多个值。我在javascript中也有一个构造函数。我试图解决的问题是根据选定的值创建js对象。现在我有一个if语句的解决方案，它使用基于select值的参数调用构造函数。当select中没有多少值时，它工作正常。但如果有很多价值观，这种方式似乎效率极低。没有if语句，有没有更有效的方法来做到这一点？

这是一个小提琴： https://codepen.io/t411tocreate/pen/NjvOOJ

function Human(lastName, firstName, age){
  this.lastName = lastName;
  this.firstName = firstName;
  this.age = age;

  return this;
}

function createHumanObj(e){

    var e = document.getElementById("mySelect");
    var selctedHuman = e.options[e.selectedIndex].value;

    if(selctedHuman == 'john'){
        var currentHuman = new Human('John', 'Dalton', 28)
    }
    if(selctedHuman == 'tony'){
        var currentHuman = new Human('Anthony', 'Stark', 50)
    }

    return currentHuman;
}

Answer 1

一种解决方案是预填充HTML，您可以使用自定义属性填充选择选项，并在JS中选择它们，如下所示：

function createHumanObj(e){
  
var e = document.getElementById("mySelect"),
    selected = e.options[e.selectedIndex],
    firstname = selected.value,
    lastname = selected.getAttribute("data-lastname");

var currentHuman = new Human(firstname, lastname, 28);

return currentHuman;
}

<select>
	<option value="John" data-lastname="Dalton"></option>
	<option value="Anthony" data-lastname="Start"></option>
</select>

Answer 2

而不是在选择对象时创建对象，因为它们总是相同的（我猜？）为什么不将它们存储在＆＃34; map＆＃34;？像这样：

＆＃13;

var exampleJson = '{"john":{"lastName":"John","firstName":"Dalton","age":28},"tony":{"lastName":"Anthony","firstName":"Stark","age":50}}';
// the json can come from a webservice, for example

var humans = JSON.parse(exampleJson);

function createHumanObj() {

  var e = document.getElementById("mySelect");
  var selectedHuman = e.options[e.selectedIndex].value;

  return humans[selectedHuman];
}

function showHumanProps() {
  var log = document.getElementById("log");
  var currentHuman = createHumanObj();
  log.innerHTML = currentHuman.firstName + " " + currentHuman.lastName + " " + currentHuman.age; 
}

var btn = document.getElementById("btn");

btn.addEventListener('click', showHumanProps);

＆＃13;

<select id="mySelect">
  <option value="john">john</option>
  <option value="tony">tony</option>
 </select><br><br>
 <button id="btn">Show human props</button><br><br>
 <div id="log"></div>

＆＃13;

Answer 3

处理重复的名字或姓氏。

预先创建人类并使用索引存储它们。

var humans = {
  0: new Human('John', 'Dalton', 28),
  1: new Human('Anthony', 'Stark', 50),
  //...
};

和

var human = humans[e.selectedIndex];

Answer 4

也可以试试这个 -

function Human(userData){
      this.lastName = userData.lastName;
      this.firstName = userData.firstName;
      this.age = userData.age;
     }

    function createHumanObj(e){      
    	var e = document.getElementById("mySelect");
    	var selctedHuman = e.options[e.selectedIndex].value;
        var data= {
              "john": {
                  "firstName": "John",
                  "lastName": "Dalton",
                  "age": 28
              },
              "tony": {
                  "firstName": "Anthony",
                  "lastName": "Stark",
                  "age": 50
              }
         };
      
    	return new Human(data[selctedHuman]);
    }

    (function(){
      var btn = document.getElementById("btn");
      addEventListener('click', showHumanProps);          
      function showHumanProps(){
        var log = document.getElementById("log");
        var currentHuman = createHumanObj();
        log.innerHTML = currentHuman.firstName + " " + currentHuman.lastName + " " + currentHuman.age; 
      }
    })();

select, button, #log{
      display: block;
      margin: 10px auto;
      font-size: 25px;
      text-align: center;
    }

<select name="mySelect" id="mySelect">
  <option value="john">John</option>
  <option value="tony">Tony</option>
</select>

<button id="btn">Show human props</button>

<div id="log"></div>

Answer 5

在需要从一系列离散值中选择1值的情况下，我使用switch语句。对于您的示例，我将其用于'createHumanObj'函数：

function createHumanObj(e){
  var selectedHuman = e.options[e.selectedIndex].value;

  switch(selectedHuman) {
    case 'John':
      return new Human('John', 'Dalton', 28)

    case 'Tony':
      return new Human('Anthony', 'Stark', 50)

    default:
      console.log('Unknown human')
  }
}

根据select创建javascript对象

5 个答案:

处理重复的名字或姓氏。