JavaScript基础知识

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- JS代码 -->
    <script type="text/javascript">
        //控制浏览器弹出一个警告框
        alert("hello world");
        // 在页面中输出一个内容,相当于在body写
        document.write("hello");
        // 向控制台输出一个内容
        console.log("hello");
    </script>

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

2.JS的编写位置

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <!-- 1. 写在外部表js文件中 -->
    <script type="text/javascript" src="./test.js">
        // 此句被忽略，script标签一旦引入外部文件，内部就不能再写代码了，写了也会被忽略,如需编写内部，可再新建script标签
        alert('hi');
    </script>

    <!-- 2. 写在script标签中 -->
    <script>
        alert('我是script标签中代码')
    </script>
</head>
<body>

    <!-- 写在属性中不方便维护 -->
    <!-- 3. 将JS代码写在元素的onclik属性中 -->
    <button onclick="alert('点我干嘛');">点我</button>
    <!-- 3.将JS写在超链接的href属性中 -->
    <a href="javascript:alert('又干嘛');">再点我</a>
</body>
</html>

3.注释，字面量，关键字和变量

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
        /*
        多行注释
        */
    //    单行注释

    // 1.JS严格区分大小写
    // 2.每条语句后有分号;
    // 3.js忽略空格和换行


    // 1.JS的字面量：一些不可以改变的值
    // 2.变量：用于保存字面量且可以改变
    // 3.声明变量：用var关键字来声明 + 赋值变量
    var a=1;
    console.log(a);


    //标识符
    // 1.在JS中可以由我们自主命名的
    // 2.要求：包含字母，数字，下划线，$; 不能以数字开头; 不能是关键字或者保留字
    // 3.一般都采用驼峰命名法，首字母小写，其余单词首字母大写，其余小写：helloWorld
    // 4.JS底层保存的标识符采用Unicode编码，
    </script>
</head>
<body>
</body>
</html>

4.JS六种数据类型

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        /*六种数据类型
        String 字符串
        Number 数值
        Boolean 布尔值
        Null 空值
        Undefined 未定义
        Object 对象

        前五个为基本数据类型，最后为引用数据类型
*/


        // String字符串
        var str="hello";//字符串用引号，单引号或者双引号不混用
        str="nice!"//内部不要由多个引号，不能引号嵌套
        //可以使用\作为转义字符
        str="我说\"hello\"";
        alert(str);



        //Number 数值
        //1.JS中所有的数值：整数，浮点数都是Number类型
        var a=123;
        var b="123"
        alert(a);
        alert(b);
        //如何区分？如何获取变量类型？：typeof
        alert(typeof b);

        // 2. JS中可以表示的数值最大值
        a=Number.MAX_VALUE;
        //如果超过最大值，则输出：Infinity正无穷，-Infinity负无穷
        alert(a*a);
        // 最小值
        a=Number.MIN_VALUE;

        //3.NaN是一种特殊字符，使用typeof检查NaN返回Number,表示Not a Number
        a=NaN;

        //4.在JS中整数运算基本精确
        //浮点数可能不精确,所以尽量不要用JS进行精确计算
        alert(0.1+0.2);



        //Boolean布尔值：true/false



        //Null类型的值只有一个：Null，表示为空的对象
        //使用typeof检查Null返回object，所以Null表示空对象


        //Undefined表示声明了但没有赋值，使用typeof检查Undefined返回Undefined
    </script>
</head>
<body>
    
</body>
</html>

5.强制类型转换

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        //类型转换主要是指建其余类型转为String Number Boolean

        //1.转换为String类型：
            // a.调用被转换数据类型的toString()方法。但是null和Undefined没有toString方法
            var a=123;
            console.log(typeof a);

            var b=a.toString();
            console.log(typeof b);

            a=true;
            a=a.toString();
            console.log(typeof a);

            // b.调用String函数转换
            var c=123;
            c=String(c);
            console.log(typeof c);

            var d=true;
            d=String(d);
            console.log(typeof d);

        //2.转换为Number类型
            //a.使用Number()函数
                // String->Number
                    //如果是纯数字的字符串转为数字
                    //如果含有非数字内容，转为NaN
                    // 如果是空串或者全是空格，转为0
                //Boolean->Number
                    //true=1,false=0
                //Undefined->Number:NaN
                //null->Number:0

            var q="123";
            q=Number(q);
            console.log(typeof q);

            // b.专门针对字符串
            //parseInt(),parseFloat()
            var z="123px";
            z=parseInt(z);//提取字符串中的有效整数
            console.log(z);
            var z="123.987px";
            z=parseFloat(z);
            console.log(z);
            // 对于非STring类型使用parseInt parseFloat 则会先转为字符串


        // 3.转换为Boolean
                // 使用Boolean()函数
                var a=13;
                a=Boolean(a);
                console.log(a);
                //Number->Boolean:除了0和NaN，其余转为true
                // Stringp->Boolean:除了空串，起源于均为true
                // null和Undefined都转为false

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

