【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>

五.Math对象

Math对象的用法和Java中Math对象的用法几乎一致。

唯一不同的就是 Java的数据类型分为int double等 但是js里面只有number

第一个 Math.min(a,b,c,d,...);获取最小的值

alert(Math.min(2,534,32,43,76,86));

第二个 Math.max(a,b,c,d,...);//获取最大值

alert(Math.min(2,534,32,43,76,86));

第三个:Math.ceil(a); 向上取整 舍去小数点 (但是Java是保留的)

alert(Math.ceil(11.1));

第四个:Math.floor(a); 向下取整 舍去小数点 (但是Java是保留的)

alert(Math.floor(11.1));

第五个 Math.round(x);四舍五入 如果是临界值都是往高的入

alert(Math.round(1.5) + "~" + Math.round(-1.5));

第六个:Math.random();返回一个随机数 范围 0~1 官方概念:可以取0但是不能取1 但是实际场景可以忽略0

alert(Math.random());

六.猜数字游戏

<script>
                猜数字游戏:
                无限通过promot弹窗来让用户输入数字
                要求：1-100的随机数
           
            var r = Math.ceil(Math.random()*100);  
            var min = 1;
            var max = 100;
            var n = 0;//计数
            while(true){//不知道用户要输入多少次
                var userR = prompt("请输入你的数字，当前范围为" + min +"~" + max);
                n++;
                //注意:prompt接受的值 都是string类型, 虽然string类型如果做数字运算会自动转成number  但是不推荐
                userR = parseInt(userR);
                if(userR==r){
                    alert("恭喜你才对了，一共猜了" + n + "次");
                    break;
                }else if(userR>r){
                    max = userR;
                    alert("你猜大了,当前范围为" + min +"~" + max);
                }else {
                    min = userR;
                    alert("你猜小了,当前范围为" + min +"~" + max);
                }
            }
        </script>

七.猜数字游戏修正版

<script>
    猜数字游戏:
    无限通过promot弹窗来让用户输入数字
    要求：1-100的随机数
    
            
        var r = Math.ceil(Math.random()*100);  
        var min = 1;
        var max = 100;
        var n = 0;//计数
        while(true){//不知道用户要输入多少次
            var userR = prompt("请输入你的数字，当前范围为" + min +"~" + max);
            userR = parseInt(userR);
            if( ! (userR>=min && userR<=max) ){
                    alert("你输入的数有误！");
                    continue;
                }
        
                
            n++;
//注意:prompt接受的值 都是string类型, 虽然string类型如果做数字运算会自动转成number  但是不推荐
            if(userR==r){
                alert("恭喜你才对了，一共猜了" + n + "次")
                break;
            }else if(userR>r){
                max = userR;
                alert("你猜大了,当前范围为" + min +"~" + max);
            }else {
                min = userR;
                alert("你猜小了,当前范围为" + min +"~" + max);
                }
            }
<script>

八.模拟AI猜拳

<script>
//如何实现简化版AI猜拳
石头  剪刀  布
           
     var arr = ["石头" , "剪刀" , "布"];
      //只需要利用随机数生成0-2的随机数  然后AI就拿到arr[rrr]
     var ran =Math.floor(Math.random()*3 );
           
      var r = arr[ran];//模拟AI出的选项
           
       var userR = prompt("请输入:'石头'，'剪刀' , '布'");
      //省略数据校验,假设用户一定会按规矩输入
           
     if(r==userR){
       alert("平了，你和AI都出的" + userR);
        }else if( ( userR=="石头" && r=="剪刀" ) || ( userR=="剪刀" && r=="布" ) ||  ( userR=="布" && r=="石头" )     ){
            alert("你赢了,你出的是" + userR + ",AI出的是" + r);
      }else{
           alert("你输了,你出的是" + userR + ",AI出的是" + r);
      }
</script>

九.模拟彩票

<script>
    题目需求如下： 共计1000个盲盒
    1等奖10个
    2等奖100个
    3等奖500个
    谢谢惠顾390个
    模拟抽奖：看看摸到什么奖:
           
     //第一步:生成一个1-1000的随机数  如果是1-10 那么就是1等奖  以此类推
            
    //分别表示中奖的次数
    var a = 0;
    var b = 0;
    var c = 0;
    var d = 0;
            
    //测试中奖概率
    for(var i = 1 ; i<=1000 ; i++){
        var r = Math.ceil(Math.random()*1000);
        if (r>=1&&r<=10) {
            a++;
        } else if(r>10 && r<=110){
            b++
        }else if(r>110 && r<=610){
            c++;
        }else{
            d++;
        }
    }
            
    document.write("1等奖出现了"  + a +"次");
    document.write("2等奖出现了"  + b +"次");
    document.write("3等奖出现了"  + c +"次");
    document.write("谢谢惠顾出现了"  + d +"次");
