js基础（1）js 学习方法在js代码执行中从上至下执行续上期的作业解答: js 运算符赋值运算符 /* =,

js 学习方法

        // 步骤1  书写  逻辑(也就是思路)   
        // 步骤2  分析条件  并简要书写代码
        // 步骤3  分析 运行原理
        // 步骤4  进行 调试配合 开发工具 并 排除Bug

在js代码执行中从上至下执行

续上期的作业解答:

        // 1. var num = 3 - '36' % 5 + '2' - 2
        var num = 3 - '36' % 5 + '2' - 2
        /**
         *  var num = 3 - '36' % 5 + '2' - 2
         *          = 3 - 1 + '2' - 2
         *          = 2 + '2' - 2
         *          = '22' - 2
         *          = 20
        */

       // 2. 不考虑四舍五入 将一个数字进行保留两位小数 parseInt

        /**
         *  逻辑:
         *      1. 将这个小数 放大 100 倍 (小数点向右移动两位)
         *      2. 使用 parseInt 忽略小数点后续的内容 (删除没有用的数字)
         *      3. 将这个整数 缩小 100 倍 (小数点向左移动两位)
        */

        // var num1 = 123.456789
        // // 1. 将这个小数 放大 100 倍 (小数点向右移动两位)
        // var num2 = num1 * 100
        // // 2. 使用 parseInt 忽略小数点后续的内容 (删除没有用的数字)
        // var num3 = parseInt(num2)
        // // 3. 将这个整数 缩小 100 倍 (小数点向左移动两位)
        // var num4 = num3 / 100
        // console.log(num4)

        var num1 = 123.456789
        num1 = parseInt(num1 * 100) / 100
        console.log(num1)   // 1 次使用
        console.log(num1)   // 2 次使用
        console.log(num1)   // 3 次使用

js 运算符

赋值运算符

/* =, +=, -=, *=, /=, %=,
< >= <= !== != (判断左右两边的数值, 是否不相等, 返回值是一个布尔值, 这个不等于不会对比数值的类型) */

        // var num = 1
        // // num = num + 1
        // num += 3    // 相当于 num = num + 3
        // console.log(num)    // 4

        var num = 1
        // num = num - 1
        num -= 1    // 相当于 num = num - 1
        console.log(num)

小练习

         var num = 2;
         num *= 2;  // 相当于num = num * 2;
         console.log(num); // 4
        
         num /= 2;  // 相当于num = num / 2;
         console.log(num); // 1

         num %= 3;  // 相当于num = num % 3;
         console.log(num); // 3

比较运算符

== (不全等)判断左右两侧的数值是否相等，返回值是一个布尔值，这个等号不会对比数值的类型

实例: 100 ==200

=== (全等)左右两边的数值，是否相等,并且会对比数值的类型

console.log(100 !== 200);   // true
       console.log(200 != 200);    // false
       console.log(100 != 200);    // true
       console.log(100 == 200);    // flase
       console.log(200 == 200);    // true
       console.log('200' == 200);  // true
       console.log(100 === 200);   // false
       console.log(200 === 200);   // true
       console.log('200' === 200); // false
       console.log(200 > 100);     // true
       console.log(200 < 100);     // false
       console.log(200 >= 100);    // true
       console.log(200 <= 100);    // flase
       console.log(100 !== 200) // true
       console.log(200 !== 200) // false
       console.log('100' !== 200) // true

// 扩展: 声明多个变量
     var num1 = 10,
     var num2 = 20,

     var num1 = 10,
         num2 = 20,
         num3 = 30,
     console.log(num1, num2, num3);

403 404表示:在访问时有权限
505表示服务器崩了

if分支结构 / if判断语句

     /*
             逻辑运算符：
                && 逻辑与
                    语法：  变量A && 变量B
                           代码A && 代码B
                运行逻辑：
                         1.检测符号左边的运算符布尔值是否为 true，那么运行符号右边的或者返回符号右边的
                         2.如果符号左边的布尔值为 false，那么直接返回左边的（不是返回左边的布尔值       
                || 逻辑或
                     语法： 变量A || 变量B
                           代码A || 代码B
                  运行逻辑：
                         1.检测符号左边的布尔值是否为 true,如果为true，直接返回左侧的值(注意不是布尔值)
                         2.检测符号左边的布尔值是否为 true, 如果不是, 直接返回右侧的值 (注意! 不是布尔值)   
                !  逻辑非(取反)  !变量/代码
                将数据原本的布尔值, 做一个取反操作
                   运行逻辑：
                          1.数据原本为 true, 那么返回的是 false
                          2.数据原本为 false, 那么返回的是 true
             */

特别重要

