如果条件没有给出预期的结果

Question

我正在使用 javascript 在表格中显示我的数据，该表格显示了姓名、性别、外貌和年龄等列。

对于 Looks 列，我编写了一个脚本，如果性别为男性，该列应将 Looks 的值显示为“英俊”，如果性别为女性，列应将 Looks 的值显示为“beautiful”在价值中。

但它只显示男性和女性的“英俊”。

以下是我的代码：

   var myObj = [{name: "Taimoor", sex: "male", age: "Thirty One"},{name: 
   "Nida", sex: "female", age: "Twenty Nine"}];

   var table = "<tr><td>Name</td><td>Sex</td><td>Looks</td><td>Age</td> 
   </tr>";

   function myLooks() {
   for (ii in myObj) {
   var looks = "";
   if (myObj[ii].sex == "male") {looks = "handsome"}
   else {looks = "beautiful"};
   return looks;
   }
   }

   for (i=0; i <myObj.length; i++) {

   table += "<tr><td>" + myObj[i].name + "</td><td>" + myObj[i].sex + " 
   </td><td>" + myLooks() + "</td><td>" + myObj[i].age + "</td></tr>"





   document.getElementById("demo").innerHTML = table;

Answer 1

您不需要循环，您可以将性别传递给函数并返回正确的字符串：-

var myObj = [{name: "Taimoor", sex: "male", age: "Thirty One"},{name:
    "Nida", sex: "female", age: "Twenty Nine"}];

function myLooks(sex) {
  if (sex == "male") {
    return  "handsome"
  }
  else {
    return  "beautiful"
  }
}

for (i = 0; i < myObj.length; i++) {
  console.log(myObj[i].name, myObj[i].sex, myLooks(myObj[i].sex), myObj[i].age);
}

Answer 2

目前，您的myLooks 函数根据myObj 数组中的第一项设置looks 变量，然后返回。取而代之的是，您可以将要确定外观的值作为参数传递给函数，这是一个示例：

var myObj = [{
  name: "Taimoor",
  sex: "male",
  age: "Thirty One"
}, {
  name: "Nida",
  sex: "female",
  age: "Twenty Nine"
}];

var table = "<tr><td>Name</td><td>Sex</td><td>Looks</td><td>Age</td>  </tr>";

function myLooks(obj) {
  var looks = "";
  if (obj.sex == "male") {
    looks = "handsome"
  } else {
    looks = "beautiful"
  };
  return looks;
}

for (i = 0; i < myObj.length; i++) {
  table += ("<tr><td>" + myObj[i].name + "</td><td>" + myObj[i].sex + "  </td><td>" + myLooks(myObj[i]) + "</td> <td> " + myObj[i].age + " </td></tr > ");
}

document.getElementById("demo").innerHTML = table;

<table id="demo"></table>

Answer 3

首先，myObj 是一个数组，而您正在使用 for/in 循环。 for/in loops should not be used with Arrays 因为它们迭代了 Array 对象的所有属性，而不仅仅是索引。要简单地迭代 Array，您可以使用常规计数循环，.forEach() 或 for/of。

当您可以只运行一次函数并循环遍历数组一次时，您还会进行第二次循环并多次调用该函数。

var myObj = [
  {name: "Taimoor", sex: "male", age: "Thirty One"},
  {name: "Nida", sex: "female", age: "Twenty Nine"}
];

var headerRow = "<tr><td>Name</td><td>Sex</td><td>Looks</td><td>Age</td></tr>";
var table = document.getElementById("demo");
table.innerHTML = headerRow;

function myLooks() {
  var newRow = "";
  var looks = "";
  
  myObj.forEach(function(obj) {
   if (obj.sex == "male") {
     looks = "handsome";
   } else {
     looks = "beautiful"
   };
   newRow = "<tr><td>" + obj.name + "</td><td>" + obj.sex + 
   "</td><td>" + looks + "</td><td>" + obj.age + "</td></tr>"

   table.innerHTML += newRow;
  });
}

myLooks();

table, td { border:1px solid #e0e0e0;}

<table id="demo"></table>