JS学习641~657(arguments+函数+作用域+预解析）

最新推荐文章于 2024-06-13 10:05:02 发布

前进的北极熊

最新推荐文章于 2024-06-13 10:05:02 发布

阅读量184

点赞数

分类专栏： JavaScript 文章标签： javascript 学习前端

本文链接：https://blog.csdn.net/m0_57809042/article/details/126992946

版权

JavaScript 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

1 arguments的使用

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

arguments展示形式是一个伪数组,因此可以进行遍历。伪数组具有以下特点:

具有length属性
按索引方式储存数据
不具有数组的push,pop等方法

<!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>
        // arguments的使用 只有函数才有 arguments对象 而且是每个函数都内置好了这个arguments
        function fn() {
            console.log(arguments); // 里面存储了所有传递过来的实参
            console.log(arguments.length);
            console.log(arguments[2]);
            // 我们可以按照数组的方式遍历arguments
            for (var i = 0; i < arguments; i ++ ) {
                console.log(arguments[i]);

            }
        }
        fn(1, 2, 3);
        fn(1, 2, 3, 4, 5);
        // 伪数组 并不是真正意义上的数组
        // 1. 具有数组的length 属性
        // 2. 按照索引的方式进行存储的
        // 3, 它没有真正数组的一些方法 pop() push()等等
    </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 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(1, 2, 3));
        console.log(getMax(1, 2, 3, 4, 5));
        console.log(getMax(11, 2, 3, 45, 100, 65));
    </script>
</head>
<body>
    
</body>
</html>

2 函数案例

案例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>Document</title>
    <script>
        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);
        var arr2 = reverse(['red', 'pink', 'blue']);
        console.log(arr2);
    </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>Document</title>
    <script>
        function sort(arr) {
            for (var i = 0; i < arr.length - 1; i ++ ) {
                for (var j = 0; j < arr.length - i - i; 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([1, 4, 2, 9]);
        console.log(arr1);
        var arr2 = sort([11, 7, 22, 999]);
        console.log(arr2);
    </script>
</head>
<body>
    
</body>
</html>

案例3:判断闰年

<!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 isRunYear(year) {
            // 如果是闰年 返回false
            var flag = false;
            if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0 ) {
                flag = true;
            }
            return flag;
        }
        console.log(isRunYear(2000));
        console.log(isRunYear(1999));
    </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 fn1() {
            console.log(11);
            fn2();  // 在fn1函数里面调用了 fn2 函数
            console.log('fn1');
        }
        function fn2() {
            console.log(22);
            console.log('fn2');
        }
        fn1();
    </script>
</head>
<body>
    
</body>
</html>

案例4:用户输入年份,输出当前年份2月份的天数

如果是闰年,则2月份是29天,如果是平年,则2月份是28天

<!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 isRunYear(year) {
            // 如果是闰年 返回false
            var flag = false;
            if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0 ) {
                flag = true;
            }
            return flag;
        }

        function backDay() {
            var year = prompt('请您输入年份');
            if (isRunYear(year)) {  // 调用函数需要加小括号
                alert('当前年份是闰年2月份有29天');
            } else {
                alert('当前年份是平年2月份有28天');
            }
        }
        backDay();
    </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>Document</title>
    <script>
        // 函数的2种声明方式
        // 1. 利用函数关键字自定义函数(命名函数)
        function fn() {

        }
        fn();
        // 2. 函数表达式(匿名函数)
        // var 变量名 = function() {};
        var fun = function(aru) {
            console.log('我是函数表达式');
            console.log(aru);
        }
        fun('yaya');
        // (1) fun是变量名 不是函数名
        // (2) 函数表达式声明方式跟声明变量差不多,只不过变量里面存的是值 而函数表达式里面存的是函数
        // (3) 函数表达式也可以进行传递参数
    </script>
</head>
<body>
    
</body>
</html>

3 作用域

3.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>Document</title>
    <script>
        // 1. JavaScript作用域: 就是代码名字(变量)在某个范围内起作用和效果 目的是为了提高程序的可靠性 更重要的是减少命名冲突
        // 2. js的作用域(es6)之前: 全局作用域  局部作用域
        // 3. 全局作用域:整个script标签 或者是一个单独的js文件
        var num = 10;
        console.log(num);
        // 4. 局部作用域(函数作用域) 在函数内部就是局部作用域 这个代码的名字只在函数内部起效果和作用
        function fn() {
            // 局部作用域
            var num = 20;
            console.log(num);
        }
        fn();
    </script>
</head>
<body>
    
</body>
</html>

3.2 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>
        // js中没有块级作用域 js的作用域: 全局作用域 局部作用域 现阶段我们js没有块级作用域
        // 在es6时新增的块级作用域
        // 块级作用域 {} if {}  for {}
        // if (xx) {
        //     int num = 10;
        // }
        // 外面的是不能调用num的
        if ( 3 < 5) {
            var num = 10;
        }
        console.log(num);
    </script>
</head>
<body>
    
</body>
</html>

4 变量的作用域

4.1 变量作用域的分类

在JavaScript中,根据作用域的不同,可以分为两种:

全局变量
局部变量

4.2 全局变量

在全局作用域下声明的变量叫做全局变量(在函数外部定义的变量)。

全局变量在代码的任何位置都可以使用
在全局作用域下var声明的变量是全局变量
特殊情况下,在函数内不使用var声明的变量也是全局变量(不建议使用)

4.3 局部变量

在局部作用域下声明的变量叫做局部变量(在函数内部定义的变量)

局部变量只能在该函数内部使用
在函数内部var声明的变量是局部变量
函数的形参实际上就是局部变量

4.4 全局变量和局部变量的区别

全局变量:在任何一个地方都可以使用,只有在浏览器关闭时才会被销毁,因此比较占内存
局部变量:只在函数内部使用,当其所在的代码块被执行时,会被初始化;当代码块运行结束后,就会被销毁,因此更节省内存空间

<!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>
        // 变量的作用域: 根据作用域的不同我么变量分为两种
        // 1. 全局变量: 在全局作用域下的变量 在全局下都可以使用
        // 注意 如果在函数内部 没有声明直接赋值的变量也属于全局变量
        var num = 10; // num 就是一个全局变量
        console.log(num);
        function fn() {
            console.log(num);
        }
        fn();
        // 2. 全局变量 在局部作用域下的变量  后者在函数内部的变量就是 局部变量
        // 注意: 函数的形参也可以看作是局部变量
        function fun() {
            var num1 = 10; // num1就是局部变量 只能在函数内部使用
            num2 = 20;
        }
        fun();
        // console.log(num1);
        console.log(num2);
        // 3. 从执行效率来看全局变量和局部变量
        // (1) 全局变量只有浏览器关闭的时候才会销毁,比较占内存资源
        // (2) 局部变量 当我们程序执行完毕就会销毁,比较节约内存资源
    </script>
</head>
<body>
    
</body>
</html>

5 作用域链

只要是代码,就至少有一个作用域
写在函数内部的局部作用域
如果函数中还有函数,那么在这个作用域中就又可以诞生一个作用域
根据在内部函数可以访问外部函数变量的这种机制,用链式查找决定哪些数据能被内部函数访问，就称作作用域链

<!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;

            function fun() {  // 内部函数
                console.log(num);
            }
            
            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>Document</title>
    <script>
        // 案例1:结果是几?   结果是123 
        function f1() {
            var num = 123;

            function f2() {
                console.log(num); // 站在目标出发,一层一层的往外查找
            }
            f2();
        }
        var num = 445;
        f1();
        // 案例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); // a的值? 4
                    console.log(b); // b的值? '22'
                }
            }
        }
        fn1();
    </script>
