js 重装第七天-CSDN博客

本文链接：https://blog.csdn.net/qq_42507764/article/details/127911802

<!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>
</head>
<body>
    

    <script>
        // 写出 以下代码的 打印结果 并 写出原因
            console.log(num);  // undefined
            var num;
            console.log(num);  // undefined
            function fn() {
                var num;
                console.log(num);  // undefined
                num = 20;
                console.log(num);  // 20
            }
            num = 10;
            fn();
            console.log(num);  // 10

        

        // 写出 下面代码的 输出结果 并写出原因
            var a = '哈哈';
            console.log(!a+5*3);  // 15
            // false + 5 * 3
            // flase + 15
            // 0 + 15
            // 15



        // 写出 下面代码的 输出结果 并写出原因
            var b = null
            console.log(b*5-true+'55'-10);  // -165
            // null * 5 - true + '55' - 10
            // 0 - true + '55' - 10
            // 0 - 1 + '55' - 10
            // -1  + '55' - 10
            // '-155' - 10
            // -165



        // 写出 下面代码的 输出结果 并写出原因
            console.log(foo);  // function foo(){console.log("C");}
            var foo = "A";
            console.log(foo);  // "A"
            var foo = function () {
                console.log("B");
            }
            console.log(foo);  // function () {console.log("B");}
            foo();  // "B"
            function foo(){
                console.log("C");  
            }
            console.log(foo);  // function () {console.log("B");}
            foo();  // "B"



        // 写出 下面代码的 输出结果 并写出原因
            var num1 = 50;
            function fn1(num1){
                console.log(num1);  // 30
                var num2 = 70;
            }
            fn1(30);
            // console.log(num2);  // Error：num2 is not defined
            console.log(num1);  // 50
            function fn2(){
                console.log(num1)  // 50
                num1 = 10;
            }
            fn2(40);
            console.log(num1);  // 10






    </script>
</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>
</head>
<body>
    


    <script>
        // 求斐波那契数列的第6项
        // 斐波那契额数列：1  1  2  3  5  8  13  21 ......
        // 编写函数，可以通过 传入参数 求到任意项的值
        // 假如 传入 6   得到结果  第六项的值


        function fbnqsl(n){
            if(n==1 || n==2){
                return 1;
            }

            // 定义 a 和 b 变量 设定值为 1，为 第一项(前面的一项) 和 第二项(前面的第二项) 的值
            var a = 1;
            var b = 1;

            // 接收 第三项的 结果
            var c = 0;

            for(var i=3;i<=n;i++){
                // 计算 当前 得到的 第几项的结果
                c = a+b;  // 2

                // 为 计算下一项 做准备
                a = b;  // 将原本 进行相加的 第二项值 赋值给 a
                b = c;  // 将 计算出来的结果 赋值给 b

            }

            return c;
        }

        var num1 = fbnqsl(5);
        console.log(num1);

        var num2 = fbnqsl(8);
        console.log(num2);
    </script>
</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>
</head>
<body>
    


    <script>
        // 递归
            // 递归本质上是一种算法，是一种程序调用自身的编程技巧。
            // 递归在JS语言中的具体表现为：函数调用自身
            // 递归的特点：重复计算执行，和循环非常类似。所以递归也和循环一样，需要一个出口（停止条件）。

            // 递归不能代替循环
                // 虽然递归和循环很像，但是递归不可以代替循环。这就要从递归的缺点来说了。
                    // - 性能不如循环
                    // - 内存占用过高(非常致命)
                    // - 递归次数必须预期收敛

                    
        // 在 控制台打印 1-100 之间的整数
            // var d1 = new Date();
            // function fn1(n){
            //     if(n>10000){
            //         return;
            //     }

            //     console.log(n);

            //     return fn1(n+1);
            // }

            // fn1(1);  // fn1(2);
            //          // fn1(3);
            //          // ......
            // var d2 = new Date();
            // console.log(d2.getTime() - d1.getTime());  //  4267 --- 5339 ms



            // var d1 = new Date();
            // for(var i=1;i<=10000;i++){
            //     console.log(i);
            // }
            // var d2 = new Date();
            // console.log(d2.getTime() - d1.getTime());  // 169 -- 248 ms



    </script>