6.逻辑运算

<!-- 
与：||
或：&&
非：！
 -->
 <!DOCTYPE html>
 <html lang="zh-CN">
 <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>

        //如果第一个值为false返回false, 如果第一个值为true,返回第二个
        var s=1 && 2;//先转换为Boolean，再进行逻辑运算
        console.log(s,typeof s);//s是Number s=2

         var s=0 && 1;//true和false返回false

         var q=NaN && 0;//两个false返回前一个false
         console.log(q,typeof q);

        //  || 如果第一个值为true返回第一个，如果第一个值为false直接返回第二个。
    </script>
 </head>
 <body>
    
 </body>
 </html>

7. 相等运算符

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
         console.log("1"==1);//true，类型不同会自动类型转换
         console.log(true=="1");//true，均转为了Number类型
         //Undefined衍生自null
         console.log(undefined==null);
        //  NaN不和任何值相等，包括自己
        console.log(NaN==NaN);
        // 判断NaN
        var b=NaN;
        console.log(isNaN(b));

        //全等运算===，！==
        //不会做自动类型转换，如果类型不同，直接返回false
        console.log(1==="1");
    </script>
</head>
<body>

8.Unicode编码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        // 在字符串中输出unicode编码，使用\u转义字符，\u十六进制
        console.log("\uC100");
    </script>
</head>
<body>
    <!-- 网页中使用编码：&#十进制编码 编码使用十进制-->
    <div>&#9856;</div>
</body>
</html>

8.条件运算符

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        // 先求问号之前的真值，为真则返回：之前的语句，为假则返回：之后的语句
        true?alert(1):alert(2);
        1>2?alert(1):alert(2);
    </script>
</head>
<body>
</body>
</html>

9.代码块

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        // 使用{}包裹，只起到分组作用，并不代表变量的作用域
        {
            alert(1);
            alert(2);
        }
        {
            alert(1);
            alert(2);
        }

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

10. if条件判断语句

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        //条件判断语句if
        /*
        if（条件表达式）
           语句
        */
       //不加大括号，仅仅对if后的一条语句有效、

       //1.if语句
       if(10>20){
            alert("hello");
            alert("hi");
        }

        //2.if...else...语句
       if(10>20){
            alert("hello");
            alert("hi");
        }
        else{
            alert("apple");
        }

        //if()...else if()....else if()....else..语句
        var a=10;
        if(a>30){alert(30);}
        else if(a>20){alert(2);}
        else if(a>10){alert(10);}
        else alert(0);

//if语句练习：

    var score=prompt("请输入成绩");//prompt函数用于用户输入
    if(score>90)alert("优秀");
    else if(score>80)alert("良好");
    else alert("不及格");
   
    </script>
</head>
<body>
</body>
</html>

11.switch条件分支语句

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>

        /*
        switch(条件表达式1){
            case 表达式2：
            语句
            case 表达式3：
            语句
            default:
            语句
            break;
        }
        */
       //表达式1依次与case后的表达式做全等运算
       //结果为false:继续比较
       //结果为true: case后每个case后的语句都会执行
       //可以在每一个case后的语句中加break;保证只执行一条语句

//不加break
        var num=2;
        switch(num){
            case 1:
                alert(1);
            case 2:
                alert(2);
            case 3:
                alert(3);
            default:
                alert("不知道");
                break;
        }

//加break
        num=3;
        switch(num){
            case 1:
                alert(1);
                break;
            case 2:
                alert(2);
                break;
            case 3:
                alert(3);
                break;
            default:
                alert("不知道");
                break;
        }
        
        
    </script>
</head>
<body>
    
</body>
</html>

12.while和for循环

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>

        // while循环
        var n=1;
        while(n<10){
            n++;
        }
        // for循环
        alert(n);
        for(var a=0;a<10;a++){//for(初始化；条件；更新)
            a++;
        }
        alert(a);
    </script>
</head>
<body>
    
</body>
</html>

