带有双 & 符号的 "if" 简写答案

【问题标题】："if" shorthand with double ampersand带有双 & 符号的 "if" 简写
【发布时间】：2019-08-30 07:43:39
【问题描述】：

我看过这些行代码。

this.tween && this.tween.kill(),
this.tween = TweenMax.to(object, 1, {
  ...
})

这是简写吗

if(this.tween){
  this.tween.kill();
}
this.tween = TweenMax.to(object, 1, {
  ...
})

谢谢 ;)

【问题讨论】：

有几件事要带走，注意&& 而不是&，if 在可读性方面占上风，如果您最终扩展到多个语句块。跨度>
不要压缩开发代码，直接用if就行了。
我同意&& 的可读性不如if。这是一种“侧身Yo Yo problem”。您将阅读第一部分，查看 && 然后查看操作，您必须返回并阅读何时执行操作。这是因为当您开始阅读该行时不清楚它是否是有条件的。除非您正在做作业，否则这不是 JS 的惯用用法。它确实出现在 PHP 中，我认为 Ruby 和/或 PERL 如果无法建立连接，您可以使用像 db.connect() OR die() 这样的行来终止。

标签： javascript if-statement ampersand shorthand double-ampersand

【解决方案1】：

不完全是。

this.tween && this.tween.kill(),
this.tween = TweenMax.to(object, 1, {
  ...
})

如果this.tween 在此语句中是真实值，则对其进行评估并保留在那里。所以就变成了这样的代码。

this.tween,
this.tween = TweenMax.to(object, 1, {
  ...
})

【讨论】：

那怎么不让它变得相同，例如。你有没有一个例子，它会给出不同的结果。
我认为即使生成相同的结果，保留不必要的代码也不是一个好习惯。
这使其成为一种不好的做法，但效果仍然相同。

【解决方案2】：

是的，这是上面代码的简写。这里如果 this.tween 没有定义，“&&”后面的代码就不会被执行。之后“，”后面的代码将被执行。这里有一些例子：

this.a= undefined;
this.b= 20;
this.a && this.b.toString(),   // if a is true then b will be executed and converted to string
  console.log(this.b); // if a is true the output will be a string but in this case, a is undefined and the string conversion didn't happen, the console returns an integer

this.a = 10;
this.b=20
this.a && this.b.toString(),
  console.log(this.b); // this will return a string
  
if(this.a){ // if a is true be will be converted to string
this.b = parseInt(this.b);
}
this.a = this.b;  
console.log(this.a) // if a is true be will be converted back to integet and assigend to a

如果 a 未定义

// a is undefined then
this.a = undefined;
this.b=20
this.a && this.b.toString(),
  console.log(this.b); // this will return a integer
  
if(this.a){ // since a is undefined it will fail and conversion won't take place
this.b.toString();
}
this.a = this.b;  
console.log(this.a) // a integer is returned

【讨论】：

// this will return a string 不，它返回一个数字 - this.b.toString() 不会更改 b。它只是返回没有使用的值，所以它会被丢弃。

【解决方案3】：

是的，两者在执行上是等价的。

function test(value) {
  console.log(value);
  
  value && console.log("\texecute using AND");
  if (value) console.log("\texecuted using if");
}

test(true);
test(false);
test("string");
test(""); //empty string
test(0);
test(null);
test(undefined);
test(1);
test({});

但是，话虽如此，这并不是 JavaScript 的惯用用法。所以你可能不应该使用这个结构，因为它可能会让其他开发人员失望。您的示例很好地说明了这一点，代码看起来像

function f (condition) {
  condition && one(),
  two();
}

function one() {
  console.log("one");
}

function two() {
  console.log("two")
}

f(false);
f(true);

这确实有效

function f(condition) {
  if (condition) {
    one();
 }

  two();
}

所以，one() 会被执行几次，而two 总是会被执行。然而，在不知道优先规则的情况下，one() 和 two() 似乎both 都会有条件地执行。这是一个很容易犯的错误，如果它是一个复杂的条件和逻辑，那就更容易了

person.account.moneyAmount > 0 && creditor.getDebt(person).moneyOwed > 0 && person.account.moneyAmount > creditor.getDebt(person).moneyOwed  && (deductTaxes(payAndReturnAmount(person, creditor)), printStatement()), printHello()

这只是稍微夸张了一点，但完全有可能最终陷入类似的境地。如果您的代码与单个条件和单个操作一样简单，那么使用内联条件与 if 语句相比，您可以节省 2 字节

condition && action()
if (condition) action()
                     ^^
"extra" characters __||

【讨论】：

【解决方案4】：

如果"state"为"true"，则在Console中显示双&的右侧值"test" ：

let state = true // Here

function test() {
  return "test"
}

console.log(state && test()) // test

如果"state"为"false"，则Console中显示双&的左侧值"false" ：

let state = false // Here

function test() {
  return "test"
}

console.log(state && test()) // false

【讨论】：