</head>
<body>
    
</body>
</html>

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>
        // 1问
        // console.log(num);


        // 2问
        console.log(num);  // undefined 坑1
        var num = 10;
        // 相当于执行了以下代码
        // var num;
        // console.log(num);
        // num = 10;

        // 3问
        fn();
        function fn() {
            console.log(11);
        }

        // 4问
        fun(); // 报错 坑2
        var fun = function() {
            console.log(22);
        }
        // 函数表达式调用必须写在函数表达式的下面
        // 相当于执行了以下代码
        // var fun;
        // fun();
        // fun = function() {
        //     console.log(22);
        // }

        
        // 1. 我们js引擎运行js分为两步: 预解析 代码执行
        // (1) 预解析 js引擎会把js里面所有的 var 还有function提升到当前作用域的最前面
        // (2) 代码执行 按照代码的顺序从上往下执行
        // 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>
        // 预解析案例
        // 案例1
        var num = 10;
        fun();

        function fun() {
            console.log(num);
            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);
            var num = 20;
            console.log(num);
        }
        fn();
        // 相当于以下代码:
        // var num;
        // function fn() {
        //     var num;
        //     console.log(num);
        //     num = 20;
        //     console.log(num);
        // }
        // num = 10;
        // fn();

        // 案例3
        var a = 18;
        f1();

        function f1() {
            var b = 9;
            console.log(a);
            console.log(b);
            var a = '123';
        }
        // 相当于以下代码:
        // var a;
        // function f1() {
        //     var b;
        //     var a;
        //     b = 9;
        //     console.log(a);
        //     console.log(b);
        //     a = '123';
        // }
        // a = 18;
        // f1();

        // 案例4
        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);
        }
        // 最后输出:  9 9 9 9 9 报错
        // 相当于以下代码:
        // function f1() {
        //     var a;
        //     a = b = c = 9;
        //     // 相当于 var a = 9; b = 9; c = 9; b 和 c直接赋值 没有var声明 当全局变量看
        //     // 集体声明 var a = 9, b = 9, c = 9
        //     console.log(a);
        //     console.log(b);
        //     console.log(c);
        // }
        // f1();
        // console.log(c);
        // console.log(b);
        // console.log(a);
    </script>
</head>
<body>
    
</body>
</html>

前进的北极熊

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS学习641~657(arguments+函数+作用域+预解析）

当我们不确定有多少个参数传递的时候,可以用来获取。在JavaScript中,arguments实际上它是当前函数的一个。所有函数都内置了一个arguments对象,arguments对象中。,因此可以进行遍历。伪数组具有以下特点:案例:利用函数求任意个数的最大值2 函数案例案例1:利用函数封装方式,翻转任意一个数组案例2:利用函数封装方式,对数组排序----冒泡排序案例3:判断闰年函数可以调用另外一个函数因为每个函数都是独立的代码块,用于完成特殊任务,因此经常会用到函数相互调用的情况。
复制链接

扫一扫