13.对象基本概念

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        //对象简介：
        //5中基本数据类型，一种引用数据类型为object
        //对象：复合数据类型
        //对象的分类：
            //1.内建对象：由ES标准中定义的对象,例如：Number,Boolean
            //2.宿主对象：由JS的运行环境提供的对象，例如:console,document
            //3.自建对象：由我们自己创建

        //创建对象
        /*
        使用new关键字调用的函数，constructer构造函数
        使用typeof 检查对象类型返回object
        */
        var obj=new Object()
        /*对象的属性即在对象中保存的值，
        对象.属性名=属性值
        */
       obj.name="孙悟空";//向对象中添加属性
       obj.gender="男";
       console.log(obj);
       console.log(obj.gender);//读取属性
       console.log(obj.age);//不存在的属性返回undefined
       obj.name="猪八戒";//修改属性值
       delete obj.name;//删除属性delete 对象.属性

       //对象的属性名不强制要求符合标识符的规范，任意命名都可以，但尽量遵守
       //如果使用特殊字符来命名，不要采用.的方式，采用obj[]的形式，如下：
       obj["123"]=23;
       console.log(obj[123]);

       //对象的属性值可以是任意值，也可以是一个对象
       var obj2=Object();
       obj.test=obj2;
       console.log(obj);
       console.log(obj2);
       //使用in来检查对象中是否含有某个属性
       console.log("gender" in obj);
    </script>
</head>
<body>
    
</body>
</html>

14.基本和引用数据类型的空间存储

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        /*
        JS中的变量都保存在栈内存中，var|value
            基本数据类型都在栈内存中，值与值之间相互独立

            对象保存在堆内存中，没创建一个对象会在堆中开辟一个新空间
            而变量保存的是对象的内存地址：obj|0x123，即对象的引用
            如果两个变量指向同一个对象地址，一个改变，则另一个对象变量的属性值也会改变

        
        */
       var obj1=new Object();
       obj1.name="he";
       var obj2=obj1;//变量obj1在栈内存的值是obj1对象在堆内存的地址，于是obj1和obj2指向同一个地址
       console.log(obj1.name);
       console.log(obj2.name);

       console.log(obj1);
       console.log(obj2);
       console.log(obj2==obj1);//true，两个对象的地址相同

       var obj3=new Object();
       var obj4=new Object();
       obj3.name="ha";
       obj4.name="ha";
       console.log(obj3==obj4);//false,两个对象的地址不相等

       //当比较两个基本数据类型时，就是比较值
       //当比较两个引用数据类型时，就是比较对象那个的内存地址
    </script>
</head>
<body>
    
</body>
</html>

15.对象的字面量

对象的字面量是一种JS创建对象的语法

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        // 使用字面量来创建对象
        //方式一：语法：var obj={};属性单另添加
        var obj={};
        obj.name="孙悟空";
        console.log(obj);

        //方式二：语法：var obj={属性名：属性值，属性名：属性值...};
        //属性名引号可以加也可以不加，建议不加
        var obj2={
            name:"猪八戒",
            gender:"男",
            test:{name:"沙和尚"}
        };
        console.log(obj2);
    </script>
</head>
<body>
    
</body>
</html>

16.函数的创建

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        //函数：也是一种对象
        //可以封装一些功能（代码），可以按照需要调用这些功能
         

        //函数的创建：

        //1.使用构造函数，创建一个函数对象,并分装一句代码
        var fun=new Function("console.log('hello');");
        console.log(typeof fun);
        //调用函数
        fun();

        //2.使用函数声明来创建一个函数
        //语法：
            //function 函数名（形参1，形参2...）{
            //   语句；
            //  }
        function fun1(){
            alert("hello");
            console.log('fun1');
        }
        fun1();

        //3.使用函数表达式来创建一个函数
        //语法：var 函数名=function（形参1，形参2...）{
            //   语句；
            //  }
        var fun3=function(){
            alert("fun3");
        }
        fun3();
    </script>
</head>
<body>
    
</body>
</html>

