[JavaScript知识库] JavaScript的第6天

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> JavaScript的第6天 -> 正文阅读

[JavaScript知识库]JavaScript的第6天

函数的参数

<!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 sum(){
            console.log(1+1);
        }
        sum(); //2

        /*
            定义一个用来求两个数和的函数
                可以在函数的()中指定一个或多个形参(形式参数)
                多个形参之间使用,隔开，声明形参就相当于在函数内部声明了对应的变量
        */
        function sum1(a,b){
            console.log(a+b);
        }

        /*
            在调用函数时，可以在()中指定实参(实际参数)
                实参将会赋值给函数中对应的形参
        */
        sum1(1,2);  //3

        /*
            调用函数时解析器不会检查实参的类型
                所以要注意，是否有可能接收到非法的参数，如果有可能则需要对参数进行类型的检查
            函数的实参可以是任意的数据类型
        */
       sum1(123,"hello");   //"123hello"
        sum1(true,false);  //1

        /*
            调用函数时，解析器也不会检查实参的数量
                多余实参不会被赋值
            如果实参的数量少于形参的数量，则没有对应实参的形参将是undefined
        */
       sum1(123,23,24);  //146
       sum1(123)         //NAN  (123+undefined)                  
    </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 sum(a,b,c){
            alert(a+b+c);
       }
       //调用函数
       sum(1,2,3);  //6

       /*
            创建一个函数，用来计算三个数的和
            可以使用 return 来设置函数的返回值
                语法:
                    return 值

            return后的值将会作为函数的执行结果返回
                可以定义一个变量来接收该结果

            在函数中return后的语句都不会执行

            function sum1(a,b,c){
                    return a+b+c;
                    alert("这是一段死代码");
            }

            如果return语句后不跟任何值就相当于返回一个undefined，
            如果函数中不写return，则也会返回undefined

            function sum1(a,b,c){
                    
                    alert("这是一段死代码");
            } 
            console.log(sum1(1,2,3));   //undefined

            return后可以跟任意类型的值
            function sum1(a,b,c){
                return "hello";
                alert("这是一段死代码");
            }
            sum1(1,2,4);  //hello
        */
        function sum1(a,b,c){
            return a+b+c;
            alert("这是一段死代码");
       }
       //调用函数
       //变量result就是函数的执行结果
       //函数返回什么result的值就是什么
       var result=sum1(2,3,4);
       console.log(result);      //9
       console.log(sum1(1,2,3)); //6
    </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(a,b){
            console.log(a);
            console.log(b);
        })(1,2);    //1,2
    </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>
        /*
            创建一个对象
        */
       var obj=new Object();

       //向对象中添加属性
       obj.name="孙悟空";
       obj.age=18;

        //对象的属性值可以是任何的数据类型，也可以是个函数
        obj.sayName=function(){
            console.log(obj.name);
        };

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

        console.log(obj.sayName);  //函数的结构
        // 使用函数()的语法调用sayName这个属性中包含的函数
        obj.sayName();  //孙悟空

        /*
            函数也可以称为对象的属性，
                如果一个函数作为一个对象的属性保存，
                那么我们称这个函数是这个对象的方法
                调用这个函数就说调用对象的方法(method)

            但是它只是名称上的区别没有其他的区别
        */

        // 调函数
        fun();
        // 调方法
        // obj.sayName();

        var obj2={
            name:"主播",
            age:18,
            SayDay:function(){
                console.log(obj2.name);
            }
        };

        obj2.SayDay();
    </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>
        /*
            语法:
                for(var 变量 in 对象){

                }

            for ... in语句 对象中有几个属性，循环体就会执行几次
                每次执行时，会将对象中的一个属性的名字赋值给变量
        */

        var obj={
            name:"孙悟空",
            age:18,
            gender:"男",
            address:"花果山"
        };
        //枚举对象中的属性
        //使用for...in 语句
        for(var n in obj){
            console.log(n);  //name age gender address
        };
        for(var n in obj){
            // 使用obj[]形式传递变量给obj并输出值([]中可以传递任意类型的值)
            console.log(obj[n]);  //孙悟空 18 男 花果山 
        };
    </script>
</head>
<body>
    
</body>
</html>

全局作用域(Scope)

