金色小芝麻

vuePress-theme-reco 金色小芝麻    2021 - 2023
金色小芝麻 金色小芝麻

Choose mode

  • dark
  • auto
  • light
主页
分类
  • JavaScript
  • BUG复盘
  • SVG笔记
  • TypeScript
  • 个人总结
  • CSS笔记
  • 开发工具
  • 前端入门
  • Vue2.0
  • 性能优化
  • 架构学习
  • 每日一题
标签
时间轴
社交
  • 掘金 (opens new window)
author-avatar

金色小芝麻

83

文章

27

标签

主页
分类
  • JavaScript
  • BUG复盘
  • SVG笔记
  • TypeScript
  • 个人总结
  • CSS笔记
  • 开发工具
  • 前端入门
  • Vue2.0
  • 性能优化
  • 架构学习
  • 每日一题
标签
时间轴
社交
  • 掘金 (opens new window)
  • 前端入门

    • 博客搭建过程及相关配置
    • 数组中的16种常用方法
    • JS中的数据类型简析——基本数据类型值
    • JS中的数据类型object基础
    • JS中三种常见的判断
    • 数据类型之间的区别(堆内存Heap VS 栈内存Stack)
    • JS基础练习题及解析
    • 开关灯的小案例
    • JS中数据类型检测方法——typeof
    • 条件判断几个小练习
    • JS循环——for循环
    • 自定义属性实现选项卡小案例
    • 字符串中的12种常用方法
    • DOM操作的简单原理
    • JS实现隔行变色鼠标跟随小案例
    • JS中function的基础知识
    • JS中数组去重的三种方法
    • JS中时间格式化的三种方法
    • JS中URL参数处理的三种方法
    • JS小案例——获取随机验证码
    • DOM操作之——获取DOM标签的9种方式
    • DOM操作之——DOM节点类型及属性
    • DOM操作之——元素的增删改、样式修改、插入内容
    • JS中THIS相关问题梳理
    • JS中的变量提升机制
    • 在全局:私有上下文中:带VAR和不带VAR的区别
    • 作用域和作用域链查找机制
    • JS中堆栈内存的释放问题
    • JS中的闭包机制
    • ES3和ES6定义变量的区别
    • JS中的单例和工厂设计模式
    • JS中的面向对象OOP理论基础
    • 构造函数创建自定义类
    • JS中的原型和原型链
    • Math中常用的9种方法
    • 从一道阿里经典面试题剖析函数三种角色
    • 重写内置call
    • 重写一个内置new
    • 浏览器渲染页面的主体流程
    • 减少DOM的回流和重绘
    • JS中的多种继承方式
    • JS中数据类型检测四种方式的优缺点
    • JS中的正则表达式&&全面梳理
    • 非严格模式 🆚 严格模式的区别
    • 数组方法reduce、filter、flat
    • 获取数组中最大值/最小值的三种基础方法
    • 轮播图——渐隐渐显版
    • 深克隆 VS 浅克隆|深比较 VS 浅比较|回调函数
    • 轮播图——左右切换版
    • 事件及事件绑定、事件对象及事件传播
    • 从在地址栏输入网址到看到页面的过程&&AJAX基础
    • 想自学JS吗?想提升JS底层原理吗?76张脑图带你彻底搞懂原生JS
    • 面试手写API系列
    • 30张脑图带你从零开始学VUE
    • JS中的盒子模型
    • 初识JS-基础中的基础
    • 前端发展简史
    • JS中的三大类输出方式

JS中三种常见的判断

vuePress-theme-reco 金色小芝麻    2021 - 2023

JS中三种常见的判断

金色小芝麻 2020-03-12

JS中的条件判断可以说在整个编程的重点中算是最为简单的了;

  • 主要有if...else if...else,三元运算符,switch...case;
  • 其中严格来说三元运算符并不算条件判断的一种方式,而应该算是对简单if...else条件语句的一种改写方式。

# 一、if...else if...else

编程中最常见的判断

  • 定义:
    • 条件语句用于基于不同条件执行不同的动作。
    • 使用 if....else if...else语句来选择多个代码块之一来执行。
  • 语法:
if (条件 1) {
    条件 1 为 true 时执行的代码块
} else if (条件 2) {
    条件 1 为 false 而条件 2 为 true 时执行的代码块
} else {
    条件 1 和条件 2 同时为 false 时执行的代码块
}
  • 注意:if条件为一个值时会转换为布尔值:
    • 转换后的结果是 true就表示条件成立
    • false 表示条件不成立
  • 举例:
