Javascript JS三元运算符vs if/else

试图更好地理解JavaScript。我已经在这个论坛上找到了一些类似的问题，但我仍然对这一点感到困惑

我从网上获得了一些代码，可以切换模式窗口（div）和覆盖（div）的可见性（我知道使用jQuery可能更好，但我想先了解JS）：

我认为三元运算符只是编写if/else语句的一种更简洁的方式。但是，当我用if/else语句（当前在代码中注释掉）替换上面代码中的三元运算符时，代码不起作用

我可能有点不对劲，但我不知道是什么？有人能帮忙吗

---

谢谢。

这两段代码实际上并不相同

检查“可见”或任何其他值

/* TERNARY */
el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";

检查“可见”或“隐藏”的值。

if(el.style.visibility == "visible"){
    el.style.visibility = "hidden";
}else if(el.style.visibility == "hidden"){
    el.style.visibility = "visible";
}

还有第三个值没有检查

style.visibility

也可以是

”

，表示默认值

---

一天的免费提示：如果它看起来像一个条件不起作用，请检查使用调试器或

控制台.log

来验证这些值是否符合您的预期。99.99%的时候，你会发现这些值不是你认为应该的值。

这两段代码实际上并不相同

检查“可见”或任何其他值

/* TERNARY */
el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";

检查“可见”或“隐藏”的值。

if(el.style.visibility == "visible"){
    el.style.visibility = "hidden";
}else if(el.style.visibility == "hidden"){
    el.style.visibility = "visible";
}

还有第三个值没有检查

style.visibility

也可以是

”

，表示默认值

一天的免费提示：如果它看起来像一个条件不起作用，请检查使用调试器或

控制台.log

来验证这些值是否符合您的预期。99.99%的时候，你会发现这些值不是你认为应该的值。

三元运算符（更准确地说是the）可以替换单个if/else（只有一个比较子句），而不是if/else if（有两个比较）。所以

相当于：

var d;

if (a) {
    d = b;
} else {
    d = c;
}

因此，在您的情况下，与条件运算符等价的if/else为：

if (el.style.visibility == "visible") {
    el.style.visibility = "hidden";
} else {
    el.style.visibility = "visible";
}

同样，嵌套两个条件运算符可以生成与if/else等价的表达式，前提是：

el.style.visibility = (el.style.visibility == "visible") ? 
    "hidden" : (el.style.visibility == "hidden") ? 
    "visible" : el.style.visibility;

显然，在这种情况下，如果要进行两次比较，则if/else if更具可读性，应该优先使用。

三元运算符（更准确地称为the）可以替换单个if/else（只有一个比较子句），而不是if/else if（有两次比较）。所以

相当于：

var d;

if (a) {
    d = b;
} else {
    d = c;
}

因此，在您的情况下，与条件运算符等价的if/else为：

if (el.style.visibility == "visible") {
    el.style.visibility = "hidden";
} else {
    el.style.visibility = "visible";
}

同样，嵌套两个条件运算符可以生成与if/else等价的表达式，前提是：

el.style.visibility = (el.style.visibility == "visible") ? 
    "hidden" : (el.style.visibility == "hidden") ? 
    "visible" : el.style.visibility;

---

显然，在这种情况下，如果要进行两次比较，if/else if更具可读性，应该是首选。

我想我会在函数返回另一个函数时添加另一个三元实例。而不是if/else if：

function greetCurried (greeting) {
  return function (name) {
    if (typeof(greeting) !== 'string') {
      return ('Greetings!');
    } else if (typeof(name) !== 'string') {
      return (greeting)
    }
    return (`${greeting}, ${name}`);
  }
}

你可以做一个三元：

const greetCurried = (greeting) => {
  typeof(greeting) != 'string' ? 'Greetings' : greeting
    return (name) => {
      return typeof(name) != 'string' ? greeting : `${greeting}, ${name}`
    }
  return
}

const greetHello = greetCurried('Hello');

console.log(greetHello('Hedi'));

console.log(greetHello(5));

---

我想我会在函数返回另一个函数时添加另一个三元函数的例子。而不是if/else if：

function greetCurried (greeting) {
  return function (name) {
    if (typeof(greeting) !== 'string') {
      return ('Greetings!');
    } else if (typeof(name) !== 'string') {
      return (greeting)
    }
    return (`${greeting}, ${name}`);
  }
}

你可以做一个三元：

const greetCurried = (greeting) => {
  typeof(greeting) != 'string' ? 'Greetings' : greeting
    return (name) => {
      return typeof(name) != 'string' ? greeting : `${greeting}, ${name}`
    }
  return
}

const greetHello = greetCurried('Hello');

console.log(greetHello('Hedi'));

console.log(greetHello(5));

---

您的代码工作正常，您对初始值的假设是不正确的（请自己解释为什么值应该是“可见的”或“隐藏的”，甚至任何东西）-三元运算符不是

if

语句的紧凑方式。相反，它是一个“内联”

if/else

表达式。您的代码运行良好，您对初始值的假设是不正确的（您自己知道为什么该值应该是“可见的”或“隐藏的”，甚至任何东西）-三元运算符不是

if

语句的紧凑方式。相反，它是一个“内联”

if/else

表达式。尽管正确，但为了下一步代码编写者的爱，请不要嵌套三元运算符@杰里米同意了，只是为了对称起见把它指了出来。注意关于缺乏可读性的部分

：）

谢谢您的帮助。全部排序！虽然正确，但为了下一步将要处理代码的程序员的爱，请不要嵌套三元运算符@杰里米同意了，只是为了对称起见把它指了出来。注意关于缺乏可读性的部分

：）

谢谢您的帮助。全部排序！