06 JS BASIC 函数、分支结构和循环结构

===============================================函数===========================================

一、函数
    1、什么是函数
        没有函数的弊端:
            1、事件中想执行JS脚本只能逐行编写
            2、可重用性不高
        
        函数(function):可以被称之为方法(method),过程(procedure)

        是一段预定义好,并可以被反复使用的代码块
            1、预定义
                事先声明好的内容,不会马上被执行
            2、反复使用
                提升代码的可重用性
            3、代码块
                允许包含若干条的可执行语句
        其实函数就是一段独立的功能体,同时也是一个功能完整的对象
    2、定义函数    
        语法:
            function 函数名(){
                //函数体(待执行的代码块)
            }

        调用函数:
            在任意合法的JS脚本位置处都可以调用函数。
            语法:函数名();

        练习:
            编写一个函数,名称为change,函数体内要求用户从弹框上录入两个数字,并且进行数字的交换,最后打印输出交换后的两个数字。通过一个 按钮 调用该函数
        学过的函数:
            console.log("World");
            alert();
            prompt();
            document.write();
            Number();
            toString();
            parseInt();
            parseFloat();
            charCodeAt();
            isNaN();
    3、带参数函数的声明
        1、参数
            定义函数数,需要由外部传入到函数内部进行辅助运行的数据,称之为参数
            console.log("Hello World");
        2、声明带参函数
            function 函数名(参数列表){
                
            }

            参数列表:由,隔开的参数名称的声明
            function 函数名(参数1,参数2,参数3){
                
            }
            定义函数时定义的参数称之为"形参(形式参数)"

            调用带参函数:
                函数名(参数列表);
                参数列表:由,隔开的具体参数值来组成的列表。
                调用函数时所传递的参数称之为"实参(实际参数)",由于js是弱类型的,所以值要自己把控,掌握好

             
        带参数函数注意参数顺序,若传递的为字符类型则用单引号。
        var result=parseInt(35.5);
        console.log(result);
    4、带返回值的函数声明
        1、返回值:调用完函数后,由函数内部返回给函数调用处的一个值。
        2、声明带返回值的函数    
            function 函数名(参数列表){
                //函数体(语句)
                return 值;
            }
            注意:
                1、方法的返回值可以灵活添加,但最多只能有一个
                2、程序碰到return就会返回到函数调用处,所以,return后面的代码是不会被执行的。

    5、函数内调用函数
        function 函数(参数列表){
            /*调用函数*/
            函数();
        }
    6、变量的作用域
        1、什么是作用域
            作用域就是变量与函数的可访问范围,它控制着函数与变量的可见性与生命周期

            JS中作用域可分为以下两种:
            1、函数作用域,只在当前函数内可访问
            2、全局作用域,一经定义,在代码中的任何位置都能访问
        2、函数作用域中的变量
            又称为 局部变量,只能在当前函数中访问,离开函数无法访问
        3、全局作用域中的变量
            又称为 全局变量,定义后,在JS的任何位置处都可以访问得到
            定义方式:
            1、独立于任何function的位置处
            2、声明变量时不使用var关键字
                注意:必须先调用 变量所在的函数后,才可以继续使用全局函数
        4、声明提前
            JS程序在正式运行前,会将所有的var声明的变量和function声明的函数,预读到所在作用域的顶部
            但是对变量的赋值还保留在原有位置。(使程序不会出错,会声明但是不会赋值)

           
          

         5、按值传递
            基本数据类型的数据,在作为实参传递时,实际上将参数的值复制了一份副本进行传递的。(原始的并没有动)

          
         

 7、函数的作用域
        也分为“全局作用域(全局函数)”以及“函数作用域(局部函数)”

        全局函数:
            声明在独立于任何function的位置处,位于JS的最外层
        局部函数:
            在一个函数内部定义的函数,就是局部函数,不能被单独调用;

=========================================分支结构======================================
二、分支结构
    1、程序的流程控制
        程序=数据结构 + 算法

        任何复杂算法都有以下几种结构:
        1、顺序结构
        2、分支选择结构
        3、循环结构
    
        分支结构:
            程序在运行过程中,在不同的条件下可以选择执行某些程序

            1、当条件满足时运行某些语句
                当条件不满足时则不运行这些语句-if结构
            2、当条件满足时运行某些语句
                当条件不满足时则运行另外一些语句-if...else 结构
    2、if结构
        1、语法
            if(条件){
                语句块
            }

            执行流程:
                1、判断条件的结果
                    若值为true,则执行if语句块中的语句
                    若值为false,则不执行if语句块中的语句
        2、注意
            1、条件应该是boolean类型的值或表达式
                如果条件不是boolean的话,则会进行自动转换

                以下几种情况会默认转换为 false
                if(0){}
                if(0.0){}
                if(NaN){}
                if(undefined){}
                if(""){}
                if(null){}

                ex:
                    if(28){}
                    if(2.8){}
                    if("我帅吗"){}
            2、if(条件)后的{}可以省略,但不推荐
                如果 省略了{} ,那么if结构只控制if下的第一条语句
    3、if...else 结构
        1、语法
            if(条件){
                //语句块1
            }else{
                //语句块2
            }

            流程:
                1、判断条件
                    若值为true,则执行语句块1
                    (否则)若值为false,则执行语句块2

