前端之JS篇(六)——对象&内置对象&字符串对象

最新推荐文章于 2023-11-12 20:44:28 发布
最新推荐文章于 2023-11-12 20:44:28 发布
阅读量628 收藏
点赞数
分类专栏： 前端 文章标签： javascript 前端 vscode
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_57021623/article/details/127163232
版权

1.对象

1.1 什么是对象

现实生活中，万物皆对象，对象是一个具体的事物，看得见摸得着的实物。例如：一本书、一辆车、一个人可以是"对象"，一个数据库、一张网页、一个远程服务器的连接也可以是"对象"。

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

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

属性：事物的特征，在对象中用属性来表示(常用名词)

方法：事物的行为，在对象中用方法来表示(常用动词)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UMDL5xjP-1664871298005)(Typora_image/208.png)]

1.2 为什么需要对象

保存一个值时，可以使用变量，保存多个值(一组值)时，可以使用数组。如果要保存一个人的完整信息呢？

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WVm3FwZy-1664871298007)(Typora_image/209.png)]

1.3 创建对象的三种方式

在JavaScript中，现阶段我们可以采用三种方式创建对象(object):

利用字面量创建对象

利用 new Object 创建对象

利用构造函数创建对象

1.3.1 利用字面量创建对象(方式一)

对象字面量：就是花括号{} 里面包含了表达这个具体事物(对象)的属性和方法。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OHF4iJnS-1664871298008)(Typora_image/212.png)]

新建.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 = {}      // 创建了一个空对象
        var obj = {
            // 添加属性
            _name:'张三',
            age: 18,
            sex:'男',
            // 添加方法
            sayHi: function() {
                console.log('hi~');
            }
        }
        /* 
        注意点：
        1.里面的属性或者方法我们采用键值对的形式  键  属性名; 值   属性值
        2.多个属性或者方法中间用逗号隔开
        3.方法冒号后面跟的是一个匿名函数
        4.使用对象
            (1) 调用对象的属性   我们采取对象名.属性名  我们理解为的console.log(obj.uname); 
            (2) 调用属性还有方法二，对象名['属性名']
            (3) 调用对象的方法sayHi  对象名.方法名()
        */
       console.log(obj._name);                // 张三
       console.log(obj['age']);               // 18
       obj.sayHi();
    </script>
</head>
<body>
    
</body>
</html>

效果如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-c471ZYCV-1664871298011)(Typora_image/210.png)]

举例：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OYOuikJy-1664871298012)(Typora_image/211.png)]

【提醒】 狗不是一个对象，它是一个泛指；名叫可可的狗才是一个对象，它是一个特指

<script>
          var dog = {
            dName: '可可',
            type: '阿拉斯加犬',
            age: '5岁',
            color: '棕红色',
            bark: function() {
              console.log('汪汪叫');
            },
            showFilm: function() {
              console.log('演电影');
            }
          }
<script>

1.3.2 变量属性函数方法区别

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dJGe2b7m-1664871298015)(Typora_image/213.png)]

新建.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;
        var obj = {
            age:18,
            // 方法(放在对象里面)
            fn: function() {

            }
        }
        // 函数(在对象外面)
        function fn() {
            console.log('函数');
        }
        // console.log(obj.age);     18
        // console.log(age);        Uncaught ReferenceError: age is not defined
        // 2.变量和属性的不同点
        // 变量 单独声明并赋值，使用的时候直接写变量名  单独存在
        // 属性  在对象里面的不需要声明的(不需要加var) 使用的时候必须是 对象.属性


        // 3.函数和方法的相同点：都是实现某种功能，做某件事情
        // 4.函数和方法的不同点：
        //  函数都是单独声明  并且调用的  函数名()  单独存在的
        //  方法在对象里面  调用的时候   对象.方法()

        // 后面熟悉之后，方法和函数也可以混着叫
    </script>
</head>
<body>
    
</body>
</html>

效果如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1jjZAhs9-1664871298016)(Typora_image/214.png)]

1.3.3 利用new Object 创建对象(方式二)

跟之前的创建数组的方法略有相同，回顾一下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TCkkWn3C-1664871298019)(Typora_image/215.png)]

新建.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>
        // 利用 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();              // Hi~
    </script>
</head>
<body>
    
</body>
</html>

效果如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-C8babz1I-1664871298020)(Typora_image/216.png)]

举例：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4JVyB2Rt-1664871298022)(Typora_image/217.png)]

新建.html文件，执行代码如下


var obj = new Object();
        obj.uname = '鸣人';
        obj.sex = '男';
        obj.age = '19岁';
        obj.skill = function () {
            console.log('影分身术');
        }
 
        // 另一种调用属性的方式
        // console.log(obj['uname']);
        // console.log(obj['sex']);
        // console.log(obj['age']);
 
        console.log(obj.uname);
        console.log(obj.sex);
        console.log(obj.age);
        obj.skill();

1.3.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>
        // 为什么需要使用构造函数？
        // 就是因为前两中创建对象的方式一次只能创建一个对象
        var obj1 = {
            uname:'张三',
            age:18,
            sing: function() {
                console.log('唱歌');
            }
        }
        var obj2 = {
            uname:'李四',
            age:18,
            sing: function() {
                console.log('唱歌');
            }
        }

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

构造函数:是一种特殊的函数，主要用来初始化对象，即为对象成员变量赋初始值，它总是与new运算符一起使用。我们可以把对象中一些公共的属性和方法抽取出来，然后封装到这个函数里面。

新建.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.创建四大天王的对象     相同的属性: 名字  年龄  性别   相同的方法: 唱歌

        // 构造函数的语法格式 
        // function 构造函数名() {
        //     this.属性 = 值;
        //     this.方法 = function() {

        //     }
        // }
        // // 如何调用
        // new 构造函数名();
        function Star(uname,age,sex) {   // 实参传给形参
            // this表示当前对象   使用哪个指向谁
            // 属性
            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);   // object
        // 调用属性
        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>
</head>
<body>
    
</body>
</html>

效果如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yqdcUlRB-1664871298023)(Typora_image/218.png)]

1.3.5案例：请按照要求创建对象

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yK1PeE6o-1664871298026)(Typora_image/219.png)]

新建.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 Hero(name,type,blood) {
            this.type = type;
            this.name = name;
            this.blood = blood;
            this.attack = function(attack) {
                console.log(attack);
            }
        }
        var lianpo = new Hero('廉颇','力量型','500血量');
        // 调用属性
        console.log(lianpo.name);
        console.log(lianpo['blood']);
        lianpo.attack('进战');

        var houyi = new Hero('后羿','射手型','100血量');
        console.log(houyi.name);
        console.log(houyi['blood']);
        houyi.attack('远程');
    </script>
</head>
<body>
    
</body>
</html>

效果如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QD6DmWPD-1664871298028)(Typora_image/222.png)]

1.3.6 构造函数和对象

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8SpH93DA-1664871298029)(Typora_image/220.png)]

新建.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.构造函数   明星  泛指某一大类  它类似于 java里面的  类(class)
        function Star(uname,age,sex) {
            this.name = uname;
            this.age = age;
            this.sex = sex;
            this.sing = function(sange) {
                console.log(sang);
            }
        }

        // 2.对象  特指  是一个具体的事物  刘德华  ==   {name: '刘德华', age: 18, sex: '男', sing: ƒ}
        var ldh = new Star('刘德华',18,'男');   // 调用函数返回的是一个对象
        console.log(ldh);

        // 3.利用构造函数创建对象的过程也称为对象的实例化
    </script>
</head>
<body>
    
