JavaScript学习笔记6

发布于：2023-01-11 ⋅ 阅读:(571) ⋅ 点赞:(0)

目录

函数没有return返回undefined

arguments的使用

伪数组

利用arguments求任意个数的最大值

利用函数翻转数组

利用函数封装进行冒泡排序

利用函数封装判断是否是闰年

函数可以调用另外一个函数

输出2月份天数

函数的两种声明方式

1.利用函数function关键字来自定义函数（命名函数）

2.函数表达式（匿名函数）

作用域

JavaScript作用域

全局作用域

局部作用域

变量作用域

全局变量

局部变量

区别

JS没有块级作用域

作用域链

JS预解析

预解析

变量预解析

函数预解析

预解析案例1

JavaScript对象（object）

对象是由属性和方法来组成的

属性

方法

创建对象的三种方法

利用字面量

结果​编辑​编辑

利用new Object

利用构造函数

  • 函数没有return返回undefined

    • 函数如果有return则返回的是return，如果没有 则返回undefined

    • return退出循环，且能够返回return语句中的值

    • 代码

      <!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>没有return返回undefined</title>
    <script>
        //4.函数如果有return则返回的是return，如果没有 则返回undefined
        function fun1() {
            return 666;
        }
        console.log(fun1());

        function fun2() {

        }
        console.log(fun2());
    </script>
</head>

<body>

</body>

</html>

    • 结果

  • arguments的使用

    • 只有函数才有arguments对象 而且每个函数都内置好了arguments

    • 当不确定有多少个参数传递，使用arguments获取参数

    • arguments是当前函数的内置对象

    • arguments存储了传递的所有实参

    •  

    • 伪数组

      • 1.不是真正意义上的数组

      • 2.具有数组的length的属性

      • 3.按照索引的方式进行存储

      • 4.但是它没有真正数组的一些方法：pop（）  push（）

      • 代码

        <!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>arguments的使用</title>
    <script>
        //伪数组 并不是真正意义上的数组
        function fn() {
            /* console.log(arguments);//里面存储了所有传递过来的实参
            console.log(arguments.length);//伪数组具有数组的length属性
            console.log(arguments[2]);//伪数组也用索引方式存储 */
            //我们可以使用数组的方式遍历arguments
            for (var i = 0; i < arguments.length; i++) {
                console.log(arguments[i]);
            }
        }
        fn(1, 2, 3);
        fn(1, 2, 3, 4, 5);

    </script>
</head>

<body>

</body>

</html>

         

      • 结果

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

      • 案例

        <!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>利用arguments求任意数的最大值</title>
    <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(1, 2, 3, 4, 5));
        console.log(getMax(11, 2, 34, 444, 5, 100));
    </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>利用函数翻转数组</title>
    <script>
        //reverse 翻转的意思
        function reverse(arr) {
            var newArr = [];
            for (var i = arr.length - 1; i >= 0; i--) {
                newArr[newArr.length] = arr[i];
            }
            return newArr;
        }
        var arr1 = reverse([1, 3, 4, 6, 9]);
        console.log(arr1);
    </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>利用函数封装进行冒泡排序</title>
    <script>
        //sort排序的意思
        function sort(arr) {
            var temp;
            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]) {
                        temp = arr[j];
                        arr[j] = arr[j + 1];
                        arr[j + 1] = temp;
                    }
                }
            }
            return arr;
        }
        var re = sort([1, 9, 3, 15, 5]);
        console.log(re);
        var re2 = sort([9, 66, 45, 43]);
        console.log(re2);
    </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>利用函数封装判断是否是闰年</title>
    <script>
        //如果是闰年返回true 否则返回false
        function isRunYear(year) {
            var flag;
            if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
                flag = true;
            } else {
                flag = false;
            }
            return flag;
        }
        var re = isRunYear(2012);
        console.log(re);
    </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>函数之间的相互调用</title>
    <script>
        //1.案例一
        /* function fn1() {
            console.log(11);
            fn2();//在fn1里面调用了fn2函数
        }
        fn1();
        function fn2() {
            console.log(22);
        } */
        //2.案例二 fn1与fn2之间的相互调用
        function fn1() {
            console.log(111);
            fn2();
            console.log('fn1');
        }

        function fn2() {
            console.log(222);
            console.log('fn2');
        }
        fn1();

    </script>
