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

Question

我正在使用javascript在一个表格中显示我的数据，该表格显示了Name、Sex、Look和Age列。

对于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() {
   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

首先，myObj是一个数组，您使用的是一个for/in循环。for/in loops should not be used with Arrays，因为它们迭代数组对象的所有属性，而不仅仅是索引。要简单地迭代数组，可以使用常规的计数循环，.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>

​

Answer 3

目前，您的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>

​