JS基础知识day5

js作用：操作 html + css ；       动态渲染数据；

             数据类型：number / string / boolean / null / undefined

                      判断数据类型  typeof

                      转换

                         转字符串  String()   +

                         转数字    Number()   +/-/*///%   Math.round()  Math.floor()  Math.ceil()

新内容补充

                                   parseInt()  在把小数转为整数的时候 == Math.floor()

                                   还可以取出字符串里面的小数（字符串里面的第一位数字开始，到第一个非数字结束）

                                   parseFloat()  取小数

      

// 提取到第一个非数字为止的整数
        var m = parseInt('.24.5px2') ;
        console.log(m);  // NaN

        var m = parseInt('0.24.5px2') ;
        console.log(m);  // 0

        var m = parseInt('24.5px2') ;
        console.log(m);  // 24

        var m = parseInt(24.5) ;
        console.log(m);  // 24


        var m = parseFloat('24.5px') ;
        console.log(m);  // 24.5

         判断 if   switch

         循环

            嵌套

            while  for

            break ，continue

            死循环

         函数

           系统函数 ， 自定义函数  

           封装性，复用性，调用性

           函数的封装

             语法  function name(形参1,形参2,...) {}

             提取形参

             是否需要返回值

             注释！！！！！！！！！！！！

             调用

形参(函数声明)，实参(函数调用)

             

函数在调用的时候，必须按照要求传参

        实参和实参不对等  --- 不报错

        实参多了或者少了 函数不报错

return

           给函数一个返回值

           会提前结束整个函数

//三目运算符判断是否为闰年

 return y % 4 === 0 && y % 100 !== 0 || y % 400 === 0 ?  true : false ;

短路赋值

 // 或   见真即真
        // 与   见假即假


        // 短路赋值

        var n = 1 || 2 ;    // n = (1 || 2)   // n = 1
        console.log(n);

        var n = 0 || 3 ;    // n = (0 || 3)   // n = 3
        console.log(n);

        var n = 1 && 2 ;   // n = (1 && 2)   // n = 2

        var n = 0 && 3 ;   // n = (0 && 3)   // n = 0

作用域

           全局作用域 -- 全局变量      

                      在函数外面声明的变量

                      没有var 的变量

           局部作用域  -- 局部变量

                      在函数内部声明的变量

变量可以重复的声明

        变量可以不声明，直接赋值

        当函数内部的变量名和外部的变量相同时，优先使用自己的  --- 同名不同人

 变量的作用域

        优先找自己的，自己找不到就找向上一级查找，一直找到script为止，一直找不到就报错

var a = 4 ;
        console.log(a);  // 4

        var a = 5 ;   // 5

        b = 6 ;
        console.log(b);


        function fn() {  
            // 变量是在函数内部声明的，只能在函数内部使用
            var c = 9 ;
            console.log(c);
            // 没有var,此变量默认为全局变量
            d = 10 ;
            var b = 20 ;
            console.log(b);  // 20
        }


        fn()


        // console.log(c);  // 报错  c是局部变量

        console.log(d);

        console.log(b);  // 6

var a = 20 ;


        function fn3() {  
            console.log(a);
        }


        function fn() {  
            // 属于fn的局部变量
            var a = 10 ;

            // fn2也属于fn的一部分 , 找到最近的变量
            function fn2() {  
                var a = 5 ;
                // fn2可以访问到fn的变量
                console.log(a);
            }
            
            fn2()
        }

        fn()

预编译

js代码的执行分两个阶段

          预编译阶段

              首先会找到所有的var声明的变量

              找到所有的具名函数

          代码执行阶段

// 你看到的代码
        console.log(a);    // undefined

        var a = 10 ;

        console.log(a);   // 10


        // 实际上js的解析
        var a ;
        console.log(a);
        a = 10 ;
        console.log(a);

// 你看到的
        fn() ;


        function fn() {  
            console.log(666);
        }


        // 实际上的js解析
        function fn() {  
            console.log(666);
        }
        fn()

面试题：

//你看到的代码
        console.log(a);
        var a = 10 ;
        a()
        function a() {  
            console.log(3);
            var b = 4 ;
        }
        console.log(b);
        var b = 5 ;
        console.log(b);
        console.log(a);

//实际的代码
        var a ; 
        var b ;
        function a() { 
            // 在函数内部也有预编译
            var b ; 
            console.log(3);
            b = 4 ;
        }
        console.log(a);  // f
        a = 10 ;
        a() ;    // a is not a function 
        console.log(b);   // undefined
        b = 5 ;
        console.log(b);   // 5
        console.log(a);   // 10


//你看到的代码

function a() {
            console.log(3);
        }

        console.log(a);   // 
        a = 1;
        console.log(a);   // 
        function a() {
            console.log(2);
        }
        console.log(a);    // 
        a = 3;
        console.log(a);     // 
        function a() {
            console.log(3);
        }
        console.log(a);     //  

//实际的代码
        // 1 找var 
        // 2 找函数
        function a() {
            console.log(3);
        }
        console.log(a);
        a = 1 ;
        console.log(a);
        console.log(a);
        a = 3 ;
        console.log(a);
        console.log(a);
        a()

函数的声明方式

           具名函数 --- 有名字   存在预编译的问题

           赋值式函数    不存在预编译的问题

        变量

           数据类型：基本数据类型(5) + 引用数据类型()

fn()

        fn2()  // 报错

        function fn() {  
            console.log(666);
        }

        // 赋值式函数
        var fn2 = function () {  
            console.log(777);
        }
        fn2()
        console.log(typeof fn2);  // function



//实际显示
        var fn2 ;
        function fn() {  
            console.log(666);
        }
        fn()
        fn2()  // 报错了
        fn2 = function () {  
            console.log(777);
        }
        fn2()

函数的调用（一次性函数）

// 匿名函数的自调用   -- 一次性的函数
        ~function (n) {  
            console.log(n);
        }(666)

一些系统函数（不常用，可以记忆）

 // alert()    // 没有返回值
        
        // // 有输入框的弹窗
        // var res = prompt('请输入你的名字');
        // console.log(res);

        // // 确定弹窗
        // var res = confirm('确定要删除我吗');   // 返回布尔值
        // console.log(res);


        console.log(1 + '2');  // 12

        console.log('1 + 2');

        // eval()  能计算的时候，就计算,不能计算时，直接报错
        // console.log(eval('1 + 2a'));


        function calc(a , b , f) {  
            return eval(a + f + b)
        }

        var res = calc(1,2,'+');
        console.log(res);

递归函数的使用

// 递归：传递与回归 ， 自己调用自己

        // function fn() {  
        //     fn()
        // }
        // fn()   // 死递归


        // 1+2+3+4+...+100 ;
        // 方法1  循环求和
        // 1+2=3
        // 3+3=6
        // 6+4=10


        // 1+2+3+4+...+100 ;
        // 100 + (前面99个数的和)
        //       99         + (前面98个数的和)
        //                      98 +  
        // ...

        //   2 + (前面一个数的求和)


        function sum(n) {  
            
            if(n == 1){
                return 1
            }
            return n + sum(n-1)
        }


        sum(5)
        //   5 + sum(4)
        //        4 + sum(3)
        //            3 + sum(2)
        //                 2 + sum(1)
        //                      1




        // 1*2*3*4*...*10 
        // 10*jc(9)
        //     9*jc(8)


        function jc(n) {  
            if(n == 1) {
                return 1
            }
            return n * jc(n - 1)
        }

斐波拉切函数举例

// 斐波拉切数列 1 1 2 3 5 8 13 21 34 ... 


        // 求第n个数是多少  (n-1) + (n-2)


        function fb(n) {  
            // if(n == 1) {
            //     return 1
            // }
            // if(n == 2) {
            //     return 1
            // }
            if(n == 1 || n == 2) {
                return 1
            }
            return fb(n - 1) + fb(n - 2)
        }

        console.log(fb(6));

递归求和举例

// 编写一个函数sum(n)
            // 当传入n为偶数时，调用函数求1/2 + 1/4 + ... + 1/n
            // 当传入n为奇数时，调用函数求1 + 1/3 + ... + 1/n


        // 不管奇数偶数，计算都是1/n+第n-2个数的和
        // 1 / n + sum(n - 2)


        function sum(n) {  
            if(n == 1) {
                return 1
            }
            if(n == 2) {
                return 1 / 2
            }
            return 1 / n + sum(n - 2)
        }


        console.log(sum(5));