</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>
  </head>
  <body>
    <script>
      // 什么时候可以使用递归
          // - 操作简洁
          // - 当处理子问题与原始问题相同时，操作简单


      // - 求1-100整数之和

      // function sum1(n){
      //     if(n === 1){
      //         return 1;
      //     }

      //     return n+sum1(n-1);
      // }

      // var num1 = sum1(100);  // 100+sum1(100-1);
      //                             // 99+sum1(99-1);
      //                                 // 98+sum1(98-1);
      //                                     // 97+sum1(97-1);
      //                                         // 96+sum1(96-1);
      //                                             // ......
      //                                                 // 3+sum1(3-1);
      //                                                     // 2+sum1(2-1)
      //                                                         // 1
      // console.log(num1);  // 5050

      // var num2 = sum1(5);
      // console.log(num2);  // 15




      // // - 求10的阶乘

      // function sum2(n){
      //     if(n===1){
      //         return 1;
      //     }

      //     return n*sum2(n-1);
      // }

      // var num3 = sum2(10);
      // console.log(num3);  // 3628800



      // 通过 递归 求斐波那契数列的第6项
      // 斐波那契额数列：1  1  2  3  5  8  13  21 ......
      // 编写函数，可以通过 传入参数 求到任意项的值
      // 假如 传入 6   得到结果  第六项的值

      function emo(n){
           if(n===1 || n===2){
              return 1;
           }else{
            return  emo(n-1)+emo(n-2);;
           }      
      }

     console.log(emo(8)) 
    </script>
  </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>
</head>
<body>
    

    <script>
        // 数组 --- Array
            // 数组就是 一组 有序 数据的集合
                // - 数组就是在内存中开辟出一块连续的空间。 
                // - 数组也是一个变量，可以存储一连串的变量/值。  
                // - 数组的大小可以动态的调整，并且没有长度的限制。
                // - 数组可以存储任意类型的数据

        // 数组的创建
            // 构造函数方式创建 --- 调用js内置构造函数Array，但是在前面需要加上 new关键字
                // 创建一个空数组
                var arr1 = new Array();
                console.log(arr1);  //
                // 如果 传参为 一个数字 这个数字表示的是 数组的长度(数组中值的个数)，但是值为空
                var arr2 = new Array(5);
                console.log(arr2);
                // 如果 传参为 一个非数字，这个参数就是 数组中的 元素(值)
                var arr3 = new Array('hello');
                console.log(arr3);
                // 如果 传入多个参数，这多个参数就是都是 数组中的元素(值)
                var arr4 = new Array(12,45,78);
                console.log(arr4);


            // 字面量方式创建 --- 在js中 中括号就是代表数组，字面量创建就是通过中括号
                // 创建 空数组
                var narr1 = [];
                console.log(narr1);  // []
                // 创建 有值的 数组
                var narr2 = [3];
                console.log(narr2);  // [3]
                // 创建 有值的 数组
                var narr3 = [3,true,false,'hello',999];
                console.log(narr3);  // [3,true,false,'hello',999]



        // 数组 属于 引用数据类型(复杂数据类型、对象数据类型)
            console.log(typeof(narr1));  // 'object'
            console.log(typeof(arr2));  // 'object'
            


        // 引用数据类型(复杂数据类型、对象数据类型)
            // function
            // Array


    </script>
</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>
</head>
<body>
    

    <script>

        var arr1 = [false,'hello',666,'world',true,999,111];
        console.log(arr1);

        // 数组的长度
            // 表示数组中 值(元素)的个数
            // 语法：数组.length
            // 注：数组中最大的索引值 比 数组的长度 少1
                // 数组.length-1 就能得到 数组的最大索引值

            // 获取 数组的长度
            console.log(arr1.length);  // 7
            var num = arr1.length;
            console.log(num);  // 7

            // 设置 数组的长度
            // arr1.length = 20;
            // console.log(arr1);


        // 数组的索引(下标)
            // 数组的索引是对数组中的数据(元素)进行编号，从0开始，依次递增
            // 数组的索引 可以实现 对数组的元素进行  查(访问) 增(增加) 改(改变) 的操作
            // 语法：数组[索引]

            // 查(访问)
            var n1 = arr1[0];
            console.log(n1);  // false
            console.log(arr1[3]);  // 'world'

            // 增(增加)  --- 对数组中不存在的索引 赋值 就是给 数组增加元素(值)
            arr1[arr1.length] = 233;
            arr1[8] = 'abc';

            console.log(arr1);

            // 改(改变)  --- 对数组中存在的索引 赋值 就是给 数组改变值
            arr1[2] = 444;

            console.log(arr1);


        console.log(arr1.length);  // 9
    </script>
