JavaScript (四) js的基本语法 - - 函数练习、arguments、函数定义、作用域、预解析

分手后的思念是犯贱 2021-11-14 15:10 190阅读 0赞

个人博客网：[https://wushaopei.github.io/][https_wushaopei.github.io]    (你想要这里多有)

一、函数练习

1、求最值

//    - 求2个数中的最大值
    
               function getMax(num1, num2) {
                 return num1 > num2 ? num1 : num2;
               }
               console.log(getMax(10,20));
               //console.log(getMax);//函数的代码
    
               function getMax(num1, num2) {
                 return num1 > num2 ? num1 : num2;
               }
               var num1=10;
               var num2=20;
               //函数外面的num1和函数的形参num1不是同一个变量
               var result=getMax(num1,num2);
               console.log(result);
            console.log(getMax);//函数的代码
    
    
            //    - 求3个数中的最大值
    
            function getThreeMax(x, y, z) {
                return x > y ? (x > z ? x : z) : (y > z ? y : z);
            }
            console.log(getThreeMax(10,2,24));

2、质数判断

//    - 判断一个数是否是素数(质数),只能被1和自身整除，质数是从2开始
            //用这个数字和这个数字前面的所有的数字整除一次(没有1的,没有自身的)
    
            function isPrimeNumber(num) {
                for(var i=2;i<num;i++){
                    if(num%i==0){
                        //说明有一个数字整除了,就没有必要向后继续整除了,此时就已经验证出不是质数
                        return false;
                    }
                }
                return true;
            }
            console.log(isPrimeNumber(8)?"是质数":"不是质数");
    
               var result=isPrimeNumber(2);
               if(result){
                 console.log("这个数字是质数");
               }else{
                 console.log("这个数字不是质数");
               }

3、求最值与和

//求一个数组中的最大值和最小值还有和
            /**
             *  给我一个数组,我返回一个数组(最大值,最小值,和)
             * @param array参数是一个数组
             * @returns {*[]}返回值是一个数组,第一个元素值是最大值,第二个元素值是最小值,第三个元素值是和
             */
            function getArrayMaxAndMinAndSum(array) {
                var min = array[0];//最小值
                var max = array[0];//最大值
                var sum = 0;//和
                for (var i = 0; i < array.length; i++) {
                    sum += array[i];//和
                    //最大值
                    if (max < array[i]) {
                        max = array[i];
                    }// end if
                    //最小值
                    if (min > array[i]) {
                        min = array[i];
                    }// end if
                }// end for
                var arr = [max, min, sum];
                return arr;
            }
    //测试
            var resultArray = getArrayMaxAndMinAndSum([1, 2, 3, 4, 5, 6, 7]);
            console.log("最大值:" + resultArray[0]);//7
            console.log("最小值:" + resultArray[1]);//1
            console.log("和:" + resultArray[2]);//28

4、数组反转

//通过函数实现数组反转
            function reverseArray(arr) {
                for (var i = 0; i < arr.length / 2; i++) {
                    var temp = arr[i];
                    arr[i] = arr[arr.length - 1 - i];
                    arr[arr.length - 1 - i] = temp;
                }
                return arr;
            }
            console.log(reverseArray([1, 2, 3, 4, 5]));

5、通过函数实现冒泡排序

//通过函数实现冒泡排序
            function sortArray(arr) {
                //控制比较的轮数
                for (var i = 0; i < arr.length - 1; i++) {
                    //控制每一轮的比较次数
                    for (var j = 0; j < arr.length - 1 - i; j++) {
                        if (arr[j] > arr[j + 1]) {
                            var temp = arr[j];
                            arr[j] = arr[j + 1];
                            arr[j + 1] = temp;
                        }//end if
                    }//end for
                }//end for
                return arr;
            }
            console.log(sortArray([0, 19, 34, 10, 100, 2]));

6、阶乘

//求一个数字的阶乘
            function getJieCheng(num) {
                var result = 1;
                for (var i = 1; i <= num; i++) {
                    result *= i;
                }
                return result;
            }
            console.log(getJieCheng(5));//1*2*3*4*5
            //求一个数字的阶乘和  5  5的阶乘+4的阶乘+3的阶乘+2的阶乘+1的阶乘
    
            function getJieChengSum(num) {//5
                var sum=0;//和
                for(var i=1;i<=num;i++){
                    sum+=getJieCheng(i);
                }
                return sum;
            }
            console.log(getJieChengSum(5));
            //1 +2+ 6+ 24+120
            //函数内部可以调用其他的函数

7、斐波那契数列

//求斐波那契数列,12---144
            //1 1 2 3 5 8 13 21 34 55 89 144
            function getFib(num) {
                var num1=1;
                var num2=1;
                var sum=0;
                for(var i=3;i<=num;i++){
                    sum=num1+num2;
                    num1=num2;
                    num2=sum;
                }
                return sum;
            }
            console.log(getFib(12));

8、输入,年月日,获取这个日期是这一年的第多少天

//输入,年月日,获取这个日期是这一年的第多少天
    
            //判断这个年份是不是闰年
            function isLeapYear(year) {
                return year%4==0&&year%100!=0||year%400==0;
            }
            //年---月---日:2017年4月28日
            function getDays(year, month, day) {
                //定义变量存储对应的天数
                var days = day;
                //如果用户输入的是一月份,没必要向后算天数,直接返回天数
                if (month == 1) {
                    return days;
                }
                //代码执行到这里-----说明用户输入的不是1月份
                //用户输入的是7月份23日----1，2，3  +23
                //定义一个数组,存储每个月份的天数
                var months = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
                //小于的是输入的月份-1
                for (var i = 0; i < month - 1; i++) {
                    days += months[i];
                }
                //需要判断这个年份是不是闰年
                if(isLeapYear(year)&&month>2){
                    days++;
                }
                return days;
            }
    
            console.log(getDays(2000,3,2));

二、arguments对象

> 使用arguments对象可以获取传入的每个参数的值

示例：

//计算n个数字的和
            //定义一个函数,如果不确定用户是否传入了参数,或者说不知道用户传了几个参数,没办法计算,但是如果在函数中知道了参数的个数,也知道了，每个参数的值.可以
    
            //定义
               function f1() {
                 //获取的是函数在调用的时候,传入了几个参数
                 //console.log(arguments.length);
                 //使用arguments对象可以获取传入的每个参数的值
                 console.log(arguments);
               }
    
               f1(10,20,30,40,100,200);//调用
    
    
    
            function f1() {
                //arguments----->数组使用------伪数组---
                var sum=0;
                for(var i=0;i<arguments.length;i++){
                    sum+=arguments[i];
                }
                return sum;
            }
    
            console.log(f1(10,20,30));

三、函数的其他定义方式

*  命名函数:函数如果有名字,就是命名函数
 *  匿名函数:函数如果没有名字,就是匿名函数

函数的另一种定义方式：

函数表达式：

把一个函数给一个变量，此时形成了函数表达式

var 变量=匿名函数；

例子：

var f1 = function(){
    
    };

如果是函数表达式,那么此时前面的变量中存储的就是一个函数,而这个变量就相当于是一个函数,就可以直接加小括号调用了 f1();

注意：

>     函数表达式后面,赋值结束后,要加分号

函数定义：

1、函数声明 -- 函数定义：

function 函数名（）{
    
       函数体
    
    }

示例：

2、函数类型：

function f1() {
                console.log("我是函数");
            }
            //如何获取某个变量的类型? typeof
            console.log(typeof f1);
            //函数是有数据类型,数据类型:是function 类型的

3、函数作为参数使用

//函数可以作为参数使用,如果一个函数作为参数,那么我们说这个参数(函数)可以叫回调函数
            //只要是看到一个函数作为参数使用了,那就是回调函数
    
            function sayHi(fn) {
                console.log("您好啊");
                fn();//fn此时应该是一个函数
            }
            function suSay() {
                console.log("我猥琐,我邪恶,我龌龊,小苏说");
            }
            sayHi(suSay);
    
               function f1(x,y) {
                 console.log(x+y);
               }
               f1(10,20);
    
               function f2(x,y) {
                 console.log(x+y);
               }
               f2("小苏","猥琐");
               function f3(x) {
                 console.log(x);
               }
               f3(true);

//函数声明,fn是变量,fn是参数,
               function f1(fn) {
                 fn();//函数调用---说明fn这个变量中存储的是一个函数
               }
    
               function f2() {
                 console.log("哦,这也可以");
               }
               f1(f2);
    
               var f1=function () {
                 console.log("哈哈");
               };

4、结论

*  函数是可以作为返回值使用的:

function f1() {
                console.log("f1函数调用了");
                return function () {
                    console.log("这是一个函数");
                };
            }
    
            var ff=f1();//调用
            //ff就是一个函数了
            ff();

四、作用域

1、使用范围

** 全局变量 :**

*  声明的变量是使用var声明的,那么这个变量就是全局变量,全局变量可以在页面的任何位置使用

>  除了函数以外 , 其他的任何位置定义的变量都是全局变量

** 局部变量 :**

*  在函数内部定义的变量,是局部变量,外面不能使用

>  全局变量 , 如果页面不关闭,那么就不会释放,就会占空间,消耗内存

全局作用域:全局变量的使用范围
            局部作用域:局部变量的使用范围

**块级作用域:**

> 一对大括号就可以看成是一块,在这块区域中定义的变量,只能在这个区域中使用,但是在js中在这个块级作用域中定义的变量,外面也能使用;

**说明 : **

>  *  js没有块级作用域,只有函数除外

隐式全局变量:声明的变量没有var,就叫隐式全局变量
        全局变量是不能被删除的,隐式全局变量是可以被删除的
        定义变量使用var是不会被删除的,没有var是可以删除的

示例：

function f1() {
                 number=1000;//是隐式全局变量
               }
               f1();
               console.log(number);
    
               var num1=10;
               num2=20;
               delete num1;//把num1删除了
               delete num2;//把num2删除了
               console.log(typeof num1);
               console.log(num1+10);
               console.log(typeof num2);

扩展:隐式

2、作用域链

五、预解析

1、预解析 : **就是在解析代码之前**

2、预解析做什么事?

> 把变量的声明提前了----提前到当前所在的作用域的最上面
> 
> 函数的声明也会被提前---提前到当前所在的作用域的最上面

注意：

*  函数调用的时候,把会函数的声明提升到作用域的上面

f1();//调用
               var num=20;//这个变量的声明会提升到变量使用之前
               function f1() {
                 console.log(num);
                 //var num=10;
               }

示例：

3、预解析分段的问题的局部作用域的问题

*  预解析中,变量的提升,只会在当前的作用域中提升,提前到当前的作用域的最上面
 *  函数中的变量只会提前到函数的作用域中的最前面,不会出去
 *  预解析会分段(多对的script标签中函数重名,预解析的时候不会冲突)

function f1() {
    
                 console.log(num);//undefined
                 var num=10;
               }
               f1();
               console.log(num);
              function f1() {
                
                    console.log("哈哈");
              }

[https_wushaopei.github.io]: https://wushaopei.github.io/