后增量运算符直到评估后才增加变量[重复]

Posted 2023-02-22

【中文标题】后增量运算符直到评估后才增加变量[重复]

【英文标题】：Post-increment operator does not increment variable until after evaluation [duplicate]

【发布时间】：2017-04-18 11:01:54

【问题描述】：

我正在寻找一个原因，说明为什么增量运算符不会在我设置 innerhtml 值的位置增加数值，如下所示：

<div id="php"></div>

var a = 14;
document.getElementById("php").innerHTML = a++;//the result will be 14 instead of 15

【问题讨论】：

虽然我个人使用增量运算符，这没关系，因为我知道自己在做什么，而且我认为这很好，关于这被标记为重复的问题中的建议值得一看at，作为避免您遇到的那种混淆的一种方法，包括将增量语句单独放在单独的行上，或者改为写a += 1。尽管一些拒绝阅读任何文档的纯粹主义者可能会反对，但documentation 非常清楚。

(cont'd) 它说，增量运算符递增（加一）它的操作数并返回一个值。如果使用后缀，操作数后面有运算符（例如，x++），则返回值之前递增。

@torazaburo：那么为什么在 alert(a++) 中工作正常，并且在 innerHTML 返回值然后增加它！ .

让我们谈谈问题中提供的代码，尝试 alert(a++) ，它将生成正确的值 15 ，但如果我使用 docment.getElementById("php").innerHTML=a++;它会先返回值然后递增，所以为什么在警报中也没有发生这种情况（警报旧的然后递增）

【参考方案1】：

它确实增加了变量，但是它写入到 innerHTML 然后增加了值，你可以使用++a 它将在写入到 innerHTML 之前增加值。

var a = 14
var b = 14
console.log('before a', a)
document.getElementById("test1").innerHTML = a++
console.log('after a', a)

console.log('before b', b)
document.getElementById("test2").innerHTML = ++b
console.log('after b', b)

<div id="test1"></div>
<div id="test2"></div>

【讨论】：

但如果我使用 alert(a++) ，它会正常工作，并且警报将具有新的增量值

您的提醒行为与我的提醒不同。重启？

【参考方案2】：

因为你使用后缀increment operatorvariable++，这意味着你先获取值，然后变量递增。

使用前缀自增运算符++variable时，变量先自增再返回值。

var a = 42;
console.log(a++); // shows 42, value is 43
console.log(a);   // 43
console.log(++a); // 44
console.log(a);   // 44

【讨论】：

但如果我使用了 alert(a++) ，它会正常工作，并且警报将具有新的增量值

@mina，我无法证明这一点。

@mina 不会的。

如果您要反刍任何 JS 文档、书籍或教程中现成的信息，OP 可以通过最简单的搜索找到这些信息，那么至少要麻烦指出这样的参考，对使用递增/递减运算符的利弊发表意见，或以其他方式增加价值。您可能还明确驳斥了他/她明显混淆的 OP，即他们报告的行为与innerHTML 有关。当您使用它时，您还可以参与争取让人们停止使用 innerHTML 来获取纯旧文本。

@torazaburo，innerHTML 不是问题。这是一个小问题，但即使改变了，也会出现op的问题。

【参考方案3】：

您可以使用++a 代替a++ 在变量赋值之前获取增量：

var a = 14;
document.getElementById("php").innerHTML = ++a;

<div id="php"></div>

【讨论】：

但如果我使用 alert(a++) ，它会正常工作，并且警报将具有新的增量值