</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>
</head>
<body>
    

    <script>

        // 数组的遍历
            // 遍历： 所谓遍历，是指沿着某条搜索路线(索引)，
                    // 依次对集合(数组)中每个结点(数组元素)均做一次且仅做一次访问。
            // 所以数组的遍历就是快速对数组中每一个元素按照索引规律进行一次访问操作。


        var arr1 = [false,'hello',666,'world',true,999,111];
        console.log(arr1);

        // 使用 for、while 循环 实现对 数组的遍历
                 // i<=arr1.length-1
        for(var i=0;i<arr1.length;i++){
            console.log(arr1[i]);
        }


        // 在js中专门 新增了一种循环方式 用来实现对 数组或对象 的 遍历 --- for...in循环
        for(var k in arr1){
            // console.log(k);  // 此处的循环变量 表示的是 数组的 索引

            console.log(arr1[k]);  
        }





        // 挨个访问数组的成员 --- 比较麻烦
            // console.log(arr1[0]);
            // console.log(arr1[1]);
            // console.log(arr1[2]);
            // console.log(arr1[3]);
            // console.log(arr1[4]);
            // console.log(arr1[5]);
            // console.log(arr1[6]);
        




    </script>
</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>
</head>
<body>
    

    <script>
        // 二维数组 --- 数组的成员 还是 数组
            // 首先 js没有定义过二维数组的概念，但是 数组的成员 可以是 任意类型的数组
            // 所以数组的成员也可以是 数组，这样的话我们就可以实现 数组中包含数组，二维数组
            // 如果 一直 数组的成员是数组，它的成员还是数组 我们就形成了 多维数组


        var arr1 = [[1,2,3,4],[22,33,44],[99,8,77,6,5]];
        console.log(arr1);  // [[1,2,3,4],[22,33,44],[99,8,77,6,5]]
        console.log(arr1[0]);  // [1,2,3,4]
        console.log(arr1[0][1]);  // 2

        console.log(arr1.length);  // 3
        console.log(arr1[2].length);  // 5


        // 遍历 二维数组 --- 循环嵌套
        for(var i=0;i<arr1.length;i++){
            for(var j=0;j<arr1[i].length;j++){
                console.log(arr1[i][j]); 
            }
        }


        console.log('-----------------华丽的分割线--------------');

        // 如果 检测 一个值 是否是 数组
            // Array.isArray(值);
                // 返回值 为 true 表示 是数组
                // 返回值 为 false 表示 不是数组


        var arr2 = [[11,22,33,44],3,6,9,[12,13,14,15],66,[23,34,45]];
        console.log(arr2);

        console.log(Array.isArray(arr2));  // true
        console.log(Array.isArray(arr2[0]));  // true
        console.log(Array.isArray(arr2[1]));  // false

        for(var n=0;n<arr2.length;n++){

            if(Array.isArray(arr2[n])){
                for(var m=0;m<arr2[n].length;m++){
                    console.log(arr2[n][m]); 
                }
            }else{
                console.log(arr2[n]);
            }

            
        }


    </script>
