在javascript中修改和编写一个输入html值

Question

我正在做一个前端计算器项目，但我真的不理解Javascript中的奇怪行为。这是我的脚本:

const keys = document.querySelectorAll(".number");
const screen = document.querySelector("#screen");
let number = screen.value;
keys.forEach((key) => {
key.addEventListener("click", (event) => {
let refresh = (number += key.textContent).toString();
console.log(number);
screen.value = refresh;
});
});

谁能告诉我为什么我要改变这一行

screen.value = refresh;

和这个

number = refresh;

我在屏幕上的值不更新，尽管在我的控制台上它正在更新?这两个不同的名字不就是同一件事吗?

谢谢

Answer 1

这是由于字符串变量被赋值而不是引用造成的。这意味着当您调用let number = screen.value时，它只将number设置为screen.value在那一刻的值。但如果你改变其中一个，另一个保持不变。

对于基本类型，如数字、字符串和布尔值，这是正确的。对象和数组变量被分配引用，这意味着通过一个变量更改对象将反映在指向同一对象的所有其他变量中。

Answer 2

这是因为您使用了这一行:

console.log(number);

那么你将首先打印'number'变量然后你将更新这个变量的值，所以这就是问题所在

如果你想解决这个问题，你必须把这些行的顺序颠倒一下，像这样:

screen.value = refresh;
console.log(number);

我希望我对你有所帮助;)