【JavaScript 前端开发 】 第五章 上

一.对象的概念

<script>
                /*
                    
                    在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>");
                    
               //将10个学生的全部信息(id  name  age  sex)输出在页面上。
               //传统的思路:定义40个变量 或者4个数组 或者二维数组等等
               //按照对象的思想:10个学生理解10个对象  将10个对象放在一个数组里面即可
              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++){
              //     if(i==arr.length-1){
              //         document.write(arr[i] );
              //     }else{
              //         document.write(arr[i] + ',');
              //     }
              // }
              //注意:上述写法 打印的仅仅是外观的Object而非内部的属性。
              // for(var i = 0 ;i<arr.length;i++){
              //     if(i==arr.length-1){
              //         document.write(arr[i].id + arr[i].name + arr[i].age +"<br>");
              //     }else{
              //         document.write(arr[i].id + arr[i].name + arr[i].age +"<br>");
              //     }
              // }
              //以上写法较为麻烦
              
              for(var i = 0 ;i<arr.length;i++){
                  for(var sx in arr[i]){
                      document.write(arr[i][sx]);
                  }
                  document.write("<br>")
              }
               
</script>

二.创建对象

<script>
            //判断一个变量是否为对象的小技巧:通过console.log打印.
            //如果打印的是一行字符串 就说明是基本数据类型
            //如果打印的是一个可以折叠的数据 就表示对象
            // var a = 11;
            // console.log(a);
            // var arr = [1,2,3,4];
            // console.log(arr);
            
            
            /*
                如何创建一个JS的对象：
                方法1：使用对象的字面量创建对象（理解为直接赋值）
                例如：var arr = [1,2,3];，//静态声明数组 字面量创建
                就是用大括号“{}”来标注对象成员，
                每个对象成员使用键值对的形式保存，即 “key: value”的形式。
                多个成员通过逗号隔开
                键指的就是独一无二的属性   
            */
           
          // var student1 = { 'id' :1001 ,name:"张三" , age : 18 , 'sex-sex' : '男' } ;
          // //其中键可以选择性的加引号
          // console.log(student1);
          // //如何访问对象里面的值的方法1:  通过对象名.属性名即可
          // console.log(student1.id + "~" + student1.name + "~" + student1.age );
          // //如果存在一些命名不规范的变量 无法通过对象名.属性名访问
          // // console.log(student1.sex-sex);这行代码是报错的
          // //访问对象里面的值的方法2:通过对象名[属性名]
          // console.log(student1['sex-sex']);
          // console.log(student1['name']);
           
           //创建对象的补充:如果一开始只知道有对象,但是不知道它有什么属性或属性值,
           //那么可以先创建一个空对象壳子
           // var s123 = {};
           // //后续再声明属性的同时进行赋值
           // s123.id = 123;
           // s123.name = "Lisi";
           // s123.age = "男";
           // console.log(s123.id);//123
           // console.log(s123.dasd);//undefined
           
           
           //创建对象的方法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);
</script>

三.如何遍历一个对象

<script>
            
            // 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]);
            }
</script>

四.值对象和引用对象

<script>
            //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
</script>