JavaScript数组元素校验函数异常：单独判断有效，组合后失效

我写了一段JavaScript代码用来排查数组元素的各类异常（空数组、非数字元素、非整数元素、负数、过大数值），单独用单个IF判断时功能正常，但组合成if/else if结构后就失效了，求解释问题出在哪。

原代码 #

/** Check the elements of the array on:
* The array is empty
* Array element/s is/are not a numbers
* Among elements there is not an integers
* Among elements there is a negative number/s
* Among elements there is a too large numbers
*/
const parbaude = (mas) => {
    var response = [true, "... No problem found!"];
    if (mas.length == 0) {
        response = [false, "... Your array is empty!"];
    } else if (mas.filter(item => typeof item !== 'number')) {
        response = [false, "... Only numbers are allowed!"];
    } else if (mas.filter(item => !Number.isInteger(item))) {
        response = [false, "... Enter integer only!"];
    } else if (Math.min(...mas) <= 0) {
        response = [false, "... Only positive numbers are allowed!"];
    } else if (Math.max(...mas) > 1000) {
        response = [false, "... The number is too large: n < 1000!"];
    } else {
        // Return the test result
        return response;
    }
};
//  !!! Try each of these options !!!
//const mas = [];
//const mas = [3, 'd', 7, 9];
//const mas = [3, 4.6, 7, 9];
const mas = [3, -4, 7, 9];
//const mas = [3, 4000, 7, 9];
//const mas = [3, 4, 7, 9];
document.getElementById("izvade").innerHTML = parbaude(mas);

问题原因分析 #

1. filter方法的返回值导致条件判断逻辑错误 #

mas.filter(item => typeof item !== 'number')返回的是数组，而JavaScript中只要是非空数组，在条件判断里都会被视为true。哪怕数组里只有一个不符合条件的元素，这个判断都会永远成立，直接触发该分支，导致后续的else if分支完全无法执行。

正确的做法是用Array.some()方法——它只要检测到有一个元素满足条件就返回true，正好匹配我们“只要存在一个不符合项就触发异常”的需求：

• 将mas.filter(item => typeof item !== 'number')替换为mas.some(item => typeof item !== 'number')
• 将mas.filter(item => !Number.isInteger(item))替换为mas.some(item => !Number.isInteger(item))

2. 函数分支缺少return语句 #

在第一个到倒数第二个if/else if分支中，你只修改了response变量，但没有返回这个值。比如当数组为空时，执行第一个if的代码修改response后，函数会继续往下执行，最终因不满足else分支的条件，返回undefined而非期望的response数组。

解决方法是在每个分支修改response后立即return，或者在函数末尾统一返回response。

修正后的代码 #

/** 校验数组元素：
* 数组是否为空
* 是否包含非数字元素
* 是否包含非整数元素
* 是否包含负数
* 是否包含超过1000的数值
*/
const parbaude = (mas) => {
    let response = [true, "... No problem found!"];
    if (mas.length === 0) {
        response = [false, "... Your array is empty!"];
    } else if (mas.some(item => typeof item !== 'number')) {
        response = [false, "... Only numbers are allowed!"];
    } else if (mas.some(item => !Number.isInteger(item))) {
        response = [false, "... Enter integer only!"];
    } else if (Math.min(...mas) <= 0) {
        response = [false, "... Only positive numbers are allowed!"];
    } else if (Math.max(...mas) > 1000) {
        response = [false, "... The number is too large: n < 1000!"];
    }
    // 统一返回结果，无需在else分支单独return
    return response;
};
//  !!! 尝试以下测试用例 !!!
//const mas = [];
//const mas = [3, 'd', 7, 9];
//const mas = [3, 4.6, 7, 9];
const mas = [3, -4, 7, 9];
//const mas = [3, 4000, 7, 9];
//const mas = [3, 4, 7, 9];
document.getElementById("izvade").innerHTML = parbaude(mas);

内容的提问来源于stack exchange，提问作者Pāvels Proskurovskis