</head>

<body>

</body>

</html>

      • 结果

         

    • 输出2月份天数

      • 案例

        <!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>输出年份的2月份天数</title>
    <script>
        function backDay() {
            var year = prompt('请你输入年份');
            if (isRunYear(year)) {//实参year
                alert('当前年份是闰年2月份有29天');
            } else {
                alert('当前年份是平年2月份有28天');
            }
        }
        backDay();
        //2.判断是否是闰年的函数
        function isRunYear(year) {//形参year
            var flag;
            if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
                flag = true;
            } else {
                flag = false;
            }
            return flag;
        }
    </script>
</head>

<body>

</body>

</html>

      • 结果

         

  • 函数的两种声明方式

    • 1.利用函数function关键字来自定义函数（命名函数）

    • 2.函数表达式（匿名函数）

      • 格式：var 变量名 = function（）{}；

      • 没有函数名

      • 函数表达式声明方式和变量差不多

      • 函数表达式也可以进行传递参数

      • 代码

        <!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>函数的两种生命方式</title>
    <script>
        //2.函数表达式 (匿名函数)
        //var 变量名 = function (aru) { };
        var fun = function (aru) {//fun是变量名不是函数名
            console.log(aru);
        }
        fun('多云');

    </script>
</head>

<body>

</body>

</html>

      • 结果

         

  • 作用域

    • JavaScript作用域

      • 就是代码名字在某个范围内起作用效果

      • 提高程序的可靠性，减少命名冲突

    • 全局作用域

      • 整个script标签或者一个单独的JS文件

    • 局部作用域

      • 在函数内部就是局部作用域  只在函数内部起效果和作用

      • 代码

        <!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 num = 10;
        //局部作用域
        function fn() {
            var num = 20;
            console.log(num);
        }
        fn();
    </script>
</head>

<body>

</body>

</html>

      • 结果

         

    • 变量作用域

      • 全局变量

        • 在全局作用域下的变量

        • 在代码任何位置都可以使用

        • 注意：在函数内部没有声明直接使用的变量也属于全局变量

      • 局部变量

        • 在局部作用域下

        • 在函数内部var声明的变量是局部变量

        • 函数的形参也是局部变量

      • 区别

        • 执行效率：全局变量只有浏览器关闭的时候才会销毁，比较占用资源；局部变量当程序执行完毕就会销毁，比较节约内存资源。

        • 代码

          <!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>变量作用域</title>
    <script>
        //1.全局变量  
        var num = 10;//num全局变量
        console.log(num);
        function fn() {
            console.log(num);
        }
        fn();
        //2.局部变量  函数内部变量
        function fun(aru) {
            var num1 = 10;//num1是局部变量 只能在函数内使用
            num2 = 20;//num2没有声明直接使用 也属于全局变量
        }
        fun();
        console.log(num1);//不能被调用
        console.log(num2);//注意 如果在函数内部没有声明，直接使用的变量也是全局变量

    </script>
</head>

<body>

</body>

</html>

        • 结果

           

    • JS没有块级作用域

      • 但是在es6新增了块级作用域

      • 块级作用域使用{}进行包含

      • 代码

        <!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>JS没有块级作用域</title>
    <script>

        if (3 > 5) {
            var num = 10;
        }
        console.log(num);//在块级作用域里面声明的变量 外面也可以使用 所以可以输出
    </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>作用域链</title>
    <script>
        var num = 10;
        function fn() {//外部函数
            var num = 20;
            function fun() {//内部函数
                console.log(num);//输出结果为20
            }
            fun();
        }
        fn();
    </script>
</head>

<body>

</body>

</html>

      • 结果

      • 案例1

        • 案例

          <!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>作用域链案例</title>
    <script>
        //案例1
        function f1() {//0级链
            var num = 123;//1级链
            function f2() {//1级链
                console.log(num);//2级链  输出1级链结果  123
            }
            f2();//1级链
        }
        var num = 456;//0级链
        f1();//0级链
        //案例2
        var a = 1;
        function fn1() {
            var a = 2;
            var b = '22';
            fn2();
            function fn2() {
                var a = 3;
                fn3();
                function fn3() {
                    var a = 4;
                    console.log(a);//输出结果为4
                    console.log(b);//输出结果为'2'
                }
            }
        }
        fn1();
    </script>