</body>
</html>

效果如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-i5kcS62V-1664871298031)(Typora_image/221.png)]

1.3.7 new关键字执行过程

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-px641A6Y-1664871298034)(Typora_image/223.png)]

1.3.8 遍历对象

for …in 语句用于对数组或者对象的属性进行循环操作。

新建.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 = {
            name:'张三',
            age:'19',
            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>
</head>
<body>
    
</body>
</html>

效果如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dVq4ztAV-1664871298036)(Typora_image/224.png)]

1.3.9本节小结

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1MIRoR6b-1664871298037)(Typora_image/225.png)]

1.3.10案例总结(重点)：

新建.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 Computer = {
            // 添加属性
            color:'红色',
            weight:3,
            brand:'惠普',
            model:'4-U004TX',
            // 添加方法
            SeeMoive:function() {
                console.log('看电影');
            },
            LisenMusic:function() {
                console.log('听音乐');
            },
            PlayGame:function() {
                console.log('打游戏');
            },
            KnockCode:function() {
                console.log('敲代码');
            }
        }
        // 调用
        console.log(Computer.color);
        console.log(Computer['weight']);
        Computer.SeeMoive();


        // 2.创建一个按钮对象，该对象需要包含宽、高，背景颜色和点击行为
        // 利用new Object创建对象(创建对象的第二种方法)
        var Button = new Object();
        // 追加属性
        Button.wide = 18;
        Button.high = 20;
        Button.backgroudcolor = '黑色';
        // 追加方法
        Button.ClickBehavior = function() {
            console.log('点击行为');
        }

        // 调用
        console.log(Button.wide);
        console.log(Button['high']);
        Button.ClickBehavior();


        // 3.创建一个车的对象，该对象要有重量、颜色、牌子，可以载人、拉货和耕田
        // 利用构造函数创建对象(创建对象的第三种方法)
        function Car(weight,color,brand) {
            // 添加属性
            this.weight = weight;
            this.color = color;
            this.brand = brand;
            // 添加方法
            this.use = function(usef) {
                console.log(usef);
            }
        }
        // 调用    (调用函数返回的是一个对象)
        var test = new Car(1500,'蓝色','理想');
        console.log(test.weight);
        console.log(test['color']);
        test.use('载人,拉货，耕田');
        // 构建函数不需要return就可以返回结果，因为有new的存在


    </script>
</head>
<body>
    
</body>
</html>

效果如下:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sHzhGrKy-1664871298040)(Typora_image/227.png)]

复习一下数组和函数的创建方法，新建.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 arr1 = [];   // 创建了一个空数组
        var arr2 = [1,2,3,4,5,'张三',true,{'a':1}];
        // 调用
        console.log(arr2);
        console.log(arr2[2]);
        console.log(arr2[5]);

        // 2.利用new创建数组
        var arr3 = new Array();   // 创建了一个空数组
        var arr4 = new Array('a','b','c','d',11,21,32,true);

        // 调用
        console.log(arr4);
        console.log(arr4[2]);
        console.log(arr4[5]);

        // 函数   对于函数，注意预解析
        // 函数使用分为两步:声明函数和调用函数
        // 1.声明函数
        // function 函数名() {
        //     // 函数体
        // }
        // 调用函数
        // 函数名();

        // 函数的2种声明方式
        // 1.利用函数关键字自定义函数(命名方式)
        // function fn() {
        //     console.log('fn');
        // }
        // 调用方式
        // fn();
        // 2. 函数表达式(匿名函数)
        // 方式： var 变量名 = function() {};
        // var fun = function() {
        //     console.log('我是函数表达式');
        // }
        // fun();

        // 3.写一个函数，实现反转任意数组
        // 思路：把原数组的最后一个元素取出来作为新数组的第一个
        function reverse(arr) {
            var newArr = [];
            for (var i = arr.length - 1;i >= 0; i--) {
                newArr[newArr.length] = arr[i];
            }
            return newArr;
        }
        var arr5 = reverse([13,5,3,2,1,7,8,22,56,99,21]);
        console.log(arr5);




        // 4.写一个函数，实现对数字数组的排序
        // 思路：外层循环表趟数，里层循环表交换次数
        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 arr6 = sort([1,4,9,3,45,65,34,32,12,2]);
        console.log(arr6);


    </script>
</head>
<body>
    
</body>
</html>

相关知识点

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xDanXct8-1664871298041)(Typora_image/228.png)]

效果如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TF7yo17J-1664871298043)(Typora_image/229.png)]

1.3.11 案例:做一个简易计算器

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GXAWepb6-1664871298045)(Typora_image/226.png)]

新建.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 = prompt('欢迎使用简易计算机：\n1.加法运算:\n2.减法运算:\n3.乘法运算:\n4.除法运算:\n5.退出;\n请输入您的选项：')
        while (num != 5) {
            counter(num);
            var num = prompt('欢迎使用简易计算机：\n1.加法运算:\n2.减法运算:\n3.乘法运算:\n4.除法运算:\n5.退出;\n请输入您的选项：')
        }
        function counter(num) {
            switch (num) {
                case '1':
                    var num1 = Number(prompt('请输入第一个数字:'));
                    var num2 = Number(prompt('请输入第二个数字'));
                    var result = num1 + num2;
                    alert('结果是' + result);;
                    break;
                case '2':
                    var num1 = Number(prompt('请输入第一个数字:'));
                    var num2 = Number(prompt('请输入第二个数字'));
                    var result = num1 - num2;
                    alert('结果是' + result);;
                    break;
                case '3':
                    var num1 = Number(prompt('请输入第一个数字:'));
                    var num2 = Number(prompt('请输入第二个数字'));
                    var result = num1 * num2;
                    alert('结果是' + result);;
                    break;
                case '4':
                    var num1 = Number(prompt('请输入第一个数字:'));
                    var num2 = Number(prompt('请输入第二个数字'));
                    var result = num1 / num2;
                    alert('结果是' + result);;
                    break;
            }
        }
    </script>
</head>
<body>
    
</body>
</html>

效果如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sQ4Xq715-1664871298047)(Typora_image/230.png)]

2.内置对象

2.1什么是内置对象

JavaScript中的对象分为3种:自定义对象、内置对象、浏览器对象

前面两种对象是JS基础内容，属于ECMAScript，第三个浏览器对象属于JS独有的。在学习JS API的时候讲解

内置对象就是指JS语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或是最基本而必要的功能(属性和方法)

内置对象最大的优点就是帮助我们快速开发

JavaScript提供了多个内置对象:Math、Data、Array、String等

ECMAScript是一种由Ecma国际（前身为欧洲计算机制造商协会，European Computer Manufacturers Association）通过ECMA-262标准化的脚本程序设计语言。这种语言在万维网上应用广泛，它往往被称为JavaScript或JScript，所以它可以理解为是JavaScript的一个标准,但实际上后两者是ECMA-262标准的实现和扩展。

2.2 查阅文档

2.2.1 MDN

学习一个内置对象的使用，只要学会其常用成员的使用即可，我们可以通过查文档学习，可以通过MDN/W3C来查询。

Mozilla开发者网络(MDN)提供了有关开发网络技术(Open Web)的信息，包括 HTML 、CSS和万维网及HTML应用的API 。

MDN:https://developer.mozilla.org/zh-CN/

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MFEVqTin-1664871298048)(Typora_image/231.png)]

2.2.2 如何学习对象中的方法

1.查阅该方法的功能

2.查看里面参数的意义和类型

3.查看返回值的意义和类型

