JavaScript 进阶第一章(分支结构)

简介: JavaScript 进阶第一章(分支结构)

switch-case分支结构


1.语法


switch(表达式){    // 不是布尔类型:是一个确定的变量

   case 值1:     // 值1,值2...都是字面量

       表达式的结果 === 值1,需要执行的代码

       break;

   case 值2:

       表达式的结果 === 值2,需要执行的代码

       break;

   case 值3:

       表达式的结果 === 值3,需要执行的代码

       break;

   default:

       表达式的结果和上面所有的case后面的值都不全等,则会执行这里的代码

       break;

}


2.注意事项


1.表达式的结果要和值一定是全等的关系 ===


2.break作用:结束该switch语句,所以一般情况下要加上,如果不加上则会发生穿透

穿透:从上一个case代码快执行到下一个case代码快

break关键字的作用就是防止穿透


3.default语句可以写在任何地方,可以省略,一般写在最后,这是一种代码规范


switch-case穿透用法


<script>
    /**合理穿透:当存在多种值需要执行相同代码时使用穿透可以节省代码
     * 用户输入某一个月份,告诉用户这个月份属于什么季节
     * 12,1,2 冬季
     * 3,4,5 春季
     * 6,7,8 夏季
     * 9,10,11 秋季
     */
    let month = +prompt("请输入月份");
    switch (month){
        case 12:
        case 1:
        case 2:
            alert("冬季");
            break;
        case 3:
        case 4:
        case 5:
            alert("春季");
            break;
        case 6:
        case 7:
        case 8:
            alert("夏季");
            break;
        case 9:
        case 10:
        case 11:
            alert("秋季");
            break;
        default:
            alert("没有这个季节哦");
            break;
    }
</script>


三元表达式(重点)


1.运算符根据参与运算的值数量分为一元、二元、三元运算符


一元运算符:只能操作一个值 ++ -- !

二元运算符:操作两个值 1 + 1 1 > 0

三元运算符:操作三个值


2.三元运算符语法


三元运算符: ?:

三元表达式:

表达式?代码1:代码2


1.如果表达式成立则执行代码1,否则执行代码2


2.如果代码1或者代码2有运算结果则三元运算式的结果就是他们其中的一个

三元运算符做的事和if-else类似,只是代码更简洁

三元表达式中:表达式部分永远是条件,最终代表整个结果的不是代码1 就是 代码2


<script>
    /*
    一元运算符:由一个值参与的运算符  :  a++    a--  !a
     二元运算符:  由两个值参与的运算符 :  a + b   a > b
     三元(三目)运算符:由三个值参与的运算符
    */
    /*
     * 三元运算符:  ?:
     * 三元表达式:   表达式?代码1:代码2
     *      * 1.如果表达式成立则执行代码1,否则执行代码2
     *      * 2.如果代码1或者代码2有运算结果则三元运算式的结果就是他们其中的一个
     *
     * 三元运算符做的事和if-else类似,只是代码更简洁
     */
    //案例1:
    let num1 = 10;
    num1 > 0 ? console.log('哈哈') : console.log('嘿嘿');
    //上面这个三元表达式等价于下面的if - else语句
    // if(num1 > 0){
    //     console.log ( "哈哈" );
    // }else{
    //     console.log ( "嘿嘿" );
    // }
    //案例2:三元表达式一般应用是用来赋值
    let num2 = 20;
    let res2 = num2 > 0 ? num2 + 1 : num2 - 1;
    console.log ( res2 ); // 21
    // 上面这个三元表达式等价于下面的if - else语句
    // if(num2 > 0){
    //     res2 = num2 + 1;
    // }else{
    //     res2 = num2 - 1;
    // }
    //练习:输出性别  (实际开发中,性别通常会使用一个布尔类型来存储,这样存储效率更高)
    let name = "海海";
    let age = 18;
    let gender = true;      // true男 1         false 女 0
    console.log("我的名字是"+name+",我的年龄是"+age+",我是一个"+(gender === true ? "男":"女")+"生");
</script>


三种分支结构语法总结


1.原则上,三种分支结构语句之间可以互转,只不过每一种分支结构语句适用场景不一样


2.if分支结构:适合条件判断

最常用:if-else 两种互斥条件判断


3.switch-case 适合做固定值匹配


4.三元表达式: 比if-else代码更简洁,在项目中最常见


