前端web有关javacsript的函数内容总结

GRIT️‍

已于 2023-05-18 14:42:41 修改

阅读量335

点赞数

文章标签：前端 javascript 开发语言

于 2023-05-16 22:26:42 首次发布

本文链接：https://blog.csdn.net/weixin_73184497/article/details/130649268

版权

1、声明函数：

function 函数名（形参1，形参2，......）{

函数主体；
}

调用函数：函数名（实参）；

形参是接受实参的，形参类似一个变量。

2、例子：

（一）、利用函数计算1-100之间的累加：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function getsum(){
            var sum=0;
            for(var i=0;i<=100;i++){
                sum+=i;
            }
            console.log(sum);
        }
        getsum();
    </script>
</head>
<body>
    
</body>
</html>

（二）利用函数求任意两个数之间的和

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function getsum(start,end){
            var sum=0;
            for(var i=start;i<=end;i++){
                sum+=i;
            }
            console.log(sum);
        }
        getsum(1,100);
    </script>
</head>
<body>
    
</body>
</html>

3、参数个数：

①如果参数个数和形参的个数一致，则输出正常结果；

②如果实参的个数多于形参的个数会取到形参的个数。

③如果实参的个数小于形参的个数多于的形参的个数定义为undefined 最终的结果是NaN，形参可以看作是不用声明的变量，默认值为undefined.

上述代码写为

getsum(1,100);----------------->结果为5050

getsum(1);----------------------------->结果为0

getsum(1,3,100);----------------------------->结果为6.

4、返回值：

function 函数名（）{
return 返回的值；

}

函数只是来实现某一个功能的，最终的结果需要返回给函数的调用者函数名（）通过return实现的

只要函数遇到return就把后面的结果返回给函数的调用者函数名（）=return后面的结果。

5、例子：

（一）利用函数求两个数的最大值：

        function max(num1,num2){
            var max=num1;
            if(max<num2){
                max=num2;
            }
            return max;
        }
        console.log(max(1,10));

上述函数主体if语句也可以去掉，直接变为函数返回值return num1>num2 ? num1:num2;

（二）利用函数求数组中的最大值：

        function max(arr){
            var arr;
            var max=arr[0];
            for(var i=1;i<=arr.length;i++){
                if(arr[i]>max){
                    max=arr[i];
                }
               
            }
            return max;
        }
        arr1=[1,5,2,7,8,9];
        console.log(max(arr1));

注意：

①return 会终止函数，即return 后面的代码是不会被执行的。

