Vanilla JavaScript中if语句异常：满足条件未输出console.log却推入NaN

核心问题在于NaN的类型本身就是number——你用+input.value转换非数字内容时，得到的结果是NaN，但typeof NaN会返回'number'，所以你的判断条件typeof num === 'number'永远为真，错误分支的console.log根本不会执行，反而把无效的NaN塞进了数组里。

你换成else if (typeof num !== 'number')也没用，因为这个条件永远不成立，自然还是走不到错误逻辑里。

给你几个可行的修改方案：

方案1：用Number.isNaN()精准判断 #

Number.isNaN()只会对真正的NaN返回true，不会像全局isNaN()那样把非数字类型误判，是最靠谱的方式：

const button = document.getElementById('btn');
const input = document.getElementById('amount');

let list = [];

button.addEventListener('click', () => {
    let num = +input.value;

    if (!Number.isNaN(num)) {
        list.push(num);
        console.log(list);
    } else {
        console.log('Error. Try again and type in a number');
    }
})

方案2：结合类型判断和全局isNaN #

如果需要兼容旧环境，也可以用这个组合判断：

const button = document.getElementById('btn');
const input = document.getElementById('amount');

let list = [];

button.addEventListener('click', () => {
    let num = +input.value;

    if (typeof num === 'number' && !isNaN(num)) {
        list.push(num);
        console.log(list);
    } else {
        console.log('Error. Try again and type in a number');
    }
})

方案3：同时校验输入非空 #

如果要避免用户输入空字符串也被转成0的情况，可以加个空值判断：

const button = document.getElementById('btn');
const input = document.getElementById('amount');

let list = [];

button.addEventListener('click', () => {
    const inputVal = input.value.trim();
    let num = +inputVal;

    if (inputVal !== '' && !Number.isNaN(num)) {
        list.push(num);
        console.log(list);
    } else {
        console.log('Error. Try again and type in a number');
    }
})

内容的提问来源于stack exchange，提问作者Nail Val