17.函数的参数以及返回值

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>

        //解析器不会检查实参的类型
        //解析器也不会检查多余形参，多余的不会被实参赋值
        //如果实参数目小于形参，则未被赋值的形参值为undefined
        //实参可以是任何值，包括对象，函数
        function fun(a,b){
            alert(a+b);
        }
        // fun(1,2);
        var obj={name:"孙悟空",gender:"男",age:"18"};

           //实参是函数
        function fun4(a){
            alert("a="+a);
        }
        //实参加了括号就是传函数的返回值
        //实参不加括号就是传函数的本身代码
        // fun4(fun1(1,2,3));
        // fun4(fun1);
        

        
        //没有return语句相当于return undefined
        //return 后可以返回任意类型的值
        function fun1(a,b,c){
            var d=a+b+c;
            return d;//return后的语句不再执行
        }
        // alert(fun1(1,2,3));

        //返回值是任意类型，包括函数
        function fun5(){
            function fun6(){
                alert("hi");
            }
            return fun6();
        }
        a=fun5();//函数的返回值是fun6()，因此在此处会先调用fun6,但是fun6的返回类型为undefined,
        alert( typeof a);
    
    </script>
</head>
<body>
    
</body>
</html>

18.立即执行函数

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        //立即执行函数，在定义后直接执行
        (function(){
            alert("hello");
        })();

        //参数列表在结尾处
        (function(a,b){
            alert(a+b);
        })(1,2);
    </script>
</head>
<body>
    
</body>
</html>

19.方法

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        var obj={
            a:"1",
            b:"2",
            fun1:function(){
                alert("hi");
            }
        }
        //函数作为对象属性：称它为该对象的方法
       obj.fun=function(a,b){
            alert(a+b);
        }
        // obj.fun(5,5);
        // console.log(obj.fun);

        // 枚举对象中的属性
        //使用for in语句,有几个属性，就循环几次
        //每次循环中，n是属性名，由于n是变量，需要用obj[n]来查看n的值
        for( var n in obj){
            console.log(n);//
            console.log(obj[n]);
        }
    </script>
</head>
<body>
    
</body>
</html>

20.全局作用域和函数作用域

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
              //JS中作用域有两种：全局作用域和函数作用域
        //1.全局作用域：
            //在页面打开时创建，在关闭时销毁
            //在全局作用域中，有一个全局对象window
            //在全局作用域中，创建的变量都是window对象的属性，函数都是window对象的方法

        //使用var关键字声明的变量，会在全部代码执行之前声明，但不会赋值。
        //函数声明形式：function fun(){}语句会在所有代码执行之前调用，var fun2=function(){}不会被
        a1();//调用成功
                 a2();//调用失败
                 console.log(a2);//undefined
                 function a1(){alert("a1");}
                 var a2=function(){alert("a2");}

        //2.函数作用域：
            //调用函数时创建函数作用域，函数执行完毕作用域销毁
            //每调用一次就会创建一个独立的函数作用域
            //函数作用域可以访问全局变量，反之不可以
            //当函数组偶用于中操作变量时，会优先在自身作用域中寻找，不存在则向上一级寻找，直到全局
            //在函数中也有var提前声明的规则
            //形参相当于在函数作用域用var声明


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

21.this

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        // 解析器调用函数每次都会想函数内部传递一个隐藏的参数
        //根据函数调用的方式不同，this指向不同的对象
        function fun(a,b){
         console.log(this);
        }
        fun();//this是window,以函数形式调用，即window.fun()
        
        var obj={
            name:"mayu",
            fun1:fun
        }
        obj.fun1();//this为调用对象，以方法的形式调用函数

        var name="全局";
        function f1(){
            alert(name);
        }

        var obj1={
            name:"sun",
            sayname:f1
        }

        var obj2={
            name:"zhu",
            sayname:f1//注意：f1不加括号
        }

        //输出全为全局
        // obj1.sayname();
        // obj2.name();
        // f1();

        //修改原函数：
        function f1(){
            alert(this.name);
        }

        // 输出为各自的name
        console.log(f1);
        obj1.sayname();
        obj2.sayname();
        f1();
    </script>
</head>
<body>
    
</body>
</html>

22.工厂方法创建对象

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        //工厂方法创建对象
        function createPerson(name,age){
            var obj=new Object();
            obj.name=name;
            obj.age=age;
            return obj;
        }
        var obj2=createPerson("张三",18);
        var obj3=createPerson("李四",17);
        console.log(obj2);
        console.log(obj3);
    </script>
</head>
<body>
    
</body>
</h

