JavaScript前端开发（五）

        一、函数的相关概念
                JavaScript的函数理解为Java里面的方法，
                把一些经常复用的代码，抽取出来封装在一个函数中。
                提高程序的可读性，减少开发者的工作量，便于后期的维护。
            
                Java中的方法的语法：
                public  返回类型 方法名(数据类型 变量名 , 数据类型  变量 ...){
                    
                }
                
                
                
                
                js中函数的分类：
                A.内置函数（JS提供的）: console.log(); alert()  confirm  parseInt...  ：
                B.自定义函数（程序员自己写的）
                
                其中自定义函数的声明语法如下：
                function  方法名(变量名，变量名...){
                    
                } 
                
                调用：  方法名(参数列表);
                
                函数定义与调用的编写顺序不分前后。
                你可以先调用函数，再声明函数

         //声明一个无参函数
           function a1(){
               console.log(123);
           }
           
           a1();
           
           
           //声明一个指定个数的有参函数
           function a2(a,b,c){
               console.log(a+b+c);
           }
           a2(1,2,3);
           
           //声明一个若干个数的有参函数
           function a3(... a){
               for(var i = 0 ; i<a.length ; i++){
                   console.log(a[i]);
               }
           }
           
           a3(1,1.1,true,undefined,null,"你好");
           
           
           //有返回值的函数
           function a4(a,b){
               return a + b;
           }
           var sum = a4(10,20);
           alert(sum)

        二、变量的作用域
        和Java一样 JS的变量也分为局部变量和全局变量（Java的叫法是成员变量，只是概念和全局类似）
        function info() {
             var age = 18;
           }
           info();
           
           console.log(age); 
        //思考以上代码的执行结果是什么
            A.18   B.报错   C.null   D.undefined
        答案:B   提示:age is not  defined  表示未定义
            //原因如下:age是在函数里面定义的理解为局部变量.但是console.log是在函数外调用的.
        全局变量：在所有函数之外声明（script标签内部的最开始几行），它的作用域称为全局作用域，在同一个页面文件中的所有脚本内都可以使用。
        局部变量：在函数体内利用var关键字声明的变量称为局部变量，仅在该函数体内有效。
        
        三、函数进阶
        以下知识点掌握即可:用的很少,但是看到了需要知道意思.
        函数的声明 一般就是上面两个知识点即可.就是利用function声明
        不仅有函数 还有一个叫做函数表达式的东西
        函数表达式指的是将函数赋值给变量的表达式
         通过“变量名()”的方式即可完成函数的调用，小括号“()”内可以传入参数，示例代码如下。
        //函数的写法:
            function a1(a){
                console.log("我被调用了。参数是" + a)
            }
            a1(123);
            
            //函数表达式的写法:
            var abc = function (a){
                console.log("我被调用了。参数是" + a)
            };
            
            abc(567);
        
        四、匿名函数
        匿名函数自调用:HTML页面解析之后 自动执行的一段代码.只会执行一次.
            例如跳转网页之后提示:登录成功  加载成功
            语法如下:
            (function(){
                alert("登录成功！！！");
            })();
        //下面是函数叫做a的函数
            function a(){
                alert(123);
            }
            
            
            //匿名函数指的就是:没有函数名的函数  但是又拥有了变量名
            var a = function(){
                alert(456);
            }
        五、箭头函数
        箭头函数了解即可:和函数表达式一样 比较鸡肋, 但是需要能看懂它.
         以下3个函数的实际意义完全一样.    
            function sum(a,b){
                return a + b;
            }
            
            var fn = (a, b) => a + b;
            
            var fn = (a,b) => {
                return  a + b;
            };
        六、递归函数
        递归函数:了解即可. 函数的内部调用自己函数本身.
            优点:代码简化. 缺点:难得想
                        
            例如声明一个函数 求1-N的和

        function sum(n){
                var sum = 0;
                for(var i = 1 ;i<=n;i++){
                    sum = sum + i;
                }
                return sum;
            }
            var i = sum(100);
            alert(i);
        递归的核心1:鸿沟(临界值)
        function sumDg(n){
                if(n==1){
                    return 1
                }else{
                    return n + sumDg(n-1);
                }
            }
            alert(sumDg(100));    
        七、对象的概念
            在JavaScript中，对象属于复杂数据类型，
            它是由属性和方法组成的一个对象。        
            属性是指对象的特征。
            方法是指对象的行为。
        学生的特征：姓名、年龄和性别，这些特征可以用对象的属性来表示。
        学生的行为：打招呼、唱歌、写作业，这些行为可以用对象的方法来表示。
        将10个学生的成绩输出在页面上。
                var arr  = [1,2,32,543,65,35,35,654,46,31];
                for(var i = 0 ;i<arr.length;i++){
                    if(i==arr.length-1){
                        document.write(arr[i] );
                    }else{
                        document.write(arr[i] + ',');
                    }
                }
                
                document.write("<hr>");
            var s1 = {id:1001,name:"张三1" , age:18};
              var s2 = {id:1002,name:"张三2" , age:18};
              var s3 = {id:1003,name:"张三3" , age:18};
              var s4 = {id:1004,name:"张三4" , age:18};
              var s5 = {id:1005,name:"张三5" , age:18};
              var s6 = {id:1006,name:"张三76" , age:18};
              var s7 = {id:1007,name:"张三7" , age:18};
              var s8 = {id:1008,name:"张三8" , age:18};
              var s9 = {id:1008,name:"张三9" , age:18};
              var s10 = {
                  id :10010,
                  name:"张三",
                  age:20,
              };
              
              var arr = [s1,s2,s3,s4,s5,s6,s7,s8,s9,s10];
            for(var i = 0 ;i<arr.length;i++){
                  for(var sx in arr[i]){
                      document.write(arr[i][sx]);
                  }
                  document.write("<br>")
              }
            八、创建对象
            如何创建一个JS的对象：
                方法1：使用对象的字面量创建对象（理解为直接赋值）
                例如：var arr = [1,2,3];，//静态声明数组 字面量创建
                就是用大括号“{}”来标注对象成员，
                每个对象成员使用键值对的形式保存，即 “key: value”的形式。
                多个成员通过逗号隔开
                键指的就是独一无二的属性   
             创建对象的方法2:
                  第一步:创建对象的函数(想象成Java的构造函数)
                   function Person(id,name,age){
                   this.id = id;
                   this.name = name;
                   this.age = age;
                       }
                 //第二步:new对象
                   var p1 = new Person(123,"王五" , 20);
                   console.log(p1);
                使用场景:如果对象很多 就用方法2   反之方法1
            补充:对象由:属性和方法
             var s1 = {
               id :11,
               name:"张三",
               age :18,
               study : function(){
                   alert("成功调用了这个对象的这个方法");
               }
               };
           
                       alert(s1.id);
                       s1.study();
                 function Person(id,name,age){
                          this.id = id;
                          this.name = name;
                          this.age = age;
                       this.eat = function(){
                           alert("我吃拉面");
                       }
                   }
                   //第二步:new对象
                   var p1 = new Person(123,"王五" , 20);
                   p1.eat();
                   //创建对象的方法3:
                   //如果谁不知道给对象取什么名字,就叫做Object
                   var o = new Object();
                   o.id=1231;
                   o.name="李四";
                   console.log(o);
           九、如何遍历一个对象
         var arr = [1,2,4,3];
            console.log(arr);
            
            var s10 = {
                              id :10010,
                              name:"张三",
                              age:20,
                              sex:'男',
                              height : 188,
                              weight :200
            };
             console.log(s10);
            
            由于直接输出s10将只会显示object我们需要内部的属性值/
            方法1:如果只需要某一个属性值, 直接通过s10.属性名即可
            方法2:如果所有的属性值都需要,那么也可以通过s10.属性名 只是比较麻烦.
            学习:如何遍历对象:语法如下:
             for(var i = 0;i<a10.length;i++){
                //错误的写法:1.对象的键并不是012  其次对象并没有长度
             }
            
            i表示对象的下标(属性)    s10表示遍历的对象 
            for(var i  in s10){
                console.log(s10[i]);
            }
            十、值对象和引用对象
                //JS的参数传递 也分为值传递和引用传递
            var a = 111;
            var b = "你好";
            var c = true;
            var d = [1,2,3];
            
            function change(a,b,c,d){
                a = 222;
                b = "我好";
                c = false;
                d[0] = 123;
            }
            
            change(a,b,c,d);
            
            console.log(a);//111
            console.log(b);//你好
            console.log(c);//true
            console.log(d[0]);//123