</head>

<body>

</body>

</html>

        • 结果 

           

    • JS预解析

      • JavaScript代码是由浏览器的JavaScript解析器来执行的

      •   解析器在运行JavaScript代码分为两步：预解析、代码执行

      • 预解析

        • JS引擎会把js里面所有的var 还有function提升到当前作用域的最前面

        • 变量预解析

          • 把所有的变量声明提升到当前作用域的最前面

          • 只提升声明，不提升赋值操作

        • 函数预解析

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

          • 代码

            <!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>预解析</title>
    <script>
        //1.
        //console.log(num);  输出结果报错

        //2.
        /* console.log(num); 输出结果为undefined
        var num = 10; */
        //2.相当于执行了以下代码
        /* var num;
        console.log(num);
        num = 10; */

        //3.
        /* fn();
        function fn() {
            console.log(11); 输出结果为11，正常输出
        } */
        //3.相当于
        /* function fn(){
            console.log(11);
        }
        fn(); */

        //4.
        /* fun();
        var fun = function () {
            console.log(22);  输出结果报错，
        } */
        //4.相当于以下代码
        /* var fun;
        fun();
        fun =function(){
            console.log(22);
        } */

        //5.预解析


    </script>
</head>

<body>

</body>

</html>

      • 代码执行：执行代码书写顺序从上往下执行

    • 预解析案例1

      • 案例

        <!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>预解析案例/title>
        <script>
            //案例1
            var num = 10;
            fun();
            function fun() {
                console.log(num);//输出结果为undefined
                var num = 20;
            }
            //相当执行了一下操作
            /* var num;
            function fun() {
                var num;
                console.log(num); 只有输出结果没有赋值
                num = 20;
            }
            num = 10;
            fun(); */

            //案例2
            var num = 10;
            function fn() {
                console.log(num);//输出结果为undefined
                var num = 20;
                console.log(num);//输出结果为20
            }
            fn();
            //相当于一下代码
            /* var num;
            function fn() {
                var num;
                console.log(num);//输出结果为undefined
                num = 20;
                console.log(num);//输出结果为20
            }
            num = 10;
            fn(); */
        </script>
</head>

<body>

</body>

</html>

  • JavaScript对象（object）

    • 对象是一个具体事物

    • JavaScript对象是一组无序的相关属性和方法的集合，所有事物都是对象，例如字符串、数值、数组、函数

    • 对象是由属性和方法来组成的

      • 属性

        • 事物的特征，在对象中用属性表示（常用名词）

      • 方法

        • 事物的行为，在对象中用方法来表示（常用动词）

    • 创建对象的三种方法

      • 利用字面量

        • 对象字面量：花括号包含了表达这个具体事物的属性和方法

        • 注意事项

          • 里面的属性和方法采取键值对 键 属性名： 属性值

          • 多个属性或者方法使用逗号隔开，最后一个不需要

          • 方法冒号后面是一个匿名函数

          • 使用对象：

            • 调用对象属性

              • 1. 对象名.属性名  如 obj.uname；

              • 2.对象名['属性名'] 如obj['age'];

            • 调用对象的方法

              • 对象名.方法名（）;

              •  代码

                <!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 = {
            uname: '张三',//采取键值对形式 属性名：属性值
            age: 18,//不同属性或者方法采用逗号隔开
            sex: '男',
            sayHi: function () {//function方法
                console.log('Hi~');
            }
        }
        console.log(obj.uname);//调用uname对象名 对象名.属性名
        console.log(obj.age);//调用age对象名
        obj.sayHi();//调用函数  对象.方法名()
    </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 num = 10;
        var obj = {
            age: 18,
            fn: function () {//这是方法  在对象里面

            }
        }
        function fn() {//这是函数

        }
        console.log(obj.age);
    </script>
</head>

<body>

</body>

</html>

        • 结果

           

      • 利用new Object

        • 语法：var 对象 = new Object

        • 对象名.属性 = 属性值;

        • 利用等号赋值的方法，添加对象属性和方法

        • 每个属性和方法之间用分号结束

        • 代码

          <!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.uname = '张三';
        obj.age = 18;
        obj.sex = '男';
        obj.sayHi = function () {
            console.log('Hi~');
        }
    </script>
</head>

<body>

</body>

</html>

      • 利用构造函数

 

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布