相关文章
|
6月前
|
前端开发 JavaScript 开发者
JavaScript进阶-Promise与异步编程
【6月更文挑战第20天】JavaScript的Promise简化了异步操作,从ES6开始成为标准。Promise有三种状态:pending、fulfilled和rejected。基本用法涉及构造函数和`.then`处理结果,如: ```javascript new Promise((resolve, reject) =&gt; { setTimeout(resolve, 2000, &#39;成功&#39;); }).then(console.log); // 输出: 成功
92 4
|
6月前
|
存储 JavaScript 前端开发
JavaScript进阶-Map与Set集合
【6月更文挑战第20天】JavaScript的ES6引入了`Map`和`Set`,它们是高效处理集合数据的工具。`Map`允许任何类型的键,提供唯一键值对;`Set`存储唯一值。使用`Map`时,注意键可以非字符串,用`has`检查键存在。`Set`常用于数组去重,如`[...new Set(array)]`。了解它们的高级应用,如结构转换和高效查询,能提升代码质量。别忘了`WeakMap`用于弱引用键,防止内存泄漏。实践使用以加深理解。
83 3
|
5月前
|
XML 前端开发 JavaScript
JavaScript进阶 - AJAX请求与Fetch API
【7月更文挑战第3天】前端开发中的异步基石:AJAX与Fetch。AJAX,使用XMLHttpRequest,处理跨域、回调地狱和错误处理。Fetch,基于Promise,简化请求,但需注意默认无跨域头和HTTP错误处理。两者各有优劣,理解其问题与解决策略,能提升前端应用的性能和用户体验。
160 24
|
5月前
|
前端开发 JavaScript 安全
JavaScript进阶-JavaScript库与框架简介
【7月更文挑战第11天】JavaScript库和框架加速Web开发,但也带来挑战。选择适合项目、团队技能的库或框架,如React、Angular、Vue,是关键。保持依赖更新,注意性能优化,避免过度依赖。遵循最佳实践,确保安全性,如防XSS和CSRF。学习基础,结合代码示例(如React计数器组件),提升开发效率和应用质量。
67 1
|
5月前
|
缓存 JavaScript 前端开发
JavaScript进阶 - Web Workers与Service Worker
【7月更文挑战第4天】JavaScript的Web Workers和Service Worker增强了Web性能。Web Workers处理后台多线程,减轻主线程负担,但通信有开销,受同源策略限制。Service Worker则用于离线缓存和推送通知,需管理其生命周期、更新策略,并确保安全。两者都带来了挑战,但也极大提升了用户体验。通过理解和优化,开发者能构建更高效、安全的Web应用。
140 2
|
5月前
|
资源调度 JavaScript 前端开发
JavaScript进阶 - JavaScript库与框架简介
【7月更文挑战第5天】JavaScript库和框架构成了前端开发的核心,如jQuery简化DOM操作,Angular、React和Vue提供全面解决方案。选择时要明确需求,避免过度工程化和陡峭学习曲线。使用版本管理工具确保兼容性,持续学习以适应技术变化。示例展示了jQuery和React的简单应用。正确选择和使用这些工具,能提升开发效率并创造优秀Web应用。
55 2
|
5月前
|
设计模式 前端开发 JavaScript
JavaScript进阶 - JavaScript设计模式
【7月更文挑战第1天】JavaScript设计模式增进代码复用和维护性。单例模式确保唯一实例,用闭包防止命名冲突和控制状态访问。观察者模式实现一对多依赖,通过解绑避免内存泄漏。工厂模式封装对象创建,适度使用避免复杂度。装饰者模式动态添加行为,保持简洁以保可读性。理解模式的优缺点,灵活应用,提升代码质量。
131 3
|
5月前
|
存储 前端开发 安全
JavaScript进阶 - 浏览器存储:localStorage, sessionStorage, cookies
【7月更文挑战第2天】探索Web存储:localStorage持久化,sessionStorage会话限定,cookies则伴随HTTP请求。了解它们的特性和限制,如localStorage的5MB容量限制、跨域问题,sessionStorage的生命周期,及cookies的安全与带宽消耗。使用时需权衡安全、效率与应用场景。示例代码展示存储与检索方法。
347 2
|
6月前
|
JavaScript 前端开发 算法
虚拟DOM是React的关键技术,它是个轻量的JS对象树,模拟实际DOM结构。
【6月更文挑战第27天】虚拟DOM是React的关键技术,它是个轻量的JS对象树,模拟实际DOM结构。当状态改变,React不直接修改DOM,而是先构建新的虚拟DOM树。通过 diff 算法比较新旧树,找到最小变更,仅更新必要部分,提高性能,避免频繁DOM操作。虚拟DOM还支持跨平台应用,如React Native。它优化了更新流程,简化开发,并提升了用户体验。
45 1
|
6月前
|
JavaScript 前端开发
JavaScript进阶-Class与模块化编程
【6月更文挑战第21天】**ES6引入Class和模块化,提升JavaScript的代码组织和复用。Class是原型机制的语法糖,简化面向对象编程。模块化通过`import/export`管理代码,支持默认和命名导出。常见问题包括`this`指向和循环依赖。理解这些问题及避免策略,能助你写出更高效、可维护的代码。**
66 5