05-javaScript(代码)-CSDN博客

<script>
        // arguments 的使用  只有函数才有 arguments对象  而且是每个函数都内置好了这个arguments
        function fn() {
            // console.log(arguments); // 里面存储了所有传递过来的实参  arguments = [1,2,3]
            // console.log(arguments.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);
        // 伪数组 并不是真正意义上的数组
        // 1. 具有数组的 length 属性
        // 2. 按照索引的方式进行存储的
        // 3. 它没有真正数组的一些方法 pop()  push() 等等
    </script>

02-使用函数求任意个数的数组的最大值

<script>
        // 利用函数求任意个数的最大值
        function getMax() { // arguments = [1,2,3]
            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, 34, 444, 5, 100));
    </script>

03-使用函数翻转

<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, 5, 6]);
        console.log(arr1);
        var arr2 = reverse(['red', 'green', 'blue']);
        console.log(arr2);
    </script>

04-利用函数冒泡排序

<script>
        // 利用函数冒泡排序 sort 排序
        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([11, 44, 22, 99]);
        console.log(arr1);
        var arr2 = sort([11, 7, 22, 999]);
        console.log(arr2);
    </script>

05-利用函数判断闰年

 <script>
        // 利用函数判断闰年
        function isRunYear(year) {
            // 如果是闰年我们返回 true  否则 返回 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>

06-函数的相互调用

<script>
        // 函数是可以相互调用的
        // function fn1() {
        //     console.log(11);
        //     fn2(); // 在fn1 函数里面调用了 fn2 函数
        // }
        // fn1();

        // function fn2() {
        //     console.log(22);

        // }

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

        function fn2() {
            console.log(222);
            console.log('fn2');
        }
        fn1();
    </script>

07-输入指定年份的2月份天数

<script>
        // 用户输入年份，输出当前年份2月份的天数
        function backDay() {
            var year = prompt('请您输入年份:');
            if (isRunYear(year)) { // 调用函数需要加小括号
                alert('当前年份是闰年2月份有29天');
            } else {
                alert('当前年份是平年2月份有28天');
            }
        }
        backDay();


        // 判断是否为闰年的函数
        function isRunYear(year) {
            // 如果是闰年我们返回 true  否则 返回 false 
            var flag = false;
            if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
                flag = true;
            }
            return flag;
        }
    </script>

08-函数的两种声明方式

    <script>
        // 函数的2中声明方式
        // 1. 利用函数关键字自定义函数(命名函数)
        function fn() {

        }
        fn();
        // 2. 函数表达式(匿名函数) 
        // var 变量名 = function() {};
        var fun = function(aru) {
            console.log('我是函数表达式');
            console.log(aru);

        }
        fun('你好呀');
        // (1) fun是变量名 不是函数名  
        // (2) 函数表达式声明方式跟声明变量差不多，只不过变量里面存的是值 而 函数表达式里面存的是函数
        // (3) 函数表达式也可以进行传递参数
    </script>

09-JavaScript的作用域

 <script>
        // 1.JavaScript作用域 ： 就是代码名字（变量）在某个范围内起作用和效果 目的是为了提高程序的可靠性更重要的是减少命名冲突
        // 2. js的作用域（es6）之前 ： 全局作用域   局部作用域 
        // 3. 全局作用域： 整个script标签 或者是一个单独的js文件
        var num = 10;
        var num = 30;
        console.log(num);

        // 4. 局部作用域（函数作用域） 在函数内部就是局部作用域 这个代码的名字只在函数内部起效果和作用
        function fn() {
            // 局部作用域
            var num = 20;
            console.log(num);

        }
        fn();
    </script>

10-变量的作用域

 <script>
        // 变量的作用域： 根据作用域的不同我们变量分为全局变量和局部变量
        // 1. 全局变量： 在全局作用域下的变量 在全局下都可以使用
        // 注意 如果在函数内部 没有声明直接赋值的变量也属于全局变量
        var num = 10; // num就是一个全局变量
        console.log(num);

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

        }
        fn();
        // console.log(aru);

        // 2. 局部变量   在局部作用域下的变量   后者在函数内部的变量就是 局部变量
        // 注意： 函数的形参也可以看做是局部变量
        function fun(aru) {
            var num1 = 10; // num1就是局部变量 只能在函数内部使用
            num2 = 20;
        }
        fun();
        // console.log(num1);
        // console.log(num2);
        // 3. 从执行效率来看全局变量和局部变量
        // (1) 全局变量只有浏览器关闭的时候才会销毁，比较占内存资源
        // (2) 局部变量 当我们程序执行完毕就会销毁， 比较节约内存资源
    </script>