例：function sum(){
return 6;

alter("不会被执行”）；

}

此例中alter是不会被执行的。

②return 只会返回一个值，且返回的结果是最后一个值。

③可以返回数组

例：

        function result(num1,num2){
            return [num1+num2,num1-num2,num1*num2,num1/num2];
        }
        var re=result(1,2);
        console.log(re);

④没有返回值则返回undefined.

6、argument的使用：

function fn(){
console.log(arguments);

}

fn(1,2,3);

只有函数才有arguments对象，而且是每个函数都内置好了这个arguments，是一个伪数组，并不是真正意义的数组（具有数组的length的属性，按照索引的方式进行储存的，它没有真正数组的一些方法，pop() puush()等等。

当我们不确定有多少个参数进行传递时可以用arguments来获取。

       function getmax(){
            var max=arguments[0];
            for(var i=1;i<arguments.length;i++){
                if(arguments[i]>max){
                    max=arguments[i];
                }
            }
            return max;
        }
        console.log(getmax(99,2,3));

7、一些函数的应用例子：

（一）、利用函数对任意数组进行翻转

        function reserse(arr){
            var newarr=[];
            for(var i=arr.length-1;i>=0;i--){
                newarr[newarr.length]=arr[i];


            }
            return newarr;
        }
        var arr=[1,2,3,4,5,6,7,8];
        console.log(reserse(arr));

（二）、利用函数冒泡排序：

        function sort(arr){
            for(var i=0;i<arr.length-1;i++){
                for(var j=0;j<arr.length-i-1;j++){
                    if(arr[j]>arr[j+1]){
                        var temp=arr[j];
                        arr[j]=arr[j+1];
                        arr[j+1]=temp;
                    }
                }
            }
            return arr;
        }
        var arr1=sort([7,6,5,4,3,21]);
        console.log(arr1);

（三）、用函数判断闰年

        function isRun(year){
            var flag=false;
            if(year%4==0&&year%100!=0||year%400==0){
                flag=true;
            }
            return flag;

        }
        console.log(isRun(2001));

函数是可以相互调用的：
function fn1(){
console.log(11）；

fn2();

};

function fn2(){
console.log(12);

}

例：

        function isRun(year){
            var flag=false;
            if(year%4==0&&year%100!=0||year%400==0){
                flag=true;
            }
            return flag;

        }
        // console.log(isRun(2001));

        function backDay(){
            var year=prompt("请您输入年份：");
            if(isRun(year)){
                alert('当前年份是闰年2月份29天');

            }else {
                alert("当前是平年2月份28天");
            }
            
        }
        backDay();

8、函数表达式（匿名函数）

形式：var 变量名=function(){ };

在这里fun是变量名不是函数名，，函数表达式声明方式跟声明变量差不多，只不过变量存储的是值而函数表达式里存储的是函数，函数表达式也可以进行参数传递。

        var fun=function(aru){
            console.log("我是函数表达式");
            console.log(aru);

        }
        fun('pink');

9、变量的作用域

①全局变量：在全局作用域下的变量在全局下都可以使用（注意：如果在函数内部没有声明直接赋值的也是全局变量）只有游览器关闭才销毁比较占内存资源。

②局部变量在局部作用域下的变量在函数内部的变量就是局部变量，当我们的程序执行完毕时就销毁，比较节约内存资源。

        var num=10;
        console.log(num);
        function fn(){
            var num1=20；
            console.log(num);
            num2=30;

        }
        fn();
        console.log(num2);

上述代码中，num和num2均为全局变量,num1为局部变量，只能在函数内部使用

块级作用域：if{ } 、 for { }

if(3>5){
var num=2;

}

console.log(num);会输出undefined，外面不能调用num.

10、作用域链

内部函数访问外部函数的变量，采取的是链式查找的方式来决定取那一个值这种结构我们称作作用链域就近原则

        var num=10;
        function fn(){
            var num=20;
            function fun(){
                console.log(num);
            }
            fun();
        }
        fn();

上述代码输出的是20.因为离要输出的num最近的是num=20.

        var num=10;
        function fn(){
            var num=20;
            function fun(){
                console.log(num);
            }
            fun();
        }
        var num=456;
        fn();

输出仍为20.

 console.log(num);
 var num=10;

 相当于执行了以下代码

 var num;
 console.log(num);
 num=10;

        fun();
        var fun=function(){
            console.log(22);
        }

        相当于执行了以下代码
        var fun;
        fun=function(){
            console.log(22);
        }

上述代码报错。

运用js引擎进行js分为两步：

①预解析 js引擎会把js里所有的var和function提升当前作用域的最前端

预解析分为变量预解析（变量提升）和函数预解析（函数提升）

变量提升：把所有的变量声明提升到作用域的最前面不提升赋值操作

函数提升就是把所有的函数声明提升到当前作用域的最前面不调用函数

②代码执行按照代码书写的顺序从上往下执行

例：

        var num=10;
        function fn(){
            console.log(num);
            var num=20;
            console.log(num);
        }
       fn();
       等价于：
        var num;
        function fn(){
            var num;
            console.log(num);
            num=20;
            console.log(num);

       }
       fn();

        f1();
        console.log(c);
        console.log(b);
        console.log(a);
        function f1(){
            var a=b=c=9;
            console.log(a);
            console.log(b);
            console.log(c);
        }

        等价于：
        function f1(){
            a=b=c=9;
            console.log(a);
            console.log(b);
            console.log(c);
        }
        f1();
        console.log(c);
        console.log(b);
        console.log(a);

注意：var a=b=c=9;相当于var a=9;b=9;c=9,b和c直接赋值没有var声明当全局变量看，若为集体声明应为var a=9,b=9,c=9;

GRIT️‍

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
前端web有关javacsript的函数内容总结

只有函数才有arguments对象，而且是每个函数都内置好了这个arguments，是一个伪数组，并不是真正意义的数组（具有数组的length的属性，按照索引的方式进行储存的，它没有真正数组的一些方法，pop() puush()等等。相当于var a=9;c=9,b和c直接赋值没有var声明当全局变量看，若为集体声明应为var a=9,b=9,c=9;在这里fun是变量名不是函数名，，函数表达式声明方式跟声明变量差不多，只不过变量存储的是值而函数表达式里存储的是函数，函数表达式也可以进行参数传递。
复制链接

扫一扫