4.通过demo进行测试

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fU09xH7O-1664871298051)(Typora_image/232.png)]

2.3 Math对象

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ottx2NXU-1664871298054)(Typora_image/233.png)]

新建.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>
        //  Math 对象不是一个构造函数，所以我们不需要new来调用， 而是直接使用里面的属性和方法即可
        // 1.求圆周率     属性用法
        console.log(Math.PI);   // 3.141592653589793
        // 2.求最大值     方法用法
        console.log(Math.max(1,99,23,4,5,67,3,6,8,9));    // 99
        console.log(Math.max(-11,-2,-1));     // -1
        // 3.如果有任一参数不能被转换为数值，则结果为 NaN
        console.log(Math.max(1,'张三'));    // NaN
        // 4.如果没有参数，则结果为 - Infinity  (负的无穷大)
        console.log(Math.max());     // -Infinity
    </script>
</head>
<body>
    
</body>
</html>

效果如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-K6ZOosYZ-1664871298056)(Typora_image/234.png)]

2.3.1 案例：封装自己的数学对象

利用对象封装自己的数学对象 里面有PI、最大值和最小值。

新建.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 myMath = {
            PI:3.141592653589793,
            max:function() {
                var max = arguments[0];
                for (var i = 1; i < arguments.length;i++) {
                    if (arguments[i] > max) {
                        max = arguments[i];
                    }
                }
                return max;
            },
            min:function() {
                var min = arguments[0];
                for (var i = 1;i <arguments.length;i++) {
                    if (arguments[i] < min) {
                        min = arguments[i];
                    }
                }
                return min;
            }
        }
        // 调用属性
        console.log(myMath.PI);
        // 调用方法
        console.log(myMath.max(1,2,3,4));
        console.log(myMath.min(-1,-2,-3,-4));
    </script>
</head>
<body>
    
</body>
</html>

效果如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uecYPYKW-1664871298057)(Typora_image/235.png)]

2.3.2 Math概述

Math 对象不是构造函数，它具有数学常数和函数的属性和方法。跟数学相关的运算(求绝对值，取整、最大值等)可以使用Math中的成员

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qkPSSoWT-1664871298057)(Typora_image/236.png)]

新建.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.绝对值方法
        console.log(Math.abs(-1));
        console.log(Math.abs(-1.5));
        console.log(Math.abs(-1.4));
        console.log(Math.abs(-1));
        console.log(Math.abs('-1'));   // 隐式转换  会把字符串型 -1 转换为数字型
        c = -1;            
        console.log(typeof c);  // number
        d = '-1';
        console.log(typeof d);  // string
        a  = Math.abs(-1);
        console.log(typeof a);  // number
        b =  Math.abs('-1');
        console.log(typeof b);  // number
 
        console.log(Math.abs('张三'));   // NaN

        // 2.三个取整方法
        // (1) Math.floor()  向下取整  往最小了取值
        console.log(Math.floor(1.1));        // 1
        console.log(Math.floor(1.4));        // 1
        console.log(Math.floor(1.5));        // 1
        console.log(Math.floor(1.8));        // 1
        console.log(Math.floor(-1.4));       // -2
        console.log(Math.floor(-1.5));       // -2
        console.log(Math.floor(-1.8));       // -2
        console.log('-----------------------------');
        // (2) Math.ceil()  向上取整  往最大了取值
        console.log(Math.ceil(1.1));        // 2
        console.log(Math.ceil(1.4));        // 2
        console.log(Math.ceil(1.5));        // 2
        console.log(Math.ceil(1.8));        // 2
        console.log(Math.ceil(-1.4));       // -1
        console.log(Math.ceil(-1.5));       // -1
        console.log(Math.ceil(-1.8));       // -1
        console.log('***************************');
        // (3) Math.round() 四舍五入   其他数字都是四舍五入  但是  .5 特殊，往大了取值
        console.log(Math.round(1.1));        // 1
        console.log(Math.round(1.4));        // 1
        console.log(Math.round(1.5));        // 2
        console.log(Math.round(1.8));        // 2
        console.log(Math.round(-1.4));       // -1
        console.log(Math.round(-1.5));       // -1   这个比较特殊，返回值不是-2
        console.log(Math.round(-1.8));       // -2


        




    </script>
</head>
<body>
    
</body>
</html>

效果如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-evqwOQ6Z-1664871298058)(Typora_image/237.png)]

特殊之处的答疑

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BOTcldrD-1664871298061)(Typora_image/238.png)]

2.3.3 随机数方法 random()

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FPqqOk2h-1664871298062)(Typora_image/239.png)]

新建.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.Math 对象随机数方法  random() 返回一个随机的小数         x 取值范围 [0,1)
        // 2.Math.random() 里面不跟参数
        // 3.代码验证
        console.log(Math.random);   // 方法不加括号没有报错  ƒ random() { [native code] }
        console.log(Math.random());

        // 4.常用公式   得到两个数之间的随机整数，并且包含这两个整数
        function getRandomIntInclusive(min, max) {
            min = Math.ceil(min);     // 最小值往大了取值
            max = Math.floor(max);    // 最大值往小了取值
            return Math.floor(Math.random() * (max - min + 1)) + min; //含最大值，含最小值
        }
        var result = getRandomIntInclusive(1,10);
        console.log(result);
        // 5.随机点名
        var arr = ['张三','李四','王五','赵六','沈七','田八'];
        // 需求：点第一个人的名字，但是要随机
        // console.log(arrr[0]);
        console.log(arr[getRandomIntInclusive(0,arr.length-1)]);


    </script>
</head>
<body>
    
</body>
</html>

效果如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wkbV8Lsb-1664871298067)(Typora_image/240.png)]

2.3.4 案例：猜数字游戏

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Fas1a9rJ-1664871298069)(Typora_image/241.png)]

新建.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 getRandom(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min; //含最大值，含最小值
        }
        var random = getRandom(1,10);

        while (true) {       // 此处是死循环
            var num = prompt('你来猜?输入1~10之间的一个数字');
            if (num > random) {
                alert('猜大了！');
            } else if (num < random) {
                alert('猜小了！')
            } else {
                alert('猜中了')
                break;     // 退出整个循环结束程序
            }
        }
    </script>
</head>
<body>
    
</body>
</html>

效果如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HM5XtsCR-1664871298071)(Typora_image/242.png)]

拓展：

新建.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~50之间的一个数字，但是只有10次机会
         // 使用上节用的方法
         function getRandom(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min; //含最大值，含最小值
        }
        var random = getRandom(1,50);
        // 方法一:
       /*  var i = 0;
        while (i < 10) {
            
            var num = prompt('你来猜，输入1~50之间的数，只有十次机会！');
            if (num > random) {
                alert('猜大了');
                i++;
            } else if (num < random) {
                alert('猜小了');
                i++;
            } else {
                alert('猜中了');
                break;
            }
        } */
        // 方法二
        for (var i = 0; i <= 10;i++) {
            if (i == 10) {
                alert('您失败了！');
            } else {
                var num = prompt('你来猜，输入1~50之间的数，只有十次机会！');
            if (num > random) {
                alert('猜大了');
            } else if (num < random) {
                alert('猜小了');
            } else {
                alert('猜中了');
                break;
            }
            }
        }
    </script>
</head>
<body>
    
</body>
</html>

2.4 Data日期对象的使用

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gHrYO7c1-1664871298072)(Typora_image/243.png)]

2.4.1概述

Date对象和Math对象不一样，他是一个构造函数，所以我们需要实例化才能使用

Date实例用来处理日期和时间

2.4.3 Date()方法的使用