11-JavaScript没有块级作用域

<script>
        // js中没有块级作用域  js的作用域： 全局作用域  局部作用域  现阶段我们js 没有 块级作用域
        // 我们js 也是在 es6 的时候新增的块级作用域
        // 块级作用域 {}   if {}  for {}
        // java 
        // if(xx) {
        //     int num = 10;
        // }
        // 外面的是不能调用num的
        if (3 < 5) {
            var num = 10;
        }
        console.log(num);
    </script>

12-作用域链

<script>
        // 作用域链  ： 内部函数访问外部函数的变量，采取的是链式查找的方式来决定取那个值 这种结构我们称为作用域链   就近原则
        var num = 10;

        function fn() { // 外部函数
            var num = 20;

            function fun() { // 内部函数
                console.log(num);

            }
            fun();
        }
        fn();
    </script>

13-作用域链案例

<script>
        // 案例1 ： 结果是几？
        function f1() {
            var num = 123;

            function f2() {
                var num = 0;
                console.log(num); // 站在目标出发，一层一层的往外查找
            }
            f2();
        }
        var num = 456;
        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的值 ?
                    console.log(b); //b的值 ?
                }
            }
        }
        fn1();
    </script>

14-预解析

<script>
        // 1问  
        console.log(num);



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



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




        // 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>

15-预解析案例

<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);
        }
        // 以下代码
        // 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>

16-利用对象字面量创建对象

<script>
        // 1.利用对象字面量创建对象 {}
        // var obj = {};  // 创建了一个空的对象 
        var obj = {
                uname: '马超',
                age: 18,
                sex: '男',
                sayHi: function() {
                    console.log('hi~');

                }
            }
            // (1) 里面的属性或者方法我们采取键值对的形式  键 属性名 ： 值  属性值 
            // (2) 多个属性或者方法中间用逗号隔开的
            // (3) 方法冒号后面跟的是一个匿名函数
            // 2. 使用对象
            // (1). 调用对象的属性 我们采取 对象名.属性名 . 我们理解为 的
        console.log(obj.uname);
        // (2). 调用属性还有一种方法 对象名['属性名']
        console.log(obj['age']);
        // (3) 调用对象的方法 sayHi   对象名.方法名() 千万别忘记添加小括号
        obj.sayHi();
    </script>

17-变量属性函数方法区别

<script>
        // 变量、属性、函数、方法的区别
        // 1.变量和属性的相同点 他们都是用来存储数据的 
        var num = 10;
        var obj = {
            age: 18,
            fn: function() {

            }
        }

        function fn() {

        }
        console.log(obj.age);
        // console.log(age);

        // 变量 单独声明并赋值  使用的时候直接写变量名 单独存在
        // 属性 在对象里面的不需要声明的 使用的时候必须是 对象.属性
        // 2. 函数和方法的相同点 都是实现某种功能  做某件事
        // 函数是单独声明 并且调用的 函数名() 单独存在的
        // 方法 在对象里面 调用的时候 对象.方法()
    </script>

18-利用new Object创建对象

<script>
        // 利用 new Object 创建对象
        var obj = new Object(); // 创建了一个空的对象
        obj.uname = '大帅哥';
        obj.age = 18;
        obj.sex = '男';
        obj.sayHi = function() {
                console.log('hi~');

            }
            // (1) 我们是利用 等号 = 赋值的方法 添加对象的属性和方法
            // (2) 每个属性和方法之间用 分号结束
        console.log(obj.uname);
        console.log(obj['sex']);
        obj.sayHi();
    </script>

19-我们为什么需要构造函数

<script>
        // 我们为什么需要使用构造函数
        // 就是因我们前面两种创建对象的方式一次只能创建一个对象
        var ldh = {
            uname: '大帅哥',
            age: 55,
            sing: function() {
                console.log('大美女');

            }
        }
        var zxy = {
                uname: '赵云',
                age: 58,
                sing: function() {
                    console.log('张飞');

                }
            }
            // 因为我们一次创建一个对象，里面很多的属性和方法是大量相同的 我们只能复制 
            // 因此我们可以利用函数的方法 重复这些相同的代码 我们就把这个函数称为 构造函数
            // 又因为这个函数不一样，里面封装的不是普通代码，而是 对象  
            // 构造函数 就是把我们对象里面一些相同的属性和方法抽象出来封装到函数里面
    </script>