23.构造函数

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        //构造函数习惯性首字母大写
        //就是一个普通函数，区别是调用方式不同，使用new关键字来调用，普通函数不使用new
        //执行流程：
            //1.一旦调用，立刻创建一个新对象
            //2.将新建的对象设置为this
            //3.逐行执行代码
            //4.将新建的对象返回

        //使用同一个构造函数创建的对象那个称为一类，这些对象的是实例
        function Person(name,age){
            this.name=name;
            this.age=age;
        }
        // var p1=new Person("张十三",19);
        // console.log(p1.age);
        // console.log(p1 instanceof Person);
        // console.log(p1 instanceof Object);//所有的对象都是Object的实例


        //修改构造函数
        //每执行一次，创建一个新的方法
        function Dog(name,age){
            this.name=name;
            this.age=age;
            this.sayname=function(){
                alert(this.name);
            }
        }
        var d1=new Dog("tom",1);
        var d2=new Dog("tina",2);
        // d1.sayname();
        // d2.sayname();
        alert(d1.sayname==d2.sayname);//fales
        
        //将函数定义在全局作用域中
        function sayname1(){
                alert(this.name);
            }
         alert(d1.sayname1==d2.sayname1);//true
    </script>
</head>
<body>
    
</body>
</html>

24.原型对象

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        //原型:prototype
        //每个函数，解析器都会添加一个prototype属性
        //该属性对应一个对象，即原型对象
        //将函数作为普通函数调用，prototype没有作用

        //以构造函数形式调用，创建的对象中有一个隐含的属性
            //指向该构造函数的原型对象
        //相当于一个公共的区域，同一个类的实例都可以访问到，因此可以将共有的属性放在原型对象中
        //当访问对象那个的某个属性，陷在自身找，没有回在原型对象中寻找
        function myclass(){

        }
        var mc1=new myclass();
        var mc2=new myclass();
        //函数本身通过prototype访问，实例对象通过__proto__书信给访问原型对象
        console.log(myclass.prototype==mc1.__proto__);
        myclass.prototype.a=123;//公共属性a
        console.log(mc1.a,mc2.a);//123 123

        //使用in来检查对象中是否有某个属性，但会包括原型范围
        console.log("a" in mc1);//true
        console.log(mc1.hasOwnProperty("a"));//false，仅在自身查看
        console.log(mc1.hasOwnProperty("hasOwnProperty"));//false

        //原型对象也是对象，他也有原型对象
        console.log(mc1.__proto__.hasOwnProperty("hasOwnProperty"))//false
        console.log(mc1.__proto__.__proto__.hasOwnProperty("hasOwnProperty"));//true
        console.log(mc1.__proto__.__proto__);//object,它没有原型
        console.log(mc1.__proto__.__proto__.__proto__);//null
    </script>
</head>
<body>
    
</body>
</html>

25.toString()

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>  
    function Person(name,age){
        this.name=name;
        this.age=age;
    }
     var p1= new Person("zhangsna",18); 
     console.log(p1); 
     console.log(p1.toString()); //即直接输出p1
      
    p1.toString=function(){
        return "hahahh";
    }
    console.log(p1.toString()); //hahahh，但不改变原型
    var p2=new Person("zhu",19);

    //修改原型toString
    Person.prototype.toString=function(){
        return "我是"+this.name+"，我"+this.age;
    }
    console.log(p2.toString());//输出修改后的
    </script>
</head>
<body>
    
</body>
</html>

26.垃圾回收

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        /*
        程序运行过程中产生的垃圾
        */
        function Person(name,age){
        this.name=name;
        this.age=age;
    }
        var obj=new Person();
        obj=null;//不指向堆内存任何地址，即为垃圾

        //JS中有自动的垃圾回收机制，不需要我们手动进行
        //我们需要的仅仅是将不需要的对象手动设置为null
        
    </script>
</head>
<body>
    
</body>
</html>

27.数组的创建

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        //内建对象：由ES标砖定义

        //数组：也是对象，用于存储值，
            //普通对象使用字符串作为属性，数组用数字索引从0开始
            
        //创建数组对象
        var arr=new Array();
        // console.log(arr);
        //添加元素
        arr[0]=10;
        arr[1]=33;
        //读取
        // console.log(arr[1]);

        //获取数组长度（连续数组）
        // console.log(arr.length);//length是Array中的属性，不是方法
        // arr[10]=1;//非连续数组跳过中间索引，长度变为最大索引加一
        // console.log(arr.length);
        // console.log(arr);

        //修改length：小于原长，会删除多余的元素
        arr.length=10;
        //向数组最后一个位置添加元素
        arr[arr.length]=12;
        // console.log(arr);


        //数组字面量
        var arr1=[];
        // console.log(typeof arr1);
     
        var arr2=[1,2,3,4,5,6];
        // console.log(arr2);
        

        //构造函数
        var arr3=new Array(1,2,3);
        console.log(arr3);

        //
        var  arr4=new Array(10);//length=10
        console.log(arr4);

        //数组里的元素可以是任何数据类型
        var arr5=[10];//length=1
        console.log(arr5);
        arr5[1]="hello";
        arr5[2]=arr4;
        arr5[3]=true;
        arr5[4]=function(){alert(1);};
        console.log(arr5);

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

