javascript - 通过多次使用 typeof 运算符清理复杂/不可读的 if 语句

Question

我有一个 JavaScript 对象，其中包含绘制哪些轴数据。我需要用它来确定它是 2D 图(包含 X/Y、Y/Z 或 X/Z 上的数据)还是 3D 图(包含 X/Y/Z 上的数据)。

下面的代码有效，我相信涵盖了所有这些情况。但它非常难以阅读且复杂。有没有什么方法可以改进它，使其更具可读性和/或更简单？

预先感谢您提供的所有帮助。

var axes = {
    "X": "Column 1",
    "Y": "Column 2",
    "Z": "Column 3"
}

if (typeof axes.X == 'undefined' && typeof axes.Y !== 'undefined' && typeof axes.Z !== 'undefined') {
    alert("2D plot on Y and Z");
} else if (typeof axes.X !== 'undefined' && typeof axes.Y !== 'undefined' && typeof axes.Z == 'undefined') {
    alert("2D plot on X and Y");
} else if (typeof axes.X !== 'undefined' && typeof axes.Y == 'undefined' && typeof axes.Z !== 'undefined') {
    alert("2D plot on X and Z");
} else if (typeof axes.X !== 'undefined' && typeof axes.Y !== 'undefined' && typeof axes.Z !== 'undefined') {
    alert("3D plot");
}

Answer 1

你可以使用循环

var axes = {
    "X": "Column 1",
    "Y": "Column 2",
    "Z": "Column 3"
}

var axesChecked = [];

for (var prop in axes) {
  if(axes.hasOwnProperty(prop) && typeof axes[prop] !== 'undefined'){
    axesChecked.push(prop);
  }
}

switch(axesChecked.length) {
  case 3:
    alert("3D plot");
    break;
  case 2:
    alert("2D plot " + axesChecked.join(' and '));
    break;
  default:
    throw "Need more axes";
    break;
}