4、练习
    使用 if 结构 完成 克莱托指数判断


1、分支结构
    1、else...if语句(多重if结构)
        1、问题
            根据考试成绩,给出 A-E 等级
            成绩为100分,则输出A
            成绩在90分以上 则输出B
            成绩在80分以上 则输出C
            成绩在60分以上 则输出D
            否则 输出E
        2、语法
            if(条件1){
                语句块1;
            }else if(条件2){
                语句块2;
            }else if(条件3){
                语句块3;
            }... ...else{
                语句块n;
                以上条件都不满足时,才运行else,else/else if是if不满足才允许
            }
            注意:else是可有可无的。
        3、练习
            要求用户通过 弹框 输入年,输入月,输入日,判断 该日 是这一年的第多少天?
            输入年:2016
            输入月:10
            输入日:27
            2016年10月27日是2016年的第301天
            1月:31
            2月:闰年 29天,(如果平年则 28天)
            3月:31天
            4月:30
            5月:31
            6月:30
            7月:31
            8月:31
            9月:30
    2、switch-case 结构
        1、作用
            为了简化 等值判断 的条件判断结构
        2、语法
            switch(变量/表达式){
                case 值1:
                    语句块1;
                    break; //该语句块的结束
                case 值2:
                    语句块2;
                    break; //表示结束,可以不写
                ... ...
                default:
                    语句块n;
                    break;
            }
            1、执行流程
                1、解析 表达式或变量中的值
                2、用 解析出的数值 与 case 后的数值进行等值比较
                    如果 比较成功,则执行该case后的语句块
                3、执行完成后,如果碰到 break则结束整个switch结构,否则继续向下执行(非判断)
        3、switch-直落形式
            两块或多块case之间,没有任何操作代码,表示 多块case要执行相同的操作
            switch(变量/表达式){
                case 值1:
                case 值2:
                case 值3:
                    语句块;
                    break;
            }

==========================================循环结构=============================================
2、循环结构
    1、问题
        1、在控制台上输出一句 "Hello World"
        2、在控制台上输出十句 "Hello World"
        3、在控制台上输出1000句 "Hello World"
        4、将1000句 "Hello World" 更换成 "你好 世界!"
        5、在 "你好 世界" 基础上 增加 "第1遍 你好 世界"
    2、什么是循环结构
        循环:一遍又一遍的重复执行相同或相似的代码
        生活中的循环:
            1、循环听歌:有开始,有结束
            2、上学:有开始,右结束
            3、长跑运动员:有开始,有结束
        循环特点:
            1、循环条件
                规定了循环的执行次数
            2、循环操作
                要执行相同或相似的语句-循环中做了什么
    3、循环结构-while循环
        1、语法
            while(条件){
                //循环操作
            }

            流程:
                1、判断 循环条件
                2、如果条件为真,则执行循环操作,然后再判断条件,如果条件为真,则继续执行循环操作... ...
                3、直到条件为 假时,则结束循环操作
            练习1:
                1、打印 1-1000之间 所有的数字
                2、计算 1-1000之间 所有的数字之和
                3、计算 1-1000之间 所有奇数数字之和
        2、循环流程控制语句
            1、continue
                终止本次循环的执行,继续下次循环
                ex:
                    打印1-1000之间,所有 非3的倍数的数字
            2、break
                提前退出循环结构

            3、练习
                要求用户从弹框中 反复录入数据,并打印输出,直到 输入 exit 为止。
                    条件:输入 exit 则退出
                    操作:
                        1、要求用户录入数据
                        2、判断是否为 exit
                        3、不是 exit,则打印输出
    4、循环结构-do...while()循环
        1、语法
            do{
                //循环操作
            }while(条件);
            
            流程:
                1、先执行循环操作
                2、判断循环条件
                    如果值为真,则继续执行循环操作
                    如果值为假,则退出循环
            场合:
                先执行循环体,根据循环体内的操作再决定循环条件时,使用do...while
        2、while 与 do...while 的区别
            1、while :先判断,后执行,最少一次都不执行循环操作
            2、do...while : 先执行,后判断,最少执行一次循环操作
3、练习

猴子吃桃问题
        猴子摘下了若干个桃子,当即吃了一半,还不过瘾,又多吃了一个,第二天,又将剩下的桃子吃了一半,又多吃一个。以后每天都吃了前一天剩下的一半零一个。到第10天的时候,发现只剩下一个桃子。求:第一天共摘下多少个桃子。

        假设:
            第一天 共摘了 total 个桃子
            每天剩下的桃子 left 个(默认是1)

            天数      left   公式(推前一天)
            10天        1    left(1)=total/2-1 ==> total=(left+1)*2
      09天        4         total=(left+1)*2
      08天       10    total=(left+1)*2; left=total;
            07天       22
            06天       46
            05天       94
            04天       190
            03天       382
            02天       766
            01天       1534