28.数组的四种常用增删方法

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        var arr1=new Array();
        //push(),在数组末尾添加一个或者多个元素,返回值为数组长度
        arr1.push(1);
        arr1.push("hi","hello");
        console.log(arr1,arr1.push(2));

        //pop(),删除最后一个元素,返回删除的元素
        arr1.pop();
        console.log(arr1,arr1.pop());

        //unshift(),在数组来头添加一个或者多个元素，并返回数组长度
        arr1.unshift(10,11);
        console.log(arr1,arr1.unshift(12));

        //shift(),删除第一个元素,返回删除的元素
        arr1.shift();
        console.log(arr1,arr1.shift());
    </script>
</head>
<body>
    
</body>
</html>

29.数组的遍历

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
    
        var a1=new Array(7,8,9,10,4,5);
        //遍历1
        for(var i=0;i<a1.length;i++){
            console.log(a1[i]);
        }

        //遍历2，forEach()仅支持IE8以上的浏览器，将函数作为参数
        //数组中有几个元素，函数执行几次
        //每次遍历时，将遍历到的元素以实参的形式传递进函数,共有三个参数
        //第一个参数:当前遍历元素value；第二个参数：当前遍历的索引号index；第三个参数：当前数组obj
    a1.forEach(function(a,b,c){
        console.log("a="+a+" b="+b+" c="+c);
    });
    </script>
  
</head>
<body>
    
</body>
</html>

30.数组方法splice和slice

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
           var a1=new Array(7,8,9,10,4,5);
           
           //slice()从数组中提取指定范围元素
            //参数:截取开始的索引位置，截取结尾的位置索引
            //截取元素不包含末尾位置元素
            //第二个参数可以不写，默认截取开始位置以后的所有元素
            //第二个参数也可以为负值：-1倒数第一个元素，-2倒数第二个元素
           var result=a1.slice(2,4);
           console.log(result);//9,10

           var result1=a1.slice(2,-1);
           console.log(result1);//9,10,4

           //splice(),删除元素并返回删除元素，并添加新元素,
           //两个参数，第一个为七十位置，第二个为删除元素的数量
           var r1=a1.splice(0,2);
           console.log(r1,a1);
           var r1=a1.splice(0,2,"hi","hello");//自动替换被删除的元素
           console.log(r1,a1);

           //练习：去除数组中重复的数字
           var a1=[1,2,3,1,2,3,4,2,3];
           for(var i=0;i<a1.length;i++){
            for(var j=i+1;j<a1.length;j++){
                if(a1[j]==a1[i]){
                    a1.splice(j,1);
                    j--;//注意
                }
            }
           }
           console.log(a1);


    </script>
</head>
<body>

</body>
</html>

31.数组的其他方法

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>

    var a1=[1,2,3];
    var a2=["hi","he","ha"];
    var a3=[7,8,9];
    
    //1.连接多个数组或者元素
    var r1=a1.concat(a2,a3,10);
    console.log(r1);

    //2.将数组转换为字符串，默认用逗号连接
    var r2=a2.join();
    var r3=a2.join("-");
    console.log(typeof r2,r2,r3);

    //3.反转数组
    a1.reverse();
    console.log(a1);

    //4.sort排序,按照unicode编码,默认升序
    a2.sort();
    console.log(a2);
    //自定义排序规则：添加回调函数
    //返回值为1，交换，返回值-1或者0不交换
    arr=[4,5,6,9,6,3,2];
    arr.sort(function(a,b){//a和b不确定，但a一定在b的前面
        // if(a>b){
        //     return 1;//交换
        // }
        // else if(a<b){
        //     return -1;
        // }
        // else{
        //     return 0;
        // }
        return b-a;//降序
    })
    console.log(arr);

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

