js的switch处理范围筛选和NaN的巧妙判断

最新推荐文章于 2024-03-05 12:42:43 发布

咸蛋不会翻身

最新推荐文章于 2024-03-05 12:42:43 发布

阅读量1.5k

点赞数 2

分类专栏：【博学谷学习记录】超强总结，用心分享

本文链接：https://blog.csdn.net/qq_36145110/article/details/126804188

版权

javascript

【博学谷学习记录】超强总结，用心分享专栏收录该内容

21 篇文章 0 订阅

订阅专栏

通常switch都被用来处理比较确定值，而范围类的都是用if else if 来出来。

但是呢，其实switch也可以用来处理范围类的数据，

首先我们观察一下switch的结构

switch(表达式){

case value1:执行语句1;break;

case value2:执行语句2;break;

case value3:执行语句3;break;

default:执行语句4;

}

就是判断表达式全等于value的值才会判断 value后面所对应的语句，

如果换个思路来说其实全等于左右可以互换也就是 value 全等于表达式

那么就会变成这样

switch(value){

case 表达式1:执行语句1;break;

case 表达式2:执行语句2;break;

case 表达式3:执行语句3;break;

default:执行语句4;

}

这样就可以实现筛选多个表达式，从而筛选范围

说这么多，我们来举个例子

通过switch case 完成成绩的查寻，

我们用输入框输入一个成绩，来判断成绩的等级

提示：90-100分为优秀，70-89为良好，60-69为及格，60分以下为还需要继续努力，当输入为非数字的时候显示非法字符。

首先我们分析了一下分数的范围可以采用大于等于表达式来处理

而非数字字符我们可以通过 NaN来判定

因为我们知道当一个非数字通过 Number转换以后会变成 NaN

那么我们就可以通过判断这个值是不是NaN来判断他是不是一个数字

很多人一上头就会直接用等式来判断 Number('我是一个文字')==NaN，其实这个等式在判断的时候是返回false的！

虽然 Number(’我是一个文字‘)是等于NaN，但是呢 NaN是不等于NaN的

因为NaN 是代表我不是一个数字这个含义， Number('我是一个文字')是NaN

Number('我是一个文字11111')也是NaN

Number('我是一个文字') 是不等于 Number('我是一个文字11111')的

所以NaN和NaN之间是不相等的

既然如此，那么我们要怎么判断这个值是否为NaN呢

那么我们可以使用字符串的一个特性就是任何类型和字符串相加都会拼接

那么我们把 NaN 加上一个空字符他就会转换成 ’NaN‘

也即是 Number('我是一个文字11111')+‘’=’NaN‘

我们只要判断他加上一个空字符串以后是否为'NaN'就可以判断他是不是非数字

好了说这么多，我们上代码！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>switch 做复杂判断</title>
</head>
<body>
    <script>
        //通过switch case 完成成绩的查寻
        //提示：90-100分为优秀，70-89为良好，60-69为及格，60分以下为还需要继续努力
        var scores= Number( prompt('请输入您的成绩'));
        var result;
        switch(true){
            // 如果scores输入的是数值 那么 他加上空字符串  会变成数值的字符串
            // 如果scores传入的是非数字 那么 则会变成 NaN和空字符拼接 变成NaN的字符串
            case (scores+''=='NaN'):result='输入的是非法字符';break;
            case (scores>=90):result='优秀';break;
            case (scores>=70):result='良好';break;
            case (scores>=60):result='及格';break;
            default:result='还需要继续努力';
        }
        alert(result);
    </script>
</body>
</html>

#【博学谷学习记录】超强总结，用心分享#