1-分支结构（3种语法）

1.1-if单分支结构

• 1.if结构语法：if(条件 true/false){ 条件成立时需要执行的代码 }
• 2.if结构补充说明：
  • 1.大括号中可以是任何代码，不限数量
  • 2.如果大括号中代码有且只有一行，则可以省略大括号。这种写法代码不规范，不是老司机的作风
• 3.注意点:小括号中的条件可以是哪些呢
  • (1)关系表达式：结果一定是布尔类型
  • (2)布尔类型的值：true和false
  • (3)其他表达式和值：都会先转换成布尔类型再判断真和假

==1.2-if-else双分支结构==

if（条件）{
    条件成立时需要执行的代码
}else{
    条件不成立时需要执行的代码
}

• if-else结构注意点
  • if大括号中的代码与else大括号的代码只会执行一个，不会同时执行
• if-else语句的作用主要就是为了提高代码的运行效率,虽然可以用两个if语句来代替if-else语句，但是两个if语句需要判断两次，而if-else只需要判断一次

1.3-if-else if-else多分支结构

if(条件1){
    条件1成立时需要执行的代码
}else if(条件2){
    条件2成立时需要执行的代码
}else if(条件3){
    条件3成立时需要执行的代码
}else{
    以上所有条件都不成立时需要执行的代码
}

.注意点 ： if-else if -else结构中必须以if开头，中间的else if可以是多个，末尾的esle可以省略（一般都不会省略）

if-else if-else语句中所有的大括号中的代码只会执行其中一个，不会执行多个

1.4-switch-case分支结构

1.语法：

switch(表达式){
    case 值1:
        表达式的结果 === 值1，需要执行的代码
        break;
    case 值2:
        表达式的结果 === 值2，需要执行的代码
        break;
    case 值3：
        表达式的结果 === 值3，需要执行的代码
        break;
    .......
    default:
        表达式的结果和上面所有的case后面的值都不全等，则会执行这里的代码
        break;
}

2.注意事项

• 1.表达式的结果要和值一定是全等的关系===
• 2.break作用：结束该switch语句，所以一般情况下要加上，如果不加上则会发生穿透
  • 穿透：从上一个case代码快执行到下一个case代码快
  • break关键字的作用就是防止穿透
• 3.default语句可以写在任何地方，也可以省略，但是一般写在最后，这是一种代码规范

1.5-switch-case穿透用法

• 合理穿透：多种值需要执行相同代码

<script>
    /**合理穿透：当存在多种值需要执行相同代码时使用穿透可以节省代码
     * 用户输入某一个月份，告诉用户这个月份属于什么季节
     * 12，1，2 冬季
     * 3，4，5 春季
     * 6，7，8 夏季
     * 9，10，11 秋季
     */
    var 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.6-三元表达式

• 1.运算符根据参与运算的值数量分为一元、二元、三元运算符
  • 一元运算符：只能操作一个值 ++ -- ！
  • 二元运算符：操作两个值 1 + 1 1 > 0
  • 三元运算符：操作三个值
• 2.三元运算符语法
  • 三元运算符： ?:
  • 三元表达式： 表达式?代码1：代码2
    • 1.如果表达式成立则执行代码1，否则执行代码2
    • 2.如果代码1或者代码2有运算结果则三元运算式的结果就是他们其中的一个
  • 三元运算符做的事和if-else类似，只是代码更简洁

1.7-三种分支结构语法总结

• 1.原则上，三种分支结构语句之间可以互转，只不过每一种分支结构语句适用场景不一样
• 2.if分支结构：适合条件判断
  • 最常用：if-else 两种互斥条件判断
• 3.switch-case 适合做固定值匹配
• 4.三元表达式： 比if-else代码更简洁，但是代码量较多时易读性变差

代码调试介绍

• 之前的调试方式主要通过打印变量的值来查看代码是否出现问题，这是js中最简单基本的调试
  • alert();
  • console.log();
• 断点调试:断点调试是指自己在程序的某一行设置一个断点，调试时，程序运行到这一行就会停住，然后你可以一步一步往下调试，调试过程中可以看各个变量当前的值，出错的话，调试到出错的代码行即显示错误，停下
• 1.断点调试是一种非常经典的调试方法，在其他编程语言中也经常使用这种调试方法，只不过不同的语言使用的工具不同而已
  • 前端开发中的js代码主要使用谷歌浏览器的开发者工具进行断点调试
• 2.代码调试的能力非常重要，只有学会了代码调试，才能学会自己解决bug的能力。初学者不要觉得调试代码麻烦就不去调试，知识点花点功夫肯定学的会，但是代码调试这个东西，自己不去练，永远都学不会。
• 3.今天学的代码调试非常的简单，只要记住代码调试的这几个按钮的作用即可，后面还会学到很多的代码调试技巧。
• 使用步骤
• 1.浏览器中按F12进入开发者控制台
• 2.选择sources找到要调试的文件

02-循环结构(3种语法)

1.1-while循环结构

• 1.语法：

while(条件 true/false){
        循环体/需要重复执行的代码;
    }

• 执行步骤：
  • 1.判断条件是否成立
    • 1.1 如果成立，执行循环体代码，然后重复步骤1
    • 1.2 如果不成立，结束循环，执行大括号后面的代码
• 2.1-while循环结构
  • （1）小括号中的语句，无论结果是什么都会转换成布尔类型来判断是否成立
  • （2）避免写一个死循环

1.2-do-while循环结构

• 1.语法:

do{
    循环体;
}while( 条件 );

• 2.执行过程
  • 1.先执行循环体代码
  • 2.执行条件语句
    • 如果结果为true，执行循环体代码
    • 如果为false，循环结束
  • 3.重复步骤2
• 3.do-while和while实现的循环其实是一样的，只有一个不同点：do-while循环不管怎样先执行一次循环体代码，然后再判断条件
  • while循环：先奏后斩（先判断条件再执行循环体）
  • do-while循环：先斩后奏（不管怎样先执行一次循环体代码，然后再判断条件）

==1.3-for循环结构==

• 1.for循环语法

for( 语句1;语句2;语句3 ){
    循环体：需要反复执行的代码;
}

• 2.执行步骤：
  • 1.执行语句1（定义一个循环变量）
    • 2.执行语句2，判断语句2条件是否成立（条件表达式）
      • 2.1 如果条件成立，则执行循环体代码
        • 执行语句3（循环变量自增），重复步骤2
      • 2.2 如果不成立，结束循环，执行大括号后面的代码
• 3.for循环好处及注意点
  • 好处：循环变量的声明与循环变量自增在一个小括号中，可以更好的避免死循环
  • 注意点：原则上语句1，语句2，语句3可以是任意代码，但是不建议乱写，因为会导致死循环
  • 语句1：通常是定义循环变量
  • 语句2：条件表达式
  • 语句3：通常都是循环变量自增/自减（视需求而定）

1.4-三种循环结构总结

• 1.原则上，三种循环结构语句之间可以互转，只不过每一种语句的适用场景不一样
• 2.最常用：for循环：适合循环次数固定
• 3.while循环：适合循环次数不固定
• 4.do-while循环：适合循环次数不固定，但是循环体代码至少要执行一次

1.5-break与continue关键字

• 1.break：结束整个语句
  • break既可以用于循环结构也可以用于switch分支结构
• 2.continue：结束本次循环体，进入下一次循环判断
  • continue只能用于循环结构语句

1.6-循环次数不固定02：穷举

穷举：从1遍历到无穷大，找出符合条件的数

最后附上一张思维导图：