【JavaWeb系列】02_JS函数与对象[通俗易懂]

一、函数

//函数的构建
        function getSum(num1,num2){ 
   
                var sum=0;
                for(var i=0;i<=num2;i++){ 
   
                    sum+=1;
                }
                console.log(sum);
        }
//函数的调用
    getSum(1,100);
    getSum(6,90);

1、arguments的使用

• 当我们不确定有多少个参数传递的时候，可以使用arguments来获取，在JS当中，arguments实际上是当前函数的一个内置对象。所有的函数都内置了一个arguments对象，arguments对象中储存了传递的所有实参。
• 只有函数有此arguments对象

    <script>
        function fu(){ 
   
            console.log(arguments);//里面存储了所有传递过来的实参
        }
        fn(1,2,3)
    </script>

• arguments展示的形式是一个伪数组，因此可以进行遍历。
• 伪数组具有以下特点：
  • 具有length属性
  • 按索引方式存储数据
  • 不具有数组的push，pop方法

    <script>
        function fn(){ 
   
            console.log(arguments);//里面存储了所有传递过来的实参
            console.log(arguments.length);
            console.log(arguments[2]);
            //按照数组的方式变量arguments
            for(var i=0;i<arguments.length;i++){ 
   
                console.log(arguments[i]);
            }
        }
        fn(1,2,3)
    </script>

2、案例

• 利用函数求任意个数的最大值

    <script>
        function getMax(){ 
   
            var max=arguments[0];
            for(var i=0;i<arguments.length;i++){ 
   
                if(arguments[i]>max){ 
   
                    max=arguments[i];
                }
            }
            return max;

        }
        console.log(getMax(1,2,3));
        console.log(getMax(21,72,3));
        console.log(getMax(91,20,3));

    </script>

二、作用域

1、全局和局部变量

• 变量的作用域分为全局变量和局部变量
• 函数内部的变量就是局部变量，只能在函数内部使用

    <script>
        var num=10;//全局变量
        function f1(){ 
   
            var num=20;//局部变量
            function f2(){ 
   
                console.log(num);//输出的结果是20，按照链式
            }
        }
    </script>

2、作用域链

• 根据在内部函数可以访问外部函数变量的这种机制，用链式查找决定哪些数据能被内部函数访问，就称为作用域链。

    <script>
        var num=10;
        function f1(){ 
   
            var num=20;
            function f2(){ 
   
                console.log(num);//输出的结果是20，按照链式
            }
        }
    </script>

三、对象

1、构造函数创建对象

构造函数语法格式：

    <script>
        function 构造函数(){ 
   
            this.属性=值;
            this.方法=function(){ 
   };
        }
        new 构造函数名();
    </script>

• 1、构造函数的首字母要大写
• 2、构造函数不需要return即可返回结果
• 3、构造函数的属性和方法前必须添加this

    <script>
        function Star(uname,age,sex){ 
   
            this.name=uname;
            this.age=age;
            this.sex=sex;
            this.sing=function(sang){ 
   //构造函数的方法
                console.log(sang);
            }
        }
        var ldh=new Star('刘德华',18,'男');
        console.log(typeof ldh);//判断是否是一个对象
        console.log(ldh.name);
        console.log(ldh['sex']);
        ldh.sing('冰雨');
    </script>

2、内置对象

• JS当中对象有三种：自定义对象，内置对象，浏览器对象。

• 内置对象是指JS自带的一些对象，这些对象供开发者使用，提供一些最基本的功能。

• JS提供了多个内置对象：Math,Date,Array,String…

3、Math对象

相关资料

     console.log(Math.PI);
     console.log(Math.max(1,99,4));