1.获取当前时间必须实例化

var now = new Date();
console.log(now);

2.Date()构造函数的参数

如果括号里面有时间，就返回参数里面的时间。例如：日期格式字符串为’2022-09-25’,可以写成new Date(‘2022-09-25’)或者new Date(‘2022/9/25’)

新建.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>
        // Date()   日期对象   是一个构造函数  必须使用new来创建我们的日期对象

        // 1.创建数组的方法    Array()是一个构造函数
        var arr = new Array();
        // 2.创建对象的方法
        var obj = new Object();

        // 3.使用Date        如果没有参数，返回当前系统的当前时间
        var date = new Date();
        console.log(date);
        // 3.参数常用的写法  数字型  2022,9,25  或者是  字符串型  '2022-9-25 15:33:00'
        var date1 = new Date(2022,10,1);    
        console.log(date1);    

        var date2 = new Date('2022-10-1 0:0:0');
        console.log(date2);

        var date3 = new Date(2022/10/1);
        console.log(date3);

        console.log('**************************');
        var date4 = new Date('December 17, 2022 03:24:00');
        console.log(date4);
        var date5 = new Date('2022-12-17T03:24:00');
        console.log(date5);
        var date6 = new Date(2022, 11, 17);
        console.log(date6);
        var date7 = new Date(2022, 11, 17, 3, 24, 0);
        console.log(date7);

    </script>
</head>
<body>
    
</body>
</html>

效果如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6ujG24xM-1664871298075)(Typora_image/244.png)]

2.4.4 日期格式化

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FgL6qU9i-1664871298077)(Typora_image/245.png)]

常用：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pzBXIDAX-1664871298080)(Typora_image/246.png)]

新建.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 now = new Date(); 
        console.log(now.getFullYear());   // 返回当前的年份   2022
        console.log(now.getMonth());                // 8
        console.log(now.getMonth() + 1);   // 返回当前的月份   返回的月份小一个月  记得月份加1    9
        console.log(now.getDay());        //  返回当前星期几  (周日 0 到 周六 6)    0
        console.log(now.getDate());        // 返回当前的日期    25
        console.log(now.getHours());
        console.log(now.getMinutes());
        console.log(now.getSeconds());

        // 测试:写一个2023年9月26日  星期二 Tuesday
        var year = now.getFullYear() + 1;
        var month = now.getMonth() + 1;
        var dates = now.getDate() + 1;
        var arr = ['星期天','星期一','星期二','星期三','星期四','星期五','星期六'];
        var day = now.getDay() + 2;
        console.log('今天是:' + year + '年' + month + '月' + dates + '日' + arr[day]);

    </script>
</head>
<body>
    
</body>
</html>

效果如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-H1evZGI2-1664871298082)(Typora_image/247.png)]

新建.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 now = new Date();
        console.log(now.getHours());     // 时
        console.log(now.getMinutes());   // 分
        console.log(now.getSeconds());   // 秒

        // 要求:封装一个函数，返回当前的时分秒  格式: 00:00:00
        function getTimer() {
            var time = new Date();
            var hour = time.getHours();
            hour = hour < 10 ? '0' + hour : hour;
            var minutes = time.getMinutes();
            minutes = minutes < 10 ? '0' + minutes : minutes;
            var seconds = time.getSeconds();
            seconds = seconds < 10 ? '0' + seconds : seconds;
            return hour + ':' + minutes + ':' + seconds;
        }
        console.log(getTimer());
    </script>
</head>
<body>
    
</body>
</html>

效果如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YwEC9F4Z-1664871298083)(Typora_image/248.png)]

2.4.5 获取日期的总的毫秒形式

Data对象是基于1970年1月1日(世界标准时间)起的毫秒数。

(为什么计算机起始时间是从1970年开始?很多编程语言起源于UNIX系统，而UNIX系统认为1970年1月1日0点是时间纪元，所以我们常说的UNIX时间戳是以1970年1月1日0点为计时起点时间的。 )

我们经常利用总的毫秒数来计算时间，因为它更精确。

新建.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>
        // 时间戳也叫Date总的毫秒数
        // 获得Date总的毫秒数(三种方法)     不是当前时间的毫秒数，而是距离1970年1月1号过了多少毫秒数
        // 方法1.通过  valueOf() 或者 getTime()
        var date = new Date();
        console.log(date.valueOf());     // 就是  我们现在时间 距离1970.1.1 总的毫秒数
        console.log(date.getTime());

        // 方法2.简单的写法  (总常用的写法)
        var date1 = +new Date();        // +new Date()  返回的就是总的毫秒数
        console.log(date1);
        // 方法3：H5新增的  获得总的毫秒数
        console.log(Date.now());
    </script>
</head>
<body>
    
</body>
</html>

效果如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lxz4n3W9-1664871298084)(Typora_image/249.png)]

2.4.6 案例:倒计时效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PQMSHgbG-1664871298085)(Typora_image/250.png)]

新建.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 countDown(time) {
            var nowTime = +new Date();      // 返回的是当前时间总的毫秒数
            var inputTime= +new Date(time);   // 返回的是用户输入时间总的毫秒数
            // 1000毫秒 = 1秒
            var times = (inputTime - nowTime) / 1000;  // time是剩余时间总的秒数
            var d = parseInt(times / 60 / 60 / 24);    // 天
            d = d < 10 ? '0' + d : d;
            var h = parseInt(times / 60 / 60 % 24);    // 时
            h = h < 10 ? '0' + h : h;
            var m = parseInt(times / 60 % 60);   // 分
            m = m < 10 ? '0' + m : m;
            var s = parseInt(times % 60);   // 当前的秒数
            s = s < 10 ? '0' + s : s;
            return d + '天' + h + '时' + m + '分' + s + '秒';
        }
        console.log(countDown('2022-9-25 23:30:00'));

        var now = new Date();
        console.log('当前时间:' + now);
    </script>
</head>
<body>
    
</body>
</html>

效果如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sxputDrT-1664871298086)(Typora_image/251.png)]

2.5 数组对象

2.5.1 数组的创建方式

(1) 字面量方式

(2) new Array()

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2EeWBsKQ-1664871298088)(Typora_image/253.png)]

新建.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 arr = [1,2,3];
        console.log(arr[0]);

        // 2.利用new Array()

        var arr1 = new Array();       // 创建了一个空的数组
        var arr2 = new Array();       // 这个 2 表示 数组的长度为 2  里面有2个空的数组元素
        var arr3 = new Array(2,3);    // 等价于[2,3]  这样写表示  里面有2个数组元素  是2和3
        console.log(arr1);
        console.log(arr2);
        console.log(arr3);
    </script>
</head>
<body>
    
</body>
</html>

效果如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eBYAEVUD-1664871298089)(Typora_image/252.png)]

2.5.2 检测是否为数组两种方式

新建.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 reverse(arr) {
            var newArr = [];
            for (var i = arr.length - 1;i >= 0;i--) {
                newArr[newArr.length] = arr[i];
            }
            return newArr;
        }
        console.log(reverse([1,2,3])); */
        // 如果参数不是数组时，返回的是空数组newArr
        // console.log(reverse(1,2,3));   

        // 检测是否是数组
        // (1) instanceof  运算符  它可以用来检测是否为数组
        var arr = [];
        var obj = {};
        console.log(arr instanceof Array);
        console.log(obj instanceof Array);

        function reverse(arr) {
            if (arr instanceof Array) {
                var newArr = [];
                for (var i = arr.length - 1;i >= 0;i--) {
                    newArr[newArr.length] = arr[i];
                }
                return newArr;
         } else {
                return '这个参数要求必须是数组格式[1,2,3]'
            }
            
        }
        console.log(reverse([1,2,3]));
        // (2) Array.isArray(参数);  H5新增的方法  ie9以上版本
        console.log(Array.isArray(arr));
        console.log(Array.isArray(obj));

        function reverse(arr) {
            if (Array.isArray(arr)) {
                var newArr = [];
                for (var i = arr.length - 1;i >= 0;i--) {
                    newArr[newArr.length] = arr[i];
                }
                return newArr;
         } else {
                return '这个参数要求必须是数组格式[1,2,3]'
            }
            
        }
        console.log(reverse(1,2,3));

       
    </script>