==========================================
1、循环结构-for
    1、while
        在控制台上输出1-100之间所有的数字
        //1、声明条件:从1开始
        var i=1;
        //2、循环结构-循环条件
        while(i<=100){//条件
            console.log(i);//3、操作
            i++;//4、更新循环变量
        }
    2、for语法
        for(表达式1;表达式2;表达式3){
            //循环操作
        }
        表达式1:声明条件
        表达式2:循环条件判断
        表达式3:更新循环变量

        for循环执行流程:
        1、计算表达式1的值
        2、计算表达式2的值(boolean),如果为true,则执行循环体,如果为false,则退出循环
        3、执行循环体
        4、计算表达式3的值
        5、计算表达式2... ...

    3、for语句三个表达式的特殊用法
        1、表达式1 允许为空
            for(;表达式2;表达式3){
                
            }

            表达式1;
            for(;表达式2;表达式3){
                
            }
        2、表达式2 允许为空
            如果省略的话,则为死循环
            最好在循环内部补充退出条件
        3、表达式3 允许为空
            死循环
        4、三个表达式都允许为空
            for(;;){
                console.log("这是死循环");
            }
        5、表达式1 和 表达式3 的内容可以多样化
            允许编写多个表达式
    4、循环嵌套
        for/while/do.while 多允许相互嵌套或转化
        循环嵌套:在一个循环中,又出现另一个循环
            for(var i=1;i<=10;i++){
                for(var j=1;j<=10;j++){
                    console.log(j);
                }
            }
    5、while/do..while/for 的异同点
        1、for 和 while
            共同点:
                先判断条件,再执行循环体
            使用场合:
                1、for    
                    优先使用在确定循环次数的场合下
                2、while
                    优先使用在不确定循环次数的场合下
        2、do...while
            先执行循环操作,再判断循环条件
            最少 执行1次循环
            场合:
                1、优先适用于不确定循环次数的场合下
                2、先执行循环体,根据循环体内的操作决定循环条件时,使用do...while

    练习:
        要求用户 弹框中分别输入 年,月,日
        求:该日 是星期?
        前提:1900.1.1 是星期一

                    求:2016.10.28
                    1900.1.1 - 2015.12.31 : x
                    2016.1.1 - 2016.9.30 :y
                    2016.10.28 距 1900.1.1 :x+y+28

    练习:
        1、控制台上 打印输出 *
        2、控制台上 打印输出 *****
        3、控制台上 打印输出
            *****
            *****
            *****
            *****
            *****
        4、控制台上 打印输出 以下内容
            *        第1行 1个星星
            **       第2行 2个星星
            ***      第3行 3个星星
            ****     第4行 4个星星
            *****    第5行 5个星星
        5、打印99乘法表
            1*1=1
            1*2=2 2*2=4
            1*3=3 2*3=6 3*3=9
            1*4=4 2*4=8 3*4=12 4*4=16
            .....
            1*9=9 2*9=18 3*9=27 4*9=36


    3、练习
        1、打印输出 1-1000之间所有的奇数
        2、计算 1-1000 所有偶数的和


        1*1=1
        1*2=2 2*2=4
        1*3=3 2*3=6 3*3=9
        ...

        3、素数
            从3 开始
            3 是素数
            4 不是素数
            5 是素数
            6 不是素数
            7 是素数
            8 不是素数
            9 不是
            10 不是
            11 是

          10:2-9

            35:2-34/2
            36: 2-36/2

            36/18 = 2
            36/19 = 1.0000
            36/36 = 1

        有一对兔子,从出生的第3个月起每个月都生一对兔子,小兔子长到第3个月后每个月又生一对兔子,假如兔子都不死,问某个月的兔子总和是多少

        1,1,2,3,5,8,... ...

        1,1,2,3,5,8,13,21,34,55,89
        斐波那契数列
        var n1=1,n2=1;

        n1 = n1 + n2;
        n2 = n1 + n2;
        console.log(n1);
        console.log(n2);

        n1 = n1 + n2;
        n2 = n1 + n2;
        console.log(n1);
        console.log(n2);
    求:数列中,某位上的数字时多少
     假定 f(10); 想求 第10个月 兔子的总量
            f(20); 想求 第20个月 兔子的总量

                f(5); 想求 第5个月 兔子的总量
                f(4); 想求 第4个月 兔子的总量
                f(3); 想求 第3个月 兔子的总量
                f(2); 想求 第2个月 兔子的总量 = 1
                f(1); 想求 第1个月 兔子的总量 = 1

                f(3)=f(2)+f(1)
                f(4)=f(3)+f(2)
                f(5)=f(4)+f(3)
                ...
                f(100)=f(99)+f(98)
    

猜你喜欢

转载自blog.csdn.net/Pony_18/article/details/81603473