32.call和apply

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        function fun(){
            alert(this);
        }

        var obj={
            name:"sun",
            sayname:function(){
                console.log(this.name);
            }
        };
        var obj2={
            name:"sun2",
            sayname:function(){
                console.log(this.name);
            }
        };
        
        function fun1(a,b){
        alert(a+b);
        }
        //函数的方法call和apply
        //函数调用两种方法后都会执行函数
        //可以将一个对象作为第一个参数传入这两种方法,这个对象会成为函数执行时的this
        //call方法可以在第一个对象参数后面依次传入函数参数,apply需要将参数封装在数组里

        //1.call()
        // fun.call(obj);//obj
        
        //2.apply()
        // fun.apply();//window

        // obj.sayname.apply(obj2);//this=obj2

        fun1.call(obj,2,3);
        fun1.apply(obj,[2,3]);
    </script>
</head>
<body>
    
</body>
</html>

33.arguments


<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        //调用函数时，会传入一个隐藏的参数arguments,封装实参的对象，
        //是一个类数组对象，arguments[0],arguments[1]依次对应传入的实参
        // callee属性对应当前正在则会那个在指向的函数对象
        function fun(){
            console.log(arguments instanceof Object);
            console.log(Array.isArray(arguments));
            console.log(arguments.length);
            console.log(arguments[1]);
            console.log(arguments.callee);
        }

        fun(1,"heool");
    </script>
</head>
<body>
    
</body>
</html>

34.Date对象

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        var d=new Date();
        console.log(d);//当前代码执行时间

        //创建一个指定的时间,格式如下
        var d1=new Date("11/03/2021 11:30:45");
        console.log(d1);

        //对象方法和属性
        var date=d1.getDate();//获取日
        console.log(date);
        var day=d1.getDay();//获取星期
        console.log(day);
        var month=d1.getMonth();//获取月份,12月为0
        console.log(month);
        var year=d1.getFullYear();//获取年份
        console.log(year);

        var time=d.getTime();//获取时间戳，毫秒
        console.log(time);
        
        time=Date.now();//获取当前时间戳
        console.log(time);

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

35.Math对象

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        //Math不是构造函数，是一个工具类，不用于创建对象
        //Math,PI
        var b=-1;
        console.log(Math.abs(b));//绝对值
        console.log(Math.ceil(2.3));//向上取整
        console.log(Math.floor(6.8));//向下取整
        console.log(Math.round(5.5));//四舍五入
        console.log(Math.random());//生成0-1之间的随机数
        console.log(Math.round(Math.random()*(20-10)+10));//生成10-20之间的随机数
        console.log(Math.max(10,20,30));
        console.log(Math.min(10,20,30));
        console.log(Math.pow(2,3));//2的3次方
        console.log(Math.sqrt(64));//开方
        
    </script>
</head>
<body>
    
</body>
</html>

36.包装类

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
    //Js提供了三个包装类，将基本数据类型转换为对象
    //String Number Boolean

    var num=new Number(3);
    console.log(num,typeof num);
    var str=new String();
    var bool=new Boolean();
    
    num.name="hello num";
    
//如果给基本数据类型调用方法或者添加属性时，浏览器会将其临时转换为对象，调用后再转回基本数据类型

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

37.字符串方法

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        var str="hello";
        //在底层字符串以字符数组的形式保存
        console.log(str.length);//5
        console.log(str[0]);//h

        //定位字符
        console.log(str.charAt(0));//h
        console.log(str.charCodeAt(0));//str[0]的字符Unicode编码
        
        console.log(String.fromCharCode(104));//由字符编码获取字符
        console.log(str.concat("你好"));//相当于+

        console.log(str.indexOf("e",2));//检索字符是否存在，不存在返回-1，存在返回第一次出现的位置,第二个参数可以指定开始查找的位置
        console.log(str.lastIndexOf("l"));//从后往前索引，也可以指定查找开始位置

        console.log(str.slice(0,2));//截取str[0-1]，不包含str[2]
        console.log(str.substring(0,2));//效果于slice一样，不同的是substring不接受负值参数，如果参数2小于参数1则自动调整位置
        console.log(str.substr(0,2));

        str="abc,dr,gh";
        console.log(str.split(','));//将字符串拆分成数组，与join相反

        str="abcdefg";
        console.log(str.toUpperCase());//转为大写
        var str1="ABCDEFG";
        console.log(str1.toLowerCase());//转为小写

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

38. 异步js

目的：解决回调函数多层嵌套产生的回调陷阱，promise使用了链式的方式来表达相同的含义。