++ -- 跟在变量的前或者后一道面试题: 自增自减运算符写在变量的前或者后有什么区别

 如果在变量前:
 先将当前变量的值 自增或者自减 1, 然后参与周围程序
      
  如果在变量后:
  先参与周围程序, 后续在自增或者自减 1

        var num = 1
         console.log(num++)   // 1
         console.log(++num)  // 2

        console.log(num++)  // 1
        console.log(num)    // 2


         console.log(true && false)  // false
         console.log(false && true)  // false
         console.log(1 && 0)  // 0
         console.log(0 && 1)  // 0

         console.log(true || false)  // true
         console.log(false || true)  // true
         console.log(1 || 0) // 1
         console.log(0 || 1) // 1

         console.log(true)
         console.log(!true)
         console.log(!0)

JS 分支结构

/*

分支语句

正常我们书写的代码, 一定都会执行, 但是如果想要根据某一个条件决定是否执行一段代码

 此时必须要依赖分支语句

 示例:

    在网络请求中, 请求有可能成功, 也有可能失败

 在当前示例中, 我们需要根据 请求的结果是否成功, 决定展示哪一个页面
   
   if分支语句 或则 if判断语句
   语法: if(条件){如果条件为真，则执行该代码}; 
   条件  最后一定成为一个布尔值,不管书写的是变量还是表达式

   if 语句的 else...if 的写法
          如果 第一个 if 执行, 那么会跳过后续的 else if
          如果 第一个 if 不执行, 那么会判断后续的 else if 有没有能执行的
    if 语句 最后可以再加一个 else 分支,else 分支一定要书写在 if 分支的最后
*/

小练习

/*
         *  当前变量 code 模拟的是 请求是否成功
         *  我们约定:
         *      如果 code === 0, 代表失败
         *      如果 code === 1, 代表成功
*/
//  if (code === 0) {
//     console.log('如果我打印了, 说明当前请求失败了')
//     }
//     if (code === 1) {
//        console.log('说明当前请求成功')
//     }
if (code === 0) {
            console.log('如果我打印了, 说明当前请求失败了')
        } else if (code === 1) {
            console.log('说明当前请求成功')
        } else if (code === 2) {
            console.log('不知道为什么, code === 2')
        } else {
            console.log('如果我打印了, 说明 当前分支之前的所有分支都不成立')
        }

重点

    if (undefined) { console.log('123'); }
  //  undefined 转换为布尔值为 false 所以不执行花括号内代码段
      if (!undefined) { console.log('456'); }
     // undefined 取反后子啊转化为布尔值为 true 所以执行花括号内代码段

练习一下

  /*问题： 判断一个正整数是否偶数*/
    
    /*
       1.使用分支结构完成
            2. 条件是什么？
                2.1 这个正整数是否为偶数 
                     num % 2 ==0 && num > 0 
    */
    var num = prompt('请输入一个数字');
         if (num % 2 == 0 && num > 0) {
             console.log('该数为偶数');
         } else {
             console.log('该数为奇数');
         }



        /*
           *  2. 判断一个年份是否为闰年 (满足以下条件的任意一个就是闰年)
           *      条件1: 四年一润, 百年不润;
           *      条件2: 四百年补一润
        */

        /**
           *  1. 使用分支语句完成
           *  2. 条件是什么?
           *      2.1: 这个年份需要是 4 的倍数, 并且 不是 100 的倍数
           *          year % 4 === 0 && year % 100 !== 0
           *      2.2: 这个年份如果是 400 的倍数
           *          year % 400 === 0
        */

            // var year = 2023
            var year = prompt() - 0;
            /**
             *  prompt()
             * 
             *  这行代码执行, 会在浏览器弹出一个 输入框
             *  用户输入完毕后, 点击确定, 会将输入的值, 返回出来
             *  在当前案例中, 是将输入的值, 存到变量 year 中
             * 
             *  注意: 不管你输入的是什么, 返回的值永远是 字符串类型的
            */

            if (year % 400 === 0 || year % 4 === 0 && year % 100 !== 0) {
                console.log('是闰年')
            } else {
                console.log('不是闰年')
            }

switch分支结构

  /* switch  分支结构
     分支结构的一种是对于某一个变量
     也就是说数据类型不一直也会导致判断失败
  */
  /*
  switch (条件) {
             case 情况1:
                 console.log('符合情况1的时候要执行的代码')
                 break;
             case 情况2:
                 console.log('符合情况2的时候要执行的代码')
                 break;
             default:
                 console.log('上述情况都不满足时执行的代码')
         } 
      switch (穿透)现象
        如果在 case 后的代码执行完毕后没有 break 
        在执行的时候，会赵傲符合条件的擦色开始执行代码
    条件必须是变量

    情况 是确定的值
  */ 
switch (num) {
             case num % 2 == 0 && num > 0:
                 console.log('该数为奇数');
                 break;
             default:
                 console.log('该数为偶数');
                 break;
         }

打印月份:

// switch  与 if...else if..语句 
var num = 2
        switch (num) {
            case 1:
                console.log('1月')
            case 2:
                console.log('2月')
            case 3:
                console.log('3月')
            case 4:
                console.log('4月')
                break
            case 5:
                console.log('5月')
            case 6:
                console.log('6月')
            default:
                console.log('我类似于 if 分支的 else, 当前边的所有 case 都不满足的时候, 我会执行')
        }
    
        // var num = 10
        // if (num === 1) {
        //     console.log('1月')
        // } else if (num === 2) {
        //     console.log('2月')
        // } else if (num === 3) {
        //     console.log('3月')
        // } else if (num === 4) {
        //     console.log('4月')
        // } else if (num === 5) {
        //     console.log('5月')
        // } else if (num === 6) {
        //     console.log('6月')
        // }

/* 判断一个年份是否是闰年*/
  /*  1.使用分支结构完成
           2.条件： 2.1 条件1：这个年份是4的倍数，而且 不是 100 的倍数;
                     num1 % 4 == 0 && num1 % 100 !==0
                   2.2 条件2：这个年份是400的倍数
                   num1 % 400 ==0
*/
  var num1 = prompt('请输入一个年份', '2020') - 0;
         // 需要用户输入内容
         if (num1 % 4 == 0 && num1 % 100 !== 0 || num1 % 400 == 0) {
         // 取反  > 逻辑于 > 逻辑或  
             console.log('该年为闰年');
         }
         else {
             console.log('该年为平年');
         }

/*
用switch分支结构完成
条件:  2月固定为28天
然后输出到控制台 (switch 完成)
    一三五七八十腊, 31天永不差
*/
/*
     *  1. prompt(), 让用户输入一个月份
     *  2. 需要使用 switch 完成
*/

 var month = prompt('请输入当前月份') - 0;
        switch (month) {
            case 1:
            case 3:
            case 5:
            case 7:****
            case 8:
            case 10:
            case 12:
                console.log('该月份为31天');
                break;
            case 2:
                console.log('该月份为28天');
                break;
            case 4:
            case 6:
            case 9:
            case 11:
            default:
                console.log('该月份为30天');
                break;
        }

 /*
    用if 和switch 分支结构 判断
    条件:  年份判断平闰年
           2月 不是固定的;               
*/
/*
新需求： 2月不是固定的，根据用户输入的年份判断对应的天数
*/
var year = prompt('请输入一个年份') - 0;
        var month = prompt('请输入当前月份') - 0;
        //   注意  转换 为 数字类型  容易漏
        /*
        switch 语句里面套 if语句
        */
        switch (month) {
            case 2:
                if (year % 4 == 0 && year % 100 !== 0 || year % 400 == 0) {
                    console.log('该月份为29天');
                } else {
                    console.log('该月份为28天');
                }
                //判断是否为闰年
                break;
            case 1:
            case 3:
            case 5:
            case 7:
            case 8:
            case 10:
            case 12:
                console.log('该月份为31天');
                break;
            default:
                console.log('该月份为30天');
        }

/* 针对于除 1 0 相关的运算时的结论 */
  console.log(true && false);// 全真则真,一假则假  false
       console.log(true || false);// 一真则真,全假则假  true
       console.log(20 > 10 && 10 > 20); // false
       console.log(20 > 10 || 10 > 20); // true
       /*  针对于 1  0     */
       console.log(1 && 0);       // 0
       console.log(0 && 1);       // 0
       console.log(1 || 0);       // 1
       console.log(0 || 1);       // 1

   /*将数据原本的布尔值, 做一个取反操作*/
   console.log(true);         // true
   console.log(!true);        // false
   console.log(!0);           // false

注意面试官(HR)问的问题要问什么就答什么结果

三元运算符

三目 / 问号冒号表达式

语法: 条件 ? 条件为真时执行的代码(只能有一行) : 条件为假时执行的代码(只能有一行)

意义: 对 if 的优化

注意: 执行的代码只能有一行

常用场景

对 if 的优化
利用三目给变量赋值

约定:

       num === 0

      我们约定 num 等于 0 的时候, 新建一个变量并赋值为 '失败'

        如果 不等于 0 的时候, 新建一个变量并复制为 '成功'

var num = 1
        // num === 0 ? var str = '失败' : var str = '成功'
        var str = num === 0 ? '失败' : '成功'
        console.log(str)    // '成功'

var num = 0;
        if (num === 0) {
            console.log('失败');
        }
        //  if语句
        /* #### 重要 ######*/
        num === 0 && console.log('失败');
        //  逻辑与
        /* #### 重要 ######*/
        if (num === 0) console.log('失败');

        优化if分支结构

/* #############  特别重要 ########### */
        var num = 1;
        // console.log(num++);    // 1  先赋值  后+1/-1 ，运算的值给后面，没有自己  n++ 后置
        console.log(++num);       // 2  先+1/-1  后赋值 ，并且赋值给自己              ++n 前置

        var i = 1, j =2;
        console.log(i++ + ++i + j-- - j-- + ++j); //  6 
        console.log(i,j); // 3  1
        //          1  +  3 + 2 - 1 + 1

js基础（1）