20-利用构造函数创建对象

<script>
        // 利用构造函数创建对象
        // 我们需要创建四大天王的对象  相同的属性： 名字 年龄 性别  相同的方法： 唱歌
        // 构造函数的语法格式
        // function 构造函数名() {
        //     this.属性 = 值;
        //     this.方法 = function() {}
        // }
        // new 构造函数名();
        function Star(uname, age, sex) {
            this.name = uname;
            this.age = age;
            this.sex = sex;
            this.sing = function(sang) {
                console.log(sang);

            }
        }
        var ldh = new Star('刘德华', 18, '男'); // 调用函数返回的是一个对象
        // console.log(typeof ldh);
        console.log(ldh.name);
        console.log(ldh['sex']);
        ldh.sing('冰雨');
        var zxy = new Star('张学友', 19, '男');
        console.log(zxy.name);
        console.log(zxy.age);
        zxy.sing('李香兰')



        // 1. 构造函数名字首字母要大写
        // 2. 我们构造函数不需要return 就可以返回结果
        // 3. 我们调用构造函数 必须使用 new
        // 4. 我们只要new Star() 调用函数就创建一个对象 ldh  {}
        // 5. 我们的属性和方法前面必须添加 this
    </script>

21-构造函数和对象

<script>
        // 构造函数和对象
        // 1. 构造函数  明星 泛指的某一大类  它类似于 java 语言里面的  类(class)
        function Star(uname, age, sex) {
            this.name = uname;
            this.age = age;
            this.sex = sex;
            this.sing = function(sang) {
                console.log(sang);

            }
        }
        // 2. 对象 特指 是一个具体的事物 刘德华 ==  {name: "刘德华", age: 18, sex: "男", sing: ƒ}
        var ldh = new Star('刘德华', 18, '男'); // 调用函数返回的是一个对象
        console.log(ldh);
        // 3. 我们利用构造函数创建对象的过程我们也称为对象的实例化
    </script>

22-new关键字执行过程

<script>
        // new关键字执行过程
        // 1. new 构造函数可以在内存中创建了一个空的对象 
        // 2. this 就会指向刚才创建的空对象
        // 3. 执行构造函数里面的代码 给这个空对象添加属性和方法
        // 4. 返回这个对象
        function Star(uname, age, sex) {
            this.name = uname;
            this.age = age;
            this.sex = sex;
            this.sing = function(sang) {
                console.log(sang);

            }
        }
        var ldh = new Star('刘德华', 18, '男');
    </script>

23-遍历对象

<script>
        // 遍历对象 
        var obj = {
                name: '老师',
                age: 18,
                sex: '男',
                fn: function() {}
            }
            // console.log(obj.name);
            // console.log(obj.age);
            // console.log(obj.sex);
            // for in 遍历我们的对象
            // for (变量 in 对象) {

        // }
        for (var k in obj) {
            console.log(k); // k 变量 输出  得到的是 属性名
            console.log(obj[k]); // obj[k] 得到是 属性值

        }
        // 我们使用 for in 里面的变量 我们喜欢写 k  或者  key
    </script>

24-Number

 <script>

        var num = 3.1415926;
        var num2 = new Number(20);

        // console.log(num2);
        // console.log(typeof num2);
        console.log(num.toFixed(2));            // 字符串

        var num3 = 23;
        console.log(num3.toString(2));          //  1010    0*2^0 + 1*2^1 + 0*2^2 + 1*2^3

        var num4 = 0b1010;                  //  2进制
        var num5 = 0o10;                    //  8进制
        var num6 = 0x10;                    //  16进制


        console.log(num5.toString(10));     

        console.log(num3.toLocaleString("ar-EG"));

    </script>

25-Date

 <script>

        // 日期对象
        var date = new Date();
        console.log(date);                  //  当前时间
        console.dir(date);


        // 获取目标时间
        var furture = new Date("2024-9-17 12:30:30");
        console.log(furture);

        console.log("----------------------------------------------");

        //    当前时间：2024年7月24日 周三 16:20:08 

        // 获取年  getFullyear()
        var year = date.getFullYear();
        console.log(year);


        // 获取月  getMonth()+1
        var month = date.getMonth() + 1;
        console.log(month);


        // 获取日  getDate()
        var day = date.getDate();
        console.log(day);

        // 获取星期    getDay()
        var week = date.getDay();
        console.log(week);
        var weeks = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
        console.log(weeks[week]);


        // 获取时  
        var hours = date.getHours();
        console.log(hours);

        // 获取分
        var minutes = date.getMinutes();
        console.log(minutes);

        // 获取秒
        var seconds = date.getSeconds();
        console.log(seconds);


        function fun(a) {
            if (a < 10) {
                a = "0" + a;
            }
            return a;
        }

        // 写入到文档
        document.write("当前时间为：" + year + "年" + month + "月" + day + "日  " + weeks[week] + "  " + fun(hours) + ":" + fun(minutes) + ":" + fun(seconds));

    </script>