</head>
<body>
    
</body>
</html>

效果如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HzDVPP4W-1664871298089)(Typora_image/255.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WQGFRoYU-1664871298090)(Typora_image/254.png)]

2.5.3 添加删除数组元素的方法

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dd3rXzwd-1664871298091)(Typora_image/256.png)]

新建.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. push() 在我们数组的末尾  添加一个或者多个数组 
        var arr1 = [1,2,3];
        arr1.push('张三','李四',true);
        console.log(arr1);      // [1, 2, 3, '张三', '李四', true]

        var arr2 = [1,2,3];
        ;
        console.log(arr2.push('张三','李四',true));      // 6
        /* 
        注意点:
        1. push 是可以给数组追加新的元素
        2. push() 参数直接写 数组元素就可以了
        3. push 完毕之后 ，返回的是数组的长度
        4. 原数组也会发生变化
        */
        

        // 2. unshift 在我们数组的开头  添加一个或者多个数组元素
        var arr3 = ['张三','王五','刘二'];
        arr3.unshift('jack','sirly');
        console.log(arr3);    // ['jack', 'sirly', '张三', '王五', '刘二']

        var arr4 = ['张三','王五','刘二'];
        console.log(arr4.unshift('jack','sirly'));  // 5

        /* 
        注意点：
        1. unshift是可以给数组前面追加新的元素
        2. unshift() 参数直接写 数组元素就可以了
        3 .unshift完毕之后，返回的结果是 新数组的长度
        4. 原数组也会发生变化
        */

        // 3. pop() 可以删除数组的最后一个元素
        var arr5 = [1,2,'哈哈','字符串',true];
        arr5.pop();
        console.log(arr5);    // [1, 2, '哈哈', '字符串']

        var arr6 = [1,2,'哈哈','字符串',true];
        console.log(arr6.pop());    // true

        /* 
        注意点
        1. pop是可以删除数组的最后一个元素 记住一次只能删除一个元素
        2. pop() 没有参数
        3. pop 完毕之后，返回的结果是 删除的那个元素
        4. 原数组也会发生变化
        */

        // 4. shift() 它可以删除数组的第一个元素
        var arr7 = [1,2,3,'张三',true,false];
        arr7.shift();
        console.log(arr7);   // [2, 3, '张三', true, false]

        var arr8 = [1,2,3,'张三',true,false];
        console.log(arr8.shift());     // 1

         /* 
        注意点
        1. shift是可以删除数组的第一个元素 记住一次只能删除一个元素
        2. shift() 没有参数
        3. shift 完毕之后，返回的结果是 删除的那个元素
        4. 原数组也会发生变化
        */
    </script>
</head>
<body>
    
</body>
</html>

效果如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OdHsGK9e-1664871298092)(Typora_image/257.png)]

2.5.4 案例：筛选数组

有一个包含工资的数组[1500,1200,2000,2100,1800]，要求把数组中工资超过2000的删除，剩余的放到新数组里面

新建.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>
        // 有一个包含工资的数组[1500,1200,2000,2100,1800]，要求把数组中工资超过2000的删除，剩余的放到新数组里面
        var arr = [1500,1200,2000,2100,1800];
        var newArr = [];
        for (var i = 0; i < arr.length;i++) {
            if (arr[i] < 2000) {
                // 以前做法
                // newArr[newArr.length] = arr[i];
                // 现在做法
                newArr.push(arr[i]);
            }
        }
        console.log(newArr);      // [1500, 1200, 1800]
    </script>
</head>
<body>
    
</body>
</html>

效果如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IHRviIWi-1664871298093)(Typora_image/258.png)]

2.5.5 数组排序

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KUsbs2BJ-1664871298094)(Typora_image/261.png)]

新建.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 arr = ['张三','李四','王五',1,2,true];
        arr.reverse();
        console.log(arr);  // [true, 2, 1, '王五', '李四', '张三']

        // 2.数组排序(冒泡排序)
        var arr1 = [1,22,43,1,5,6,99,43,2];
        arr1.sort();
        console.log(arr1);  // [1, 1, 2, 22, 43, 43, 5, 6, 99]
        /* 
        注意：
        此时sort并没有排好序
        解决办法：见下图
        */
        var arr2 = [1,22,43,1,5,6,99,43,2];
        arr2.sort(function(a,b){
            return a - b;    // 按照升序排列
            // return b - a;    按照降序排序
        });
        console.log(arr2);  // [1, 1, 2, 5, 6, 22, 43, 43, 99]
    </script>
</head>
<body>
    
</body>
</html>

检索网址：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-z9DtiCAq-1664871298095)(Typora_image/259.png)]

效果如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rliOLutd-1664871298095)(Typora_image/260.png)]

2.5.6 数组索引方法

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8KRRhRpe-1664871298096)(Typora_image/262.png)]

新建.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. indexOf(数组元素)  作用就是返回给数组元素的索引号
        var arr = ['red','green','blue','orange'];
        console.log(arr.indexOf('blue'));  // 2

        // 2. 它只返回第一个满足条件的索引号
        var arr1 = ['red','green','blue','orange','blue'];
        console.log(arr1.indexOf('blue'));  // 2


        // 3. 如果没有该元素，返回 -1
        var arr2 = ['red','green','blue','orange','blue'];
        console.log(arr2.indexOf('yellow'));  // -1


        
        // lastIndexOf() 是倒着查找，返回的是正索引号
        var arr3 = ['red','green','blue','orange','blue'];
        console.log(arr3.lastIndexOf('blue'));     // 4
        console.log(arr3.lastIndexOf('yellow'));   // -1
        console.log(arr3.lastIndexOf('green'));    // 1

    </script>
</head>
<body>
    
</body>
</html>

效果如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-seOUqSjt-1664871298097)(Typora_image/263.png)]

2.5.7 案例：数组去重

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4wkorD42-1664871298098)(Typora_image/264.png)]

新建.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 unique(arr) {
            var newArr = [];
            for (var i = 0; i < arr.length;i++) {
                // 如果查不到，把当前元素放到新数组里面
                // 此时 == 在本案例中也可使用
                if (newArr.indexOf(arr[i]) === -1) {
                    newArr.push(arr[i]);
                }
            }
            return newArr;
        }
        var demo = unique(['a','a','c','v','b','n','d','w','m','c','v','b'])
        console.log(demo);  //  ['a', 'c', 'v', 'b', 'n', 'd', 'w', 'm']

        // && 和 || 是逻辑运算符
        // &  和  | 是位运算符
    </script>
</head>
<body>
    
</body>
</html>

效果如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aD9g4Xhy-1664871298098)(Typora_image/265.png)]

2.5.8 数组转换为字符串

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Qx9t9qbA-1664871298099)(Typora_image/266.png)]