<!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>
        /*
            作用域
                ---作用域指一个变量的作用的范围
                ---在JS中一共有两种作用域:
                    1，全局作用域
                        ---直接编写在script标签中的JS代码，都在全局作用域中
                        ---全局作用域在页面打开时创建，在页面关闭时销毁
                        ---在全局作用域中有一个全局对象window，它代表浏览器的一个窗口，
                            它由浏览器创建我们可以直接使用

                            console.log(window);   //window结构


                        ---在全局作用域中:
                            创建的变量都会作为window对象属性保存

                            var a=10;
                            var b=30;
                            console.log(window.a);//10
                            console.log(window.b);//30

                            创建的函数都会作为window对象的方法保存

                            function fun(){
                                console.log("这是一个window对象的一个方法")
                            }
                            fun();     //等于window.fun(); //这是一个window对象的一个方法
                            window.fun();                  //这是一个window对象的一个方法

                        ---在全局作用域中的变量都是全局变量
                            在页面的任意的部分都可以访问的到

        */
       function fun(){
           console.log("这是一个window对象的一个方法")
       }
       fun();     //等于window.fun(); //这是一个window对象的一个方法
       window.fun();                  //这是一个window对象的一个方法

        
    </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>
        /*
            变量的声明提前
                ---使用var关键字声明的变量，会在所有的代码执行之前被声明(但是不会赋值)
                    但是如果声明变量时不用var关键字，则变量不会被声明提前
                    console.log(a);    //undefined   
                    var a=10;
                    上式相当于
                    var a;
                    console.log(a);
                    a=10;

            函数的声明提前
                ---使用函数声明形式创建的函数function 函数(){}
                    它会在所有的代码执行之前就被创建，所有我们可以在函数声明前来调用函数

                    fun1();  //这是一个使用函数声明形式创建的函数
                    function fun1(){
                        console.log("这是一个使用函数声明形式创建的函数");
                    }

                ---使用函数表达式创建的函数不会被声明提前

                    fun2();      //报错
                    var fun2=function(){
                        console.log("这是使用函数表达式创建的函数");
                    }
        */
        
        // 使用函数声明形式创建函数，会被提前创建
        fun1();  //这是一个使用函数声明形式创建的函数
        function fun1(){
            console.log("这是一个使用函数声明形式创建的函数");
        }
        // 使用函数表达式创建函数，不会被提前创建
        fun2();         //报错
        var fun2=function(){
            console.log("这是使用函数表达式创建的函数");
        }

    </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>
        /*
            函数作用域:
                ---调用函数时创建函数作用域，函数执行完毕以后，函数作用域销毁
                ---每调用一次函数就会创建一个新的函数作用域，它们之间是相互独立的
                ---在函数作用域中可以访问到全局作用域的变量，在全局作用域中无法访问到函数作用域的变量
                    //创建一个全局变量
                    var a=10;

                    function fun1(){
                        console.log("a="+a);   
                        var b=20;
                    }
                    fun1();             //a=10
                    console.log(b);    //Uncaught ReferenceError: b is not defined

                ---当在函数作用域操作一个变量时，它先在自身作用域中寻找，如果有就直接使用
                    如果没有则向上一级作用域中寻找，直到找到全局作用域
                    如果全局作用域中依然没有找到，则会报错ReferenceError

                     //创建一个全局变量
                    var a=10;

                    function fun1(){
                        var a=20;
                        console.log("a="+a);   
                    }
                    fun1();             //a=20

                ---在函数中要访问全局变量可以使用window对象
                    
                    //创建一个全局变量
                    var a=10;

                    function fun1(){
                        var a=20;
                        console.log("a="+window.a);   
                    }
                    fun1();             //a=10
    
        */

       //创建一个全局变量
       var a=10;

       /*
            在函数作用域中也有声明提前的特性
                使用var关键字声明的变量，会在函数的所有代码执行之前被声明
       */
       function fun1(){
        console.log("a="+a);  
        var a=20; 
       }
       fun1();             //a=undefined

    /*
       函数声明也会在函数所有的代码执行之前执行
    */

    function fun3(){
        fun4();
        function fun4(){
            console.log("我是fun4");
        };
    };
    fun3();   //我是fun4

    /*
        在函数中，不使用var声明的变量都会成为全局变量
    */

        function fun5() {
            //a没有使用var关键字，则会设置为全局变量,即
            //a=10等价于window.a=10
            a=10;
        };
        // 在全局输出a
        console.log(a); //10
    

    /*
        定义形参就相当于在函数作用域中声明了变量
    */
   var e=10;
   function fun6(e) {
    //    相当于在这里写了var e;
       console.log(e);
   };
   fun6(20); //20
   fun6();  //undefined
    </script>
</head>
<body>
    
</body>
</html>

JavaScript知识库最新文章

ES6的相关知识点

react 函数式组件 & react其他一些总结

Vue基础超详细

前端JS也可以连点成线（Vue中运用 AntVG6）

Vue事件处理的基本使用

Vue后台项目的记录（一）

前后端分离vue跨域，devServer配置proxy代理

TypeScript

初识vuex

vue项目安装包指令收集

加:2021-12-24 18:23:15 更:2021-12-24 18:25:46

360图书馆购物三丰科技阅读网日历万年历 2024年11日历

-2024/11/24 9:33:50-

图片自动播放器
↓图片自动播放器↓

TxT小说阅读器
↓语音阅读,小说下载,古典文学↓

一键清除垃圾
↓轻轻一点,清除系统垃圾↓

图片批量下载器
↓批量下载图片,美女图库↓

网站联系: qq:121756557 email:121756557@qq.com IT数码