27-时间戳

<script>

        // 实例化日期对象
        var date = new Date();

        // 毫秒数
        console.log(date.valueOf());
        console.log(date.getTime());

        // 倒计时

        // 中秋节放假到计时
        var furture = new Date("2024-9-17");
        console.log(furture.valueOf());

        var time = furture.valueOf() - date.valueOf();


        // 1s=1000ms
        var s = parseInt(time / 1000 % 60);
        console.log(s);

        var min = parseInt(time / 1000 / 60 % 60);
        console.log(min);

        var h = parseInt(time / 1000 / 60 / 60 % 24);
        console.log(h);

        var d = parseInt(time / 1000 / 60 / 60 / 24);
        console.log(d);

        document.write("距离中秋假期还剩：" + d + "天" + h + "小时" + min + "分钟", s + "秒");
    </script>

28-Math

<script>

        // Math.PI          内置对象

        // 圆周率
        console.log(Math.PI);

        // 最值
        console.log(Math.max(1, 2, 3, 4, 5, 6, 7, 8, 9));
        console.log(Math.min(1, 2, 3, 4, 5, 6, 7, 8, 9));

        // 绝对值
        console.log(Math.abs(-10));

        // 次幂
        console.log(Math.pow(2, 3));
        console.log(2 ** 3);

        // 向上取整
        console.log(Math.ceil(3.14));

        // 向下取整
        console.log(Math.floor(-3.14));

        // 四舍五入
        console.log(Math.round(3.66));

        console.log("-----------------------------------------------------");

        // 取随机数         
        // [0,10)
        console.log(Math.floor(Math.random() * 11));

        // Math.floor(Math.random() * (max - min + 1) + min);
        // [50,100)
        console.log(Math.floor(Math.random() * (100 - 50 + 1) + 50));
    </script>

29-猜数字

<script>
        // [1,100)
        // var num = Math.floor(Math.random() * 100 + 1);
        // console.log(num);
        // document.write(num);

        // var user = prompt("请输入数字");
        // 假设一次就能猜中
        // var flag = false;

        // do {
        //     if (user > num) {
        //         user = prompt("猜大了，请重新输入");
        //         // 没有猜对接着猜，循环需要继续
        //         flag = true;
        //     } else if (user < num) {
        //         user = prompt("猜小了，请重新输入");
        //         flag = true;
        //     } else {
        //         alert("猜对了")
        //         flag = false;
        //     }
        // } while (flag);


        // [1,100)
        var num = Math.floor(Math.random() * 100 + 1);
        console.log(num);
        document.write(num);

        var user = prompt("请输入数字");
        while (true) {
            if (user > num) {
                user = prompt("猜大了，请重新输入");
            } else if (user < num) {
                user = prompt("猜小了，请重新输入");
            } else {
                alert("猜对了");
                break;
            }
        }
    </script>

30- 全局变量

<script>

        // window
        // window.alert();
        // alert();

        // 掌握已学的知识即可

        console.log("1+2");
        console.log(eval("1+2"));

    </script>

31-数据类型

 <script>

        //数据类型
        // 1.基本数据类型
        // Number  String      Boolean     undefined       null
        // 2.引用数据类型
        // Object  function  Array  Math  Date


        var arr = [1, 2, 3, 4, 5];
        console.log(arr);

        // 删除
        delete arr[3];
        console.log(arr);

        var obj = {
            name: "大美女",
            age: 29
        }
        delete obj.name;
        console.log(obj);
    </script>

32-instanceof

 <script>

        // 检测数据类型的方法
        // typeof  检测基本数据类型

        var obj = [];
        console.log(typeof obj);

        var arr = [];
        console.log(typeof arr);

        var date = new Date();
        console.log(typeof date);

        // instanceof  适用于引用数据类型
        // 需要程序员明确的确定是否属于某种数据类型

        console.log(arr instanceof Array);
        console.log(date instanceof Date);
        console.log(arr instanceof Date);

        // 万物皆对象
        console.log(arr instanceof Object);
    </script>