新建.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. toString() 将我们的数组转换为字符串
        var arr = [1,2,3];
        console.log(arr.toString());     // 1,2,3

        // 2.join(分隔符)
        var arr1 = ['green','orange','yellow','red','blue'];
        // 默认以逗号分隔
        console.log(arr1.join());             // green,orange,yellow,red,blue
        console.log(arr1.join('-'));          // green-orange-yellow-red-blue
        console.log(arr1.join('*'));          // green*orange*yellow*red*blue
    </script>
</head>
<body>
    
</body>
</html>

效果如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8nxgDbX9-1664871298100)(Typora_image/267.png)]

2.5.9其他常用方法

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WSKMZfWE-1664871298101)(Typora_image/268.png)]

新建.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>
        // concat() 方法用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组。
        var array1 = ['a', 'b', 'c'];
        var array2 = ['d', 'e', 'f'];
        var array3 = array1.concat(array2);
        console.log(array3);  // ['a', 'b', 'c', 'd', 'e', 'f']

        // slice() 方法返回一个新的数组对象，
        // 这一对象是一个由 begin 和 end 决定的原数组的浅拷贝（包括 begin，不包括end）。
        //  原始数组不会被改变。
        /* 
        slice()
        slice(start)
        slice(start, end)
        */
        var arr4 = ['ant', 'bison', 'camel', 'duck', 'elephant'];
        var arr5 = arr4.slice(2);
        console.log(arr5);   // ['camel', 'duck', 'elephant']
        console.log(arr4);  // ['ant', 'bison', 'camel', 'duck', 'elephant']

        console.log(arr4.slice(1,-2));  // ['bison', 'camel']
        console.log(arr4);    // ['ant', 'bison', 'camel', 'duck', 'elephant']

        console.log(arr4.slice(2,4));  // ['camel', 'duck']
        console.log(arr4);    // ['ant', 'bison', 'camel', 'duck', 'elephant']

        // splice() 方法通过删除或替换现有元素或者原地添加新的元素来修改数组，
        // 并以数组形式返回被修改的内容。
        // 此方法会改变原数组。
        /* 
        splice(start)
        splice(start, deleteCount)
        splice(start, deleteCount, item1)
        splice(start, deleteCount, item1, item2, itemN)
        
        
        */

        var arr6 = ['Jan', 'March', 'April', 'June'];
        var arr7 = arr6.splice(1, 0, 'Feb');
        console.log(arr7);    // []
        console.log(arr6);    // ['Jan', 'Feb', 'March', 'April', 'June']

        var arr8 = ['Jan', 'March', 'April', 'June'];
        var arr9 = arr8.splice(4, 1, 'May');
        console.log(arr9);   // []
        console.log(arr8);   // ['Jan', 'March', 'April', 'June', 'May']




    </script>
</head>
<body>
    
</body>
</html>

效果如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kFpR2rWc-1664871298102)(Typora_image/269.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YCdJeVPd-1664871298103)(Typora_image/270.png)]

3.字符串对象

3.1基本包装类型

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Kr9fPYZO-1664871298103)(Typora_image/272.png)]

新建.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 str = 'andy';
        console.log(str.length);  // 4
        // 对象才有属性和方法，复杂数据类型才有属性和方法
        // 简单数据类型为什么会有length属性呢？
        // 基本包装类型：就是把简单数据类型  包装成为了 复杂数据类型
        // (1) 把简单数据类型包装为复杂数据类型
        var temp = new String('andy');
        // (2) 把临时变量的值 给 str
        str = temp;
        // (3) 销毁这个临时变量
        temp = null;
    </script>
</head>
<body>
    
</body>
</html>

效果如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PMx3KnzU-1664871298104)(Typora_image/271.png)]

3.2 字符串的不可变

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Qq2ckWdZ-1664871298105)(Typora_image/273.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LgKkYm8S-1664871298106)(Typora_image/274.png)]

3.3 根据字符返回位置

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QPFE5yWa-1664871298107)(Typora_image/275.png)]

新建.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>
        // 字符串对象   根据字符返回位置   str.indexOf('要查找的字符',[起始的位置])
        var str = '我是程序员，程序炸了';

        console.log(str.indexOf('程'));  // 2
        console.log(str.indexOf('程',3));   // 这个3指的是从索引号3开始往后查找     6

       // lastIndexOf 从后往前查找  索引号是正的
        console.log(str.lastIndexOf('程'));  // 6
        console.log(str.lastIndexOf('我'));  // 0

    </script>
</head>
<body>
    
</body>
</html>

效果如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IqpmUydQ-1664871298108)(Typora_image/276.png)]

3.4 案例：返回字符位置

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DDBpm2EQ-1664871298109)(Typora_image/277.png)]

新建.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 str = 'abcoefoxyozzopp';
        var index = str.indexOf('o');
        var num = 0;
        // console.log(index);     3
        while (index !== -1) {
            console.log(index);
            num++;
            index = str.indexOf('o',index + 1);
        }
        console.log('o出现的次数是:' + num);
    </script>
</head>
<body>
    
</body>
</html>

效果如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Xt4dl9Kx-1664871298110)(Typora_image/278.png)]

补充

新建.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>
        // 求red出现的位置和次数
        var arr = ['red','blue','red','green','pink','orange','red','yellow'];
        var index = arr.indexOf('red');
        var num = 0;
        while ( index !== -1) {
            console.log(index);
            num++;
            index = arr.indexOf('red',index + 1);
        }
        console.log('red出现的次数是：' + num);
    </script>
</head>
<body>
    
</body>
</html>

效果如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1KT8TvK1-1664871298110)(Typora_image/279.png)]

3.5 根据位置返回字符(重点)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6DQqbvNs-1664871298111)(Typora_image/280.png)]

科普：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Q7wShoC0-1664871298112)(Typora_image/281.png)]

ASCⅡ码的使用场景：判断用户按了键盘哪个按钮

新建.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. charAt(index)  根据位置返回字符
        var str = 'andy';
        console.log(str.charAt(3));  // y

        // 遍历所有的字符
        for (var i = 0; i < str.length; i++) {
            console.log(str.charAt(i));
        }

        // 2. charCodeAt(index) 返回相应索引号的字符ASCⅡ值  目的：判断用户按下了那个键
        console.log(str);                 // andy
        console.log(str.charCodeAt(0));   // 97

        // 3.str[index]   H5新增的
        console.log(str);          // andy
        console.log(str[0]);  // a
        console.log(str[2]);  // d
    </script>
</head>
<body>
    
</body>
</html>

效果如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jIZhUL6O-1664871298113)(Typora_image/282.png)]

3.6 案例：返回字符位置

基础知识

 <script>
        // 有一个对象 来判断是否有该属性   对象['属性名']
        var o = {
            age:18
        }
        if (o['sex']) {
            console.log('里面有该属性');
        } else {
            console.log('没有该属性');
        }
  </script>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-837NDMxJ-1664871298114)(Typora_image/283.png)]

新建.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 str = 'abcoefoxyozzopp';
        var o = {};
        for (var i = 0;i < str.length; i++) {
            var chars = str.charAt(i);           // chars 是字符串的每一个字符
            if (o[chars]) {                     // o[chars] 得到的是属性值
                o[chars]++;
            } else {
                o[chars] = 1;
            }
        }
        console.log(o);

        // 2.遍历对象
        var max = 0;
        var ch = '';
        for (var k in o) {
            //  k 得到是 属性名
            // o[k] 得到的是属性值
            if (o[k] > max) {
                max = o[k];
                // 转换为字符串
                ch = k;
            }
        }
        console.log(max);
        console.log('最多的字符是：' + ch);
    </script>
</head>
<body>
    