封装自己的数学函数对象：

     var myMath={ 
   
        PI:3.1415926;
        max:function(){ 
   
            var max=arguments[0];
            for(var i=1;i<arguments.length;i++){ 
   
                if(arguments[i]>max){ 
   
                    max=arguments[i];
                }
            }
            return max;
        },
        min:function(){ 
   
            var min=arguments[0];
            for(var i=0;i<arguments.length;i++){ 
   
                if(arguments[i]<min){ 
   
                    min=arguments[i];
                }
            }
            return min;
        },
     }

一些Math的函数：

     Math.PI;      //圆周率
     Math.floor();   //向下取整
     Math.ceil();    //向上取整
     Math.round();   //四舍五入
     Math.abs();     //绝对值
     Math.max()    //最大值
     Math.min();   //最小值

随机数方法random（）：

返回两个数之间的随机整数的函数：

function getRandom(min, max) { 
   
  return Math.floor(Math.random() * (max - min + 1)) + min; //含最大值，含最小值 
}
    console.log(arr[0]);
    var arr=['张三','李四','王五'];
    console.log(arr[getRandom(0,arr.length-1)])

4、Dath对象

创建一个新Date对象的唯一方法是通过new 操作符，例如：let now = new Date();
若将它作为常规函数调用（即不加 new 操作符），将返回一个字符串，而非 Date 对象。

• Date对象和Math对象不一样，他是一个构造函数，需要实例化之后才能使用。

    var date=new Date();
    console.log(date);

参数的常用写法：

    var date1=new Date(2019,10,1);//数字型
    var date2=new Date('2019-10-1 8:8:8');//字符串

格式化日期：

• 注意：如果是获取月份的话需要+1

    var date=new Date();
    var year=date.getFullYear();
    var month=date.getMonth()+1;
    var dates=date.getDate();

格式化年月日：

    var date=new Date();
    var year=date.getFullYear();
    var month=date.getMonth()+1;
    var dates=date.getDate();
    var arr=['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
    var day=date.getDate();
    console.log('今天是'+year+'年'+month+'月'+dates+'日'+arr[day]);

格式化时分秒：

    var date=new Date();
    console.log(date.getHours());
    console.log(date.getMinutes());
    console.log(date.getSeconds());
    //封装一个函数，返回当前的时分秒
    function getTime(){ 
   
        var time=new Date();
        var h=time.getHours();
        h=h < 10 ? '0' + h: h;
        var m=time.getMinutes();
        var s=time.getSeconds();
        return h+':'+m+':'+s;
    }
    console.log(getTime);

5、倒计时案例

• 核心算法：用时间戳来做。用户输入的总时间毫秒数减去现在时间的总的毫秒数，得到的就是剩余时间的毫秒数。

    function countDown(time){ 
   
        var nowTime=new Date();         //返回的是当前时间总的毫秒数
        var inputTime=new Date(time);   //返回的是用户输入时间的总的毫秒数
        var times=(inputTime -nowTime)/1000; //times是剩余时间总的秒数
        var d=parseInt(times/60/60/24);
        var h=parseInt(times/60/60%24);
        var m=parseInt(times/60%60);
        var s=parseInt(times%60);
        return d+'天'+h+'时'+m+'分'+s+'秒';
    }
    console.log(countDown('2022-7-7 18:00:00'))

    function countDown(time){ 
   
        var nowTime=new Date();         //返回的是当前时间总的毫秒数
        var inputTime=new Date(time);   //返回的是用户输入时间的总的毫秒数
        var times=(inputTime -nowTime)/1000; //times是剩余时间总的秒数
        var d=parseInt(times/60/60/24);
        d=d<10?'0'+d:d;
        var h=parseInt(times/60/60%24);
        h=h<10?'0'+h:h;
        var m=parseInt(times/60%60);
        m=m<10?'0'+m:m;
        var s=parseInt(times%60);
        s=s<10?'0'+s:s;
        return d+'天'+h+'时'+m+'分'+s+'秒';
    }
    console.log(countDown('2022-7-7 18:00:00'))

今天的文章【JavaWeb系列】02_JS函数与对象[通俗易懂]分享到此就结束了，感谢您的阅读。