</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>
</head>
<body>
    



    <script>

        


        // push()
            // 向数组末尾添加 一个 或 多个 数据
            // 此方法 会改变 原数组
            // 此方法的返回值是 数组添加数据后数组新的长度
        var arr1 = [11,22,false,'涛哥真帅',true,999];
        console.log(arr1);  // [11, 22, false, '涛哥真帅', true, 999]

        var a = arr1.push('hello','world',666);
        console.log(a);  // 9

        console.log(arr1);  // [11, 22, false, '涛哥真帅', true, 999, 'hello', 'hello', 'world', 666]

        console.log('-----------------华丽的分割线--------------');

        // pop()
            // 删除数组的 最后 一个 数据
            // 此方法 会改变 原数组
            // 此方法的返回值是 被删除的数据
        var arr2 = [22,33,44,55,66];
        console.log(arr2);  // [22, 33, 44, 55, 66]

        var b = arr2.pop();
        console.log(b);  // 66

        console.log(arr2);  // [22, 33, 44, 55]

        var c = arr2.pop();  
        console.log(c);  // 55
        
        console.log(arr2);  // [22, 33, 44]

        console.log('-----------------华丽的分割线--------------');

        // unshift()
            // 向数组的开头添加一个或多个数据
            // 此方法 会改变 原数组
            // 此方法的返回值是 数组添加数据后数组新的长度

        var arr3 = ['aa','bb','cc','dd','ee'];
        console.log(arr3);  // ['aa', 'bb', 'cc', 'dd', 'ee']

        var d = arr3.unshift(22,55);
        console.log(d);  // 7

        console.log(arr3);  // [22, 55, 'aa', 'bb', 'cc', 'dd', 'ee']

        console.log('-----------------华丽的分割线--------------');

        // shift()
            // 删除数组的 第一个 数据
            // 此方法 会改变 原数组
            // 此方法的返回值是 被删除的数据

        var arr4 = [99,77,55,33,11];
        console.log(arr4);  // [99, 77, 55, 33, 11]

        var e = arr4.shift();
        console.log(e);  // 99

        console.log(arr4);  // [77, 55, 33, 11]
    </script>
</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>
</head>
<body>
    




    <script>

        // sort()
            // 默认按字符编码的顺序排列，非string类型会自动转换为string，可自定义比较规则
            // 此方法 会改变 原数组
            // 此方法的返回值是 排序后的数组

            var arr1 = [56,78,4,100,23,53,17,77,91];
            console.log(arr1);  // [56, 78, 4, 100, 23, 53, 17, 77, 91]
            var a = arr1.sort();
            console.log(a);  // [100, 17, 23, 4, 53, 56, 77, 78, 91]
            console.log(arr1);  // [100, 17, 23, 4, 53, 56, 77, 78, 91]


            var arr2 = [56,78,4,100,23,53,17,77,91];
            console.log(arr2);  // [56, 78, 4, 100, 23, 53, 17, 77, 91]
            // 自定义规则 从小到大排序
                // 给 sort方法 传入一个函数作为实参，这个函数定义两个形参
                // 函数内部 return 第一个形参-第二个形参
            var b = arr2.sort(function(a,b){
                return a-b;
            });
            console.log(b);  // [4, 17, 23, 53, 56, 77, 78, 91, 100]
            console.log(arr2);  // [4, 17, 23, 53, 56, 77, 78, 91, 100]


            var arr3 = [56,78,4,100,23,53,17,77,91];
            console.log(arr3);  // [56, 78, 4, 100, 23, 53, 17, 77, 91]
            // 自定义规则 从大到小排序
                // 给 sort方法 传入一个函数作为实参，这个函数定义两个形参
                // 函数内部 return 第二个形参-第一个形参
            var c = arr3.sort(function(a,b){
                return b-a;
            });
            console.log(c);  // [100, 91, 78, 77, 56, 53, 23, 17, 4]
            console.log(arr3);  // [100, 91, 78, 77, 56, 53, 23, 17, 4]

        console.log('-----------------华丽的分割线--------------');

        // reverse()
            // 将数组元素反转排列
            // 此方法 会改变 原数组
            // 此方法的返回值是 反转后的数组

        var arr4 = [1,2,3,4,5,6,7,8,9];
        console.log(arr4);  // [1, 2, 3, 4, 5, 6, 7, 8, 9]

        var d = arr4.reverse();
        console.log(d);  // [9, 8, 7, 6, 5, 4, 3, 2, 1]

        console.log(arr4);  // [9, 8, 7, 6, 5, 4, 3, 2, 1]
    </script>
</body>
</html>