</body>
</html>

效果如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7Vh40pc9-1664871298115)(Typora_image/284.png)]

3.7 字符串操作方法

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vP2CrjIU-1664871298115)(Typora_image/285.png)]

新建.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. concat('字符串1','字符串2'....)

        var hello = 'Hello, '
        console.log(hello.concat('Kevin', '. Have a nice day.'))  // Hello, Kevin. Have a nice day.

        // 2. substr('截取的起始位置','截取的几个字符')
        // 它并非 JavaScript 核心语言的一部分，未来将可能会被移除掉。如果可以的话，使用 substring() 替代它。
        // str.substr(start[, length])
        // 如果 start 为正值，且大于或等于字符串的长度，则 substr 返回一个空字符串。
        var str = "abcdefghij";

        console.log("(1,2): "    + str.substr(1,2));   // (1,2): bc
        console.log("(-3,2): "   + str.substr(-3,2));  // (-3,2): hi
        console.log("(-3): "     + str.substr(-3));    // (-3): hij
        console.log("(1): "      + str.substr(1));     // (1): bcdefghij
        console.log("(-20, 2): " + str.substr(-20,2)); // (-20, 2): ab
        console.log("(20, 2): "  + str.substr(20,2));  // (20, 2):

        // 3. 替换字符 replace('被替换的字符','替换为的字符')  它只会替换第一个字符
        var str = 'andyandy';
        console.log(str.replace('a','b'));


        // 拓展：有一个字符串'abcoefoxyozzopp'  要求把里面所有的 o 替换为 *
        var str1 = 'abcoefoxyozzopp';
        while (str1.indexOf('o') !== -1) {
            str1 = str1.replace('o','*');
        }
        console.log(str1);    // abc*ef*xy*zz*pp
        // 4. 字符转换为数组  split('分隔符')
        // 复习：前面学过 join 把数组转换为字符串
        var str2 = 'red,pink,orange,blue';
        console.log(str2.split(','));   // ['red', 'pink', 'orange', 'blue']

        var str3 = '张三&李四&王五&赵六';
        console.log(str3.split('&'));  // ['张三', '李四', '王五', '赵六']

    </script>
</head>
<body>
    
</body>
</html>

效果如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8lRUvMIz-1664871298120)(Typora_image/286.png)]

拓展：

toUpperCase()方法将调用该方法的字符串转为大写形式并返回（如果调用该方法的值不是字符串类型会被强制转换）。
toLowerCase()会将调用该方法的字符串值转为小写形式，并返回。

新建.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 str = 'aBCDefghightMNOWG';
        console.log(str.toUpperCase(str));    // ABCDEFGHIGHTMNOWG
        console.log(str.toLowerCase(str));    // abcdefghightmnowg
    </script>
</head>
<body>
    
</body>
</html>

效果如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MN0xBUyM-1664871298121)(Typora_image/287.png)]

3.8 案例：字符串案例总结

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7k94m6x5-1664871298124)(Typora_image/288.png)]

新建.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 str = 'abaasdffggghhjjkkgfddsssss3444343';
        // 1.字符串的长度
        console.log(str.length);            // 33
        // 2.取出指定位置的字符，如:0,3,5,9等
        console.log(str.charAt(0));         // a
        console.log(str.charAt(3));         // a
        console.log(str.charAt(5));         // d
        console.log(str.charAt(9));         // g
        // 3. 查找指定字符是否在以上字符串中存在，如：i,c,b等
        // indexOf() 如果没有该元素，返回 -1
        console.log(str.indexOf('i'));     // -1
        console.log(str.indexOf('c'));     // -1
        console.log(str.indexOf('b'));     //  1



        // 4.替换指定的字符，如：g替换为22，ss替换为b等操作方法
        var str1 = 'abaasdffggghhjjkkgfddsssss3444343';
        while (str1.indexOf('g') !== -1) {
            str1 = str1.replace('g','22');
        }
        while (str1.indexOf('ss') !== -1) {
            str1 = str1.replace('ss','b');
        }
        console.log(str1);    // abaasdff222222hhjjkk22fddbbs3444343


        // 5.截取指定开始位置到结束位置的字符串，如：取得1-5的字符串
        var str = 'abaasdffggghhjjkkgfddsssss3444343';
        console.log(str.slice(1,6));   // baasd


        // 6.找出以上字符串中出现次数最多的字符和出现的次数
        var str = 'abaasdffggghhjjkkgfddsssss3444343';
        var o = {};
        for (var i = 0;i < str.length; i++) {
            var chars = str.charAt(i);           // chars 是字符串的每一个字符
            if (o[chars]) {                     // o[chars] 得到的是属性值
                o[chars]++;
            } else {
                o[chars] = 1;
            }
        }
        console.log(o);

        // 2.遍历对象
        var max = 0;
        var ch = '';
        for (var k in o) {
            //  k 得到是 属性名
            // o[k] 得到的是属性值
            if (o[k] > max) {
                max = o[k];
                // 转换为字符串
                ch = k;
            }
        }
        console.log(max);
        console.log('最多的字符是：' + ch);
    </script>
</head>
<body>
    
</body>
</html>

效果如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4UYNHkOD-1664871298126)(Typora_image/289.png)]

4.JS中的简单类型和复杂类型

4.1简单类型与复杂类型

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vsUjSSHH-1664871298128)(Typora_image/290.png)]

【提醒】在简单数据类型中，返回的都是数据类型的本身。但有一个特殊的null,返回的是空的对象。

新建.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 str = '张三';
        console.log(typeof str);     // string
        var num = 12;
        console.log(typeof num);     // number
        var bool = true;
        console.log(typeof bool);    // boolean
        // 只声明，未赋值
        var und;
        console.log(typeof und);     // undefined
        
        // null 是空对象类型
        var nul = null;
        console.log(typeof nul);    // object

        // 针对这个特殊性，如果有个变量我们以后打算存储为对象，暂时没想到放什么，这个时候可以给null

    </script>
</head>
<body>
    
</body>
</html>

效果如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qefGgN7k-1664871298129)(Typora_image/291.png)]

4.2 堆和栈

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-I073W4QF-1664871298130)(Typora_image/292.png)]

【提醒】：JavaScript中没有堆栈的概念，通过堆栈的方式，可以更容易理解代码的一些执行方式。

4.3 简单类型的内存分配

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-A3HLyxfn-1664871298131)(Typora_image/293.png)]

4.4 复杂类型的内存分配

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AZyIPC83-1664871298133)(Typora_image/295.png)]

小结：

简单数据类型是存放在栈里面，里面直接开辟一个内存空间，存放的是值
复杂数据类型首先在栈里面存放地址，一般用十六进制表示，然后这个地址指向堆里面的数据

如图所示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-95ulG79X-1664871298134)(Typora_image/294.png)]

4.5 简单数据类型传参

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oONHoYVR-1664871298136)(Typora_image/296.png)]

新建.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 fn(a) {
            a++;
            console.log(a);
        }
        var x = 10;
        fn(x);
        console.log(x);
    </script>
</head>
<body>
    
</body>
</html>

效果如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5FI1K58Y-1664871298137)(Typora_image/297.png)]

4.6 复杂数据类型传参

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-az8hCWPL-1664871298138)(Typora_image/298.png)]

新建.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 Person(name) {
            this.name = name;
        }
        function f1(x) {    // 相当于x = p
            console.log(x.name);    // 2. 这个输出什么    刘德华
            x.name = '张学友';
            console.log(x.name);    // 3. 这个输出什么    张学友
        }
        var p = new Person('刘德华');
        console.log(p.name);        // 1. 这个输出什么    刘德华
        f1(p);
        console.log(p.name);        // 4. 这个输出什么    张学友
    </script>