</script>

十.点名系统

简化版点名系统: 直接将名字显示在页面上
由于名字不是数字 但是可以将名字存在数组里面 这里随机一个下标就可以替代
var student = ["张三1","张三2","张三3","张三4","张三5","张三6","张三7"];
生成一个0 - (student.length-1)    
var r = Math.floor( Math.random() * student.length);
document.write(student[r]);

十一.date对象

<script>
//区分date表示日期和data表示数据   
//date对象创建的2种方式：
               
// //第一种 不放任何参数  表示获取当前时间
// var d = new Date();
// console.log(d);
            
//第二种方式:放若干个数字,分别表示年月日 时分秒   按照顺序  其中月份比较特殊 0表示1月
// var d = new Date(2020,11,11);//表示2020年12月11日 0点0分0秒
            
//date对象的常见方法:
            
var d = new Date(2020,11,11,12,6,33);;//表示2020年12月11日 0点0分0秒
console.log(d.getFullYear());//获取年份
console.log(d.getMonth() + 1);//获取月份  注意0表示1
console.log(d.getDate());//获取日期
console.log(d.getHours());//获取小时
console.log(d.getMinutes() );//获取分钟
console.log(d.getSeconds() );//获取秒
console.log(d.toLocaleString());//返回当前日期的字符串格式            
            
console.log(d.getTime());//返回从1970年1月1日0时0分0秒  到指定时刻的毫秒数            
</script>

十二.倒计时

<script>
//计算当前时刻距离2024年1月1日0时 还差多少时间    
var d1 = new Date();
var d2 = new Date(2024,0,1);    
var sjc = d2.getTime() - d1.getTime(); //计算出两个时间节点的相差毫秒数
sjc = parseInt(sjc / 1000);//得到是  两者的秒数
var s = sjc%60;
var m = parseInt(sjc/60%60); 
var h =  parseInt(sjc/60/60%24); 
var day = parseInt(sjc/60/60/24);
document.write("距离倒计时还剩下" + day +"天  " + h +"时" + m +"分" + s + "秒");
</script>

十三.array对象

<script>
//array对象 之前学过一遍了。
// var arr = [];
// arr.push("aa");//表示奖元素添加到数组的尾部
// console.log(arr);
            
// var arr = ['张三','分','阿萨德三','类似'];
// var str  =arr.toString();//默认以,分割
// console.log(str);
// var str = arr.join(":");
// console.log(str);
            
//适用常见:  用户选择自己的爱好框  
            

//数组的去重:
var arr = [12,543,654,,432,12,3,342,53,543,6,546,54,675,756,7,3,5,3456,46,54,654,756,42,34,234,23];
// //要求数组中重复的数字去掉.
console.log(arr.length + "这是原有的长度");
var newArr = [];
        
for(var i = 0 ;i<arr.length;i++){
        if(newArr.indexOf(arr[i]) == -1){
            newArr.push(arr[i]);
        }
    }
    console.log(newArr);
</script>

十四.string对象

<script>
//JS中的String对象的方法和Java几乎完全一致.
// 判断输入的账号是否合法
// 要求：长度8-18位。必须以yyzy开头。账号的最后6位必须是纯数字组成。
var str = "yyzysaf111111";
// console.log(str.substring(str.length-6,str.length));
            
//  console.log(Number(str.substring(str.length-6,str.length))) ;
            
var b = panduan(str);
alert(b);
            
function panduan(str){
    if(  !(str.length>=8 && str.length<=18) ){
            alert("长度不符合条件");
    return false;
        }
                
        if( ! str.startsWith("yyzy") ){
            alert("不是以yyzy开头");
            return false;
        }
                
//思路:如何判断后6位是否为纯数字
//步骤1: 取出后6位  思路 通过subString(a,b);截取
//其中b是定死了 就是str.length   其中a=str.length-6
                
    if(Number(str.substring(str.length-6,str.length))+"" =="NaN"){
        alert("后6位不是纯数字");
            return false;
        }
        return true;
    }            
</script>