如何防止未分配的变量显示未定义?

Question

我有一个变量let numbers;，我在按钮上有一个事件监听器，当按钮被按下时，按钮的值将被显示。

let numbers;
function btnClick(event){

numbers += this.value
display.value = numbers
}

当我按下例如7时，它将显示如下undefined7。如何去除undefined?

Answer 1

因为您没有初始化numbers，所以它不仅初始化为undefined，而且没有与它相关联的类型。稍后，当您使用+=this.value时，使用按钮的value(这是一个字符串)，并且因为+操作符在其中一个操作数是字符串时执行字符串连接，因此您可以获得undefined的numbers的原始值与按钮的值连接。

要解决这个问题，您应该将numbers初始化为某个初始值，该值应该是一个隐式数字，以便当+=出现时，将执行数字加法而不是字符串连接。值0是有意义的，因为它不会偏离数学:

document.querySelector("[type='button']").addEventListener("click", btnClick);
const display = document.querySelector("[readonly]");
let numbers = 0;
function btnClick(){
// The prepended + implicitly converts the string (this.value) to a number
numbers += +this.value
display.value = numbers;
}

<input type="button" value="5">
<input readonly>

Answer 2

可以使用三元操作符赋值，不加undefined

let numbers;
function btnClick(){
numbers = numbers === undefined ? this.value: numbers += this.value;
display.value = numbers;
}