let x = 10;
if (x) {
    条件(验证真假的过程):
    x==10 x===10  x>10  x<10  x>=10 ...
    x 把当前值转换为布尔类型验证真假
    x>=0 && x<=10  或者  x==1 || x==2
    ....
    x++;
} else {
    以上条件都不成立,执行else
    x--;
}
console.log(x);
//=======================================//
let x = '10';
if (x == 1) {
    x += 1;
} else if (x == 5) {
    x += 2;
} else if (x == 10) { //=>'10'==10  把字符串转换为数字  条件成立
    x += 3;
    // x = x + 3  => '103'
} else {
    x += 4;
}
console.log(x);

# 二、三元运算符

在文章的开头我们已经说过,严格上讲,三元运算符并不算是一种判断。

  • 使用情况:

    • 处理最简单的if / else 情况的
  • 语法:

    • 条件?成立处理的事情:不成立处理的事情;
    let x = 10;
    if (x>=10) {
        x++;
    } else {
        x--;
    }
    //用三元运算符书写如下:
    x >= 10 ? x++ : x--;
    console.log(x);
    
  • 注意:

    • 在条件成立或者不成立的时候,如果不想做一些事情,则使用null / undefined 等来占位即可;
      • 一般用null
      • 不占位会报错
    let x = 10;
    if (x == 10) {
        x++;
    }
    //三元运算符方式
    let x = 10;
    x == 10 ? x++ : null;
    
    • 如果需要做多件事情,则用小括号包起来,每一件事情中间用逗号隔开
    // 如果需要做多件事情,则用小括号包起来,每一件事情中间用逗号分隔即可
    let x = 10;
    if (x > 0) {
        x++;
        console.log(x);
    }
    x > 0 ? (x++, console.log(x)) : null;
    
    // 可以根据需求完成三元运算符的嵌套
    let x = 10;
    if (x > 0) {
        if (x < 10) {
            x++;
        } else {
            x--;
        }
    } else {
        x--;
    }
    x > 0 ? (x < 10 ? x++ : x--) : x--;
    

# 三、switch...case

  • 使用情况:

    • 一个变量在不同值情况下的不同操作,可以改写为switch case 判断
  • 语法:

    • 每一种情况结束都要设置break
      • 以供当此条件成立并处理完事情后,通知代码不在向下执行
    • 关键词规定不存在 case 匹配时所运行的代码
      • 相当于else (用default代替)
      • 而且最后一个判断结束无需设置break
    switch(表达式){
        case 值1:
            表达式的值和 值1匹配上了,需要执行的代码;
            break;
        case 值2:
            表达式的值和 值2匹配上了,需要执行的代码;
            break;
        default:
            如果表达式的值和以上的case后面的值都没有匹配上,那么就执行这里的代码。
            break;
    }
    
  • 局限:

    • 他只能应用于等于什么值做什么事,不能用于大于或者小于啥的
  • 注意:

    • 每一种case情况都是基于 === 进行比较的
    • 严格比较,需要保证数据类型的一致
let x = '10';
switch (x) {
    case 1: //=>在x等于1的情况下做什么
        x += 1;
        break; //=>每一种情况结束都要设置break(以供当此条件成立并处理完事情后,通知代码不在向下执行)
    case 5:
        x += 2;
        break;
    case 10: //=>'10'===10  FALSE
        x += 3;
        break;
    default: //=>等价于else,而且最后一个判断结束无需设置break
        x += 4;
}
console.log(x); //=>'104'  每一种case情况都是基于 === 进行比较的(严格比较,需要保证数据类型的一致)

# 四、相关的散知识点

# 1、比较两个值是否相等的三种方式

  • 1、== 相等
    • 相等比较中,如果左右两边数据类型不同,则默认先转换为相同的数据类型,然后在进行比较
  • 2、=== 绝对相等
    • 需要保证左右两边数据类型都一样,才会相等,只要有不一样,结果都是不想等的
  • 3、Object.is ES6规范中新增的方式(暂不讲解)

# 2、逻辑与 与 逻辑或

  • 在条件语句中出现时
    • 1、逻辑与&&:表示条件必须都成立
    • 2、逻辑或||:表示条件只要有一个成立即可
  • 参数初始化(形参初始化)时
    • A&&B:A为真返回B的值,A为假返回A的值
    • A||B:先验证A的真假,如果A为真,返回的是A的值,如果A为假返回的是B的值
    • &&的优先级高于||

# 3、条件判断里的相互转换规则

如图:

# 思维导图

欢迎来到 金色小芝麻
看板娘