</head>
<body>
    
</body>
</html>

分析：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-e1RuCfeS-1664871298141)(Typora_image/299.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3vK2wjfu-1664871298144)(Typora_image/300.png)]

效果如下

在这里插入图片描述

今晚务必早点睡
关注
专栏目录
Javascript调试之console对象——你不知道的一些小技巧
10-19
在前端开发过程中，console对象是JavaScript中用于在浏览器控制台输出信息的内置对象，主要在调试代码时使用。以下是一些console对象的使用技巧和方法，这些技巧将有助于提高开发效率和代码调试的便利性。 首先，...
前端之JS对象
weixin_46372074的博客
03-24 2659
前端之JS对象1.对象基础对象的定义子命名空间访问内容用点表示法 和 括号表示法设置对象成员更新数据创建新成员"this"的含义document 对象2.面向对象的程序（OOP）类继承多态构建函数和对象真正的构造函数创建对象的其他方式Object()构造函数create()方法小结3.对象原型prototype 属性 -- 继承成员被定义的地方__proto__查看原型链constructor 属性修改原型常用模式继承 对象使我们将一些信息安全地锁在了它们自己的包内，防止它们被损坏。 1.对象基础 对象是一
在JavaScript中，对象属性后加“?“表示该属性是可选的
新人一枚，互相学习哦！
05-30 957
在JavaScript中，对象属性后加"?"表示该属性是可选的
js对象
Eliauk的博客
09-09 216
对象 object 类 class 类是对象的抽象 对象是类的实例化 字面量方式定义对象，格式为 let obj={ key:value,key1:value} let zhangsan = { username: '张三', age: 20, gender: '男', hobbies: ['篮球', '唱跳'], eat: function () {
JavaScript 文件对象详解
WLANQY的博客
01-11 887
在浏览器中操作文件，多数情况下用到的是 File 对象，从 元素获取，进而继续操作(例如将选择的图片展示在页面上，用ajax将文件上传至服务器等)。这里介绍在浏览器中操作文件的相关API.File 对象继承自 Blob 对象，先看看 Blob 对象。
js新增运算符?.、? ?、? ?=的介绍和使用
qq_32445707的博客
04-18 1018
使用场景： 平时在开发项目的时候经常会读取某些对象的属性值，而当这个对象为undefined或者null时，如果直接利用.运算符操作，那么将会直接报错： 所以为了避免出现这种情况，我们需要在读取属性值之前对对象进行空值判断，常用的方法就是三元运算符、if else条件语句判断，以及&&运算符，这些方法会导致代码比较冗余，影响代码可阅读性，维护起来也比较麻烦。 ?.（可选链运算符） let obj = { name: "ggb" }; let obj2; ...
js面向对象简单教程
03-22
JavaScript作为一种解释型、基于对象的脚本语言，自1995年诞生以来，经历了从简单的表单验证功能到现代Web开发核心技术之一的巨大转变。随着AJAX技术的兴起和发展，JavaScript在前端交互中的地位更加稳固，对语言...
在Javascript中处理字符串之big()方法的使用
10-24
big()方法属于字符串对象的一个内置方法，能够将字符串内容以一种比普通文本更大的字体尺寸显示在网页上，通常用于强调文本内容。理解并熟练使用big()方法是前端开发人员必备的基础知识之一。 ### big()方法的使用 ...
前端面试题之baseJS-number.zip
最新发布
06-22
"前端面试题之baseJS_number.zip"这个压缩包聚焦于JavaScript中的基本类型——Number，它是处理数值的基础。在这个压缩包中，我们可以预见到一系列关于Number类型及其相关知识点的问题。以下是对这些知识点的详细...
狂神说——大前端进阶NodeJS、Npm、Es6、Babel、Webpack、模块化使用笔记
06-20
它引入了许多新特性，如箭头函数、类、模板字符串、解构赋值、let和const声明、Promise对象、Generator和async/await等。这些特性极大地提升了JavaScript的编程体验和代码可读性，是现代前端开发的基础。 【Babel】...
前端-对象-合集
zmmsdk的博客
02-07 640
对象是什么 对象是由多个键值对组成的无序的集合。对象中每个属性对应任意类型的值 1.面向对象是什么 使用对象中的属性和方法就是面向对象 JavaScript的本地对象有哪些 分别有什么特点 本地对象为array obj regexp等 特点是本地对象可以new实例化 1.JavaScript的内置对象有哪些 有什么特点 JavaScript常见的内置对象有 Object,Math,Stri...
js中[]、{}、()区别
yonghutwo的专栏
11-04 4003
一、{ } 大括号，表示定义一个对象，大部分情况下要有成对的属性和值，或是函数体 {}表示对象、[]表示对象的属性、方法,()如果用在方法名后面，代表调用 如：var LangShen = {"Name":"Langshen","AGE":”28”}; 上面声明了一个名为“LangShen”的对象，多个属性或函数用,（逗号）隔开，因为是对象的属性， 所以访问时，应该用.（点）来层层访问：LangShen.Name、LangShen.AGE， 当...
HTML中前端的内置对象、数据类型和复杂数据类型
weixin_60619404的博客
02-15 704
第三个浏览器对象属于 JS 独有的， JS API 讲解内置对象就是指 JS 语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或是**最基本而必要的功能**（属性和方法），内置对象最大的优点就是帮助我们快速开发。​ **简单类型**（**基本数据类型**、**值类型**）：在存储时变量中存储的是值本身，包括string ，number，boolean，undefined，null。跟数学相关的运算（求绝对值，取整、最大值等）可以使用 Math 中的成员。
js中的对象
cn33333的博客
10-13 613
创建对象方式. Js中创建自定义对象，主要通过三种方式：对象直接量、new 构造函数以及Object.create ()方法。
详解JS中的对象
qq_60754128的博客
11-12 935
详细介绍了在JS中对象的相关属性，从语法、类型以及类的属性的各种操作和类的各种遍历，都有详细的介绍
JS对象详解
热门推荐
Maybe_ss的博客
05-30 1万+
JS对象详解 js的对象是什么？js的对象类型有哪些？具体实例实例是什么？ ECMA-262对JS对象的定义： 属性的无序集合，每个属性存放一个原始值、对象或函数 对象是无特定顺序的值的数组 对象是一种特殊的数据类型，可以包含多个成员 对象成员：Object=Property+Method 属性（Property）：封装对象的数据，表示与对象有关的值；对象名、属性名 方法（Method）：封装对象的行为，表示对象可以执行的行为或可以完成的功能；对象名、方法名 JS的对象类型： 内部对象：原生对象/内置对象
JavaScript的数组对象和字符串对象
lu172081_的博客
04-23 170
JavaScript内的可以使用或者**字面量“[ ]”**来创建,并且可以通过调用数组对象提供的一些方法来实现对数组的操作,比如添加或者删除数组元素,数组排序,数组索引等等.
java 对象与字符串_java对象和字符串学习
weixin_39944074的博客
02-15 160
内部类分类按照内部类位置分类：成员位置：在成员位置定义的类，被称为成员内部类局部位置：在局部位置定义的类，被称为局部内部类成员内部类：格式：class Outer{class Inner{}}创建内部类对象访问内部类：格式：Outer.Inner inner = new Outer().new Inner();成员内部类的修饰符：把成员内部类当成属性，属性有的修饰符内部类都有。内部类访问特点:1....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

今晚务必早点睡

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值