使用方法：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        function doSomething(num) {
            return new Promise((resolve,reject)=>{
                //这里模拟一个简单的异步操作
                    // let test = 0;
                    // setTimeout(()=>{
                    //     console.log("done");
                    //     test = 1;
                    // },200); 

                    if(true){
                        // 如果成功 使用resolve改变promise的状态为fulfilled
                        resolve(num);
                    } else {
                        // 如果失败 使用reject改变promise的状态为rejected
                        reject(new Error("操作失败"));
                    }         
            });
        }

        function doSomethingElse(result) {
            return new Promise((resolve, reject) => {
                resolve(result+1);
            });
        }
        /*
       1. promise对象：用来表示一个异步操作的执行结果
       2. 在这里我们期望函数返回一个promise对象：
            使用Promise构造函数创建一个promise对象，构造函数有一个必选参数为：执行器函数。
            执行器函数接受两个参数resolve和reject，都是promise的内置函数，用于改变promise对象的状态。
                promise对象有三种状态：
                    Pending(等待中)：初始状态
                    Fulfilled(已完成)：意味着操作成功
                    Rejected(已拒绝)：意味着操作失败
                resolve函数：pending->fulfilled；reject函数：pending->rejected
                需要在传入的执行器函数中显示的调用resolve()或者reject()来改变状态，否则状态一直为pending
                状态一旦从 "pending" 变为 "fulfilled" 或 "rejected"，它将永远保持这个状态
                resolve或reject函数接收的参数作为promise的结果，存放在该promise的PromiseResult字段中 
       3. promise.then(onFullfilled onRejected(可选)),then方法在当promise状态改变时调用，接受两个参数
            若状态变化为：pending->fulfilled，onFullfilled函数被调用，有一个默认参数value为promise的结果值，也就是传入resolve的参数
            若状态变化为：pending->rejected, onRejected函数会被调用，有一个默认参数error，一般为传入reject()的参数
            promise.then的返回值：
                立即返回一个新的 Promise 对象，该对象始终处于待定状态，无论当前 Promise 对象的状态如何。
                 // 假设由then返回的新promise对象为p,则then的参数：回调函数的返回值：
                 // 为非promise值，作为由p的值
                 // 没有返回值，p的值为undefined
                 // 抛出错误，作为p的拒绝原因
                 // 返回一个已兑现的 Promise 对象：p 以该 Promise 的值作为其兑现值。
                 // 返回一个已拒绝的 Promise 对象：p 以该 Promise 的值作为其拒绝值。
                 // 返回另一个待定的 Promise 对象：p 保持待定状态，并在该 Promise 对象被兑现/拒绝后立即以该 Promise 的值作为其兑现/拒绝值。          
                */

        function successCallback(value) {
            console.log('successCallback:value ' ,value);
                 return value+1;
        }

        function failCallback(error) {
            console.log("failCallback:error ",error.message);
        }

        // 创建promise
        const promise = doSomething(1);
        console.log('promise:',promise);

        const promise2 = Promise.resolve(3);
        const promise3 = 42;
        const promise4 = new Promise((resolve, reject) => {
            setTimeout(resolve, 100, 'foo');
        });
        const promise5 = new Promise((resolve,reject)=>{
        setTimeout(reject,50,'too');
        });
        //迭代对象
        const promises = [promise2, promise3, promise4];
        const racePromises = [promise4,promise5];

        // 实例方法： then catch finally

        // 1.  promise.then()
        const promise1 = promise.then(successCallback,failCallback);
        promise.then(
            value => console.log('简写callback:',value),
            error => console.log('简写callback:',error.message)
        );
       console.log('promise1:',promise1);

       // 2. promise.catch: catch(onRejected) = then(null,onRejected)
       // 3. promise.finally: 无论成功还是失败，都会被调用 .finally(onFinally) = .then(onFinally,onFinally)
       promise.catch((error)=>{
        console.log("catchError:",error);
       }).finally(()=>{
        console.log('finally');
       });


     
        
        //静态方法：

        // 1. Promise.all 等待所有兑现（或第一个拒绝）的结果。
        Promise.all(promises).then((values) => {
             console.log('all:',values);
        });

        // 2.promise.allsetled 
        // 当所有输入的 Promise 都已敲定时（包括传入空的可迭代对象时），返回的 Promise 将被兑现，并带有描述每个 Promise 结果的对象数组。
        Promise.allSettled(promises).then((values)=>{
            console.log('allsettled:',values);
        });

        // 3. promise.any 返回第一个fulfilled的promise对象的value值
        Promise.any(racePromises).then(value=>console.log('any: ',value));

        // 4. promise.race: 返回第一个确定为fulfilled或者rejected的promise的value或reson
        Promise.race(racePromises).then( value => console.log('race:', value));
    </script>
</head>
<body>
</body>
</html>