javaScript基础(六)

直条纹先生

于 2022-06-23 15:48:36 发布

阅读量97

点赞数

分类专栏： web前端文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_45936141/article/details/125428633

版权

web前端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

本文通过一系列练习深入探讨JavaScript的函数作用域，包括局部作用域、全局作用域以及如何在函数中访问变量。此外，还讲解了原型对象和原型链的概念，展示了如何通过构造函数创建对象，以及如何使用原型链实现对象方法的共享。最后，讨论了数组的常用操作，如push、pop、slice和splice，以及如何遍历和修改数组。

摘要由CSDN通过智能技术生成

55.函数作用域练习

<!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 type="text/javascript">

        /*
        
        函数作用域练习1

        */

        // var a = 123;
        // function fun(){

        //     alert("第一个a："+a);//123
        //     a = 456;

        // }
        // fun();
        // alert("第二个a: "+a);//456


          /*
        
        函数作用域练习2

        */


        // var a = 123;
        // function fun(a){
        //     alert("第一个a：" + a);//undefied
        //     a = 456;

        // }
        // fun();
        // alert("第二个a：" + a);//123


         /*
        函数作用域练习3
        */

        // var a = 123;
        // function fun(a){
        //     alert("第一个a：" +a);//undefined
        //     a = 456;
        // }

        // fun();
        // alert("第二个a：" +a);//123


         /*
        函数作用域练习4
        */

        var a = 123;
        function fun(a){
            alert("第一个a："+a);//123
            a = 456;
        }

        fun(123);
        alert("第二个a："+a);//123 

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

56.debug测试

<!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 type="text/javascript">

                alert(d);
        var a = 10;
        var b = "hello";
        
        c =  true;
        
        function fun(){
            alert("hello");
        }
        
        var d = 35;

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

57.this

<!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 type="text/javascript">

        /*
        解析器在调用函数每次都会向函数内部传递一个隐含的参数
            这个隐含的参数就是this,this指向的是一个对象
            这个对象我们称之为函数执行的上下文对象，
            根据函数调用的方式的不同，this会指向不同的对象
                1、以函数的形式调用时，this永远都是window
                2、以方法的形式调用时，this就是调用方法的那个数
        */

        function fun(){

                // console.log("a = "+a+ ", b = "+ b );
                console.log(this);
        }

        //fun();

        //创建一个对象
        var obj = {

            name:"孙悟空",
            sayName:fun

        };

        var obj2 = {

        name:"沙和尚",
        sayName:fun

        };

        // console.log(obj.sayName == fun );

        // obj.sayName();
        // fun();//window

        obj2.sayName();
    </script>
</head>
<body>
    
</body>
</html>

58.this的补充

<!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 type="text/javascript">

        /*
        this的补充
        */


        //创建一个name变量
        var name = "全局";

    //创建一个fun()函数
        function fun(){
            
            console.log(obj.name);

        }

    //创建两个对象
    var obj = {

        name:"孙悟空",
        sayName:fun
    };
    
    var obj2 = {

        name:"沙和尚",
        sayName:fun

    };
    // fun();//全局
    obj2.sayName();

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

59.使用工厂方法调用对象

<!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 type="text/javascript">

        /*
        创建一个对象

        */

        var obj = {

            name: "孙悟空",
            age: 18,
            agender: "男",
            sayName: function () {
                alert(this.name);

            }
        };


        /*
        使用工厂方法创建对象
            通过该方法可以创建大量的对象
        */

        function createPerson(name,age,gender){
            //创建一个对象
            var obj = new Object();
            //向对象中添加属性
            obj.name = name,
            obj.age = age,
            obj.agender = gender,
            obj.sayName = function(){
                alert(this.name);
            };

            //将新的对象返回
            return obj;

        }

        var obj2 = createPerson("猪八戒",18,"男");
        var obj3 = createPerson("猪八戒2",18,"男");
        var obj4 = createPerson("猪八戒3",18,"男");

        console.log(obj2);
        console.log(obj3);
        console.log(obj4);


    </script>
</head>

<body>

</body>

</html>

60.构造函数

<!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 type="text/javascript">



          /*
        使用工厂方法创建对象
            通过该方法可以创建大量的对象
        */

        function createPerson(name,age,gender){
            //创建一个对象
            var obj = new Object();
            //向对象中添加属性
            obj.name = name,
            obj.age = age,
            obj.agender = gender,
            obj.sayName = function(){
                alert(this.name);
            };

            //将新的对象返回
            return obj;

        }


        /*
        用来创建狗的对象
        */
        function createDog(name,age){
            var obj = new Object();
            obj.name = name;
            obj.age = age;
            obj.sayHello = function(){
                    alert("汪汪~");
            };

            return obj;
        }

        var obj2 = createPerson("猪八戒",18,"男");
        var obj3 = createPerson("猪八戒2",18,"男");
        var obj4 = createPerson("猪八戒3",18,"男");

        // console.log(obj2);
        // console.log(obj3);
        console.log(obj4);


        /*
        
        使用工厂方法创建的对象，使用的构造函数都是Object
        所以创建的对象都是Object这个类型
        就导致我们无法区分出多种不同类型的对象


        */
        //创建一个狗的对象
        var dog = createDog("旺财",3);

        console.log(dog);
        // dog.sayHello(obj);
    </script>
</head>
<body>
    
</body>
</html>

61.构造函数2

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript">

        // var obj = new Person();
        // var obj2 = new Dog();

        /*
        创建一个构造函数，专门用来创建Person对象的
            构造函数就是一个普通的函数，创建方式和普通函数没有区别
            不同的是构造函数习惯首字母大写

            构造函数和普通函数的区别就是调用方式的不同
                普通函数时直接调用,而构造函数需要使用new关键字来调用


           构造函数的执行流程：
           
           1.立刻创建一个新的对象
           2.将新建的对象设置为函数中this,在构造函数中可以使用this来引用新建的对象
           3.逐行执行函数中的代码
           4.将新创建的对象作为返回值返回


使用同一个构造函数创建的对象，我们称之为一类对象，也将一个构造函数称为一个类。
        我们将通过一个构造函数创建的对象，称之为是该类的实例

           this的情况：
            1.当以函数的形式调用时，this是window
            2.当以方法的形式调用时，谁调用方法this就是谁
            3.当以构造函数的形式调用时，this就是新创建的那个对象
        */

        function Person(name, age, gender) {

            this.name = name;
            this.age = age;
            this.gender = gender;
            this.sayName = function () {
                alert(this.name);
            }
        }

        /*
        用来创建狗的对象

        */
        function Dog(name, age) {

            this.name = name;
            this.age = age;
            this.sayName = function () {
                alert(this.name);
            }
        }

        var per = new Person("狐狸精", 18, "女");
        var per2 = new Person("狐狸精2", 19, "女");
        var per3 = new Person("狐狸精3", 20, "女");


        var dog = new Dog();



        // console.log(dog);
        /*
        使用instanceof可以检查一个对象是否是一个类的实例
        语法：
            对象Instance of 构造函数
          如果是，则返回true,否则返回false  
        */
        console.log(per instanceof Person);
        console.log(dog instanceof Person);

        console.log(dog instanceof Object);
     


    </script>
</head>

<body>

</body>

</html>

62.构造函数3

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript">


        /*
        创建一个Person构造函数

            -在Person构造函数中，为每一个对象都添加了一个sayName方法
                目前我们的方法是在构造函数内部创建的，
                    也就是构造函数每执行一次就会创建一个新的sayName方法
                 也就是所有实例的sayName都是唯一的
                 这样就导致了构造函数执行一次就会创建一个新的方法，
                 执行10000次就会创建10000个新的方法，而10000个方法都是一摸一样的   
                    这是完全没有必要的，完全可以使所有的对象共享同一个方法

        */

        function Person(name,age,gender){

            this.name = name;
            this.age = age;
            this.gender = gender;
            //向对象中添加一个方法
            // this.sayName = fun;
        }

        //将sayName方法在全局作用域中定义
        /*
        将函数定义在全局作用域，污染了全局作用域的命名空间
            而且定义在全局作用域中也很不安全
        */
        // function fun(){
        //     alert("Hello大家好,我是：" + this.name);
        // }

        Person.prototype.sayName = function(){
            alert("Hello大家好！我是：" + this.name);
        }


        //创建一个Person的实例
        var per = new Person("孙悟空",18,"男");
        var per2 = new Person("孙悟空2",19,"男");


        per.sayName();
        per2.sayName();
    // console.log( per2.sayName == per2.sayName );//true


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

63.原型对象

<!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 type="text/javascript">

            /*
            原型prototype
            
            我们所创建的每一个函数，解析器都会向函数中添加一个属性prototype

                这个属性对应着一个对象，这个对象就是我们所谓的原型对象

             如果函数作为普通函数调用prototype没有任何作用
             当函数通过构造函数调用时，它所创建的对象中都会有一个隐含的属性，
             指向该构造函数的原型对象，我们可以通过_proto_来访问该属性


             原型对象就相当于一个公共的区域，所有同一个类的实例都可以访问到这个原型对象
                我们可以将对象中共有的内容，统一设置到原型对象中


            当我们访问对象的一个属性或方法时，它会在对象自身中寻找，如果有则直接使用
            如果没有则会去原型对象中寻找，如果找到则直接使用


            以后我们创建构造函数时，可以将这些对象共有的属性和方法，统一添加到构造函数的原型对象中，
            这样不要分别为每一个对象添加，也不会影响全局作用域，就可以使每个对象都具有这些属性和方法了
            
            */

            

            function MyClass(){

            }


            //向MyClass的原型中添加属性a
            MyClass.prototype.a = 123;



            var mc = new MyClass();
            var mc2 = new MyClass();

            // console.log(mc.__proto__ == MyClass.prototype);
            // console.log(MyClass.prototype == Person.prototype );//false

            //向mc中添加属性a
            mc.a = "我是mc中的a";
            console.log(mc2.a);//123


            mc.sayHello();
    </script>
</head>
<body>
    
</body>
</html>

64.原型

<!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 type="text/javascript">

        /*
        创建一个构造函数
        */

        function MyClass(){


        }

        //向MyClass的原型中添加一个name属性
        MyClass.prototype.name = "我是原型中的名字"  
        var mc = new MyClass();
        console.log(mc.name);

        /*
        用in  检查mc中是否有name属性,  如果对象中没有但是原型中有，也会返回true
        */
        // console.log("name" in mc);


        //可以使用对象的hasOwnProperty()来检查对象自身中是否含有该属性
        //使用该方法只有当对象自身中含有属性时，才会返回true
        console.log(mc.hasOwnProperty("age"));//false

        /*
        原型对象也是对象，所以它也有原型
            当我们使用一个对象的属性或方法时，会现在自身中寻找
            自身中如果有，则直接使用
            如果没有则去原型对象中寻找，如果原型对象中有，则使用
            如果没有则取原型的原型中寻找,直到找到Object对象原型
            Object对象的原型没有原型，如果在Object中依然没有找到，则返回undefined
        
        */
        console.log(mc.__proto__.__proto__.hasOwnProperty("hasOwnProperty"));//true

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

65.toString

<!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 type="text/javascript">

        function Person(name,age,gender){

                this.name = name;
                this.age = age;
                this.gender = gender;

        }

        Person.prototype.toString = function(){

                return "Person[name = "+this.name+",age = "+this.age+",gender = "+this.gender;
        };



        //创建一个Person实例
        var per = new Person("孙悟空",18,"男");
        var per2 = new Person("猪八戒",19,"男");


        per.toString = function(){

            return "我是一个快乐的小Person";
        }



        var result =  per.toString();
        // console.log("result = " + result);//Object
        // console.log(per.__proto__.__proto__.hasOwnProperty("toString"));//true原型的原型里面有toString方法
        console.log(per2);
        console.log(per);


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

66.垃圾回收

<!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 type="text/javascript">

        /*
        垃圾回收（gc）

            -就像人生活时间长了会产生垃圾一样，程序运行过程中也会产生垃圾
                这些垃圾积攒过多以后，会导致程序运行的速度过慢，
                所以我们需要一个垃圾回收机制，来处理程序过程中产生的垃圾
            -当一个对象没有任何的变量或属性对它进行引用，此时我们将永远无法操作该对象，此时这种对象就是一种垃圾
            这种垃圾过多会占用大量内存空间，导致程序运行变慢，
            所以这种垃圾必须进行清理
            -在js中拥有自动的垃圾回收机制，会自动将这些垃圾对象从内存中销毁
            我们不需要也不能进行垃圾回收的操作

            --------------------------------------------------
            我们只需要做的是将不再使用的对象设置Null即可
        */

        var obj = new Object();
        
        //对对象进行各种操作。。。
        obj = null;


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

67.数组

<!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 type="text/javascript">

        /**
         * 内建对象
         * 
         * 
         * 宿主对象
         * 
         * 
         * 自定义对象
         * 
         * 
         * 数组（Array）
         *  -数组也是一个对象
         *  -它和我们普通的对象功能类似，也是用来存储一些值的
         *  -不同的是普通对象是使用字符串作为属性名的，而数组是使用数字来作为索引操作元素
         * 
         * -索引：
         * 
         *  从0开始的整数就是索引
         *
         * -数组的存储性能比普通对象要好，在开发中我们经常使用数组来存储一些数据
         * 
         */

         

         //创建数组对象
         var arr = new Array();

         //使用typeOf检查一个数组时，会返回object

        //  console.log(typeof arr);//object



         /*
         向数组中添加元素
         语法：数组[索引] = 值
         */

         arr[0] = 10;
         arr[1] = 33;
         arr[2] = 22;
         arr[3] = 42;
         arr[100] = 100;



         /*
         读取数组中的元素
         语法：数组[索引]

         如果读取不存在的索引，它不会报错而是返回undefined
         */
         
         //console.log(arr[3]);

         /*
         获取数组的长度
         可以使用length属性来获取数组的长度(元素的个数)
         语法：数组.length


         对于连续的数组，使用length可以获取到数组的长度（元素的个数）
         对于非连续的数组，使用length会获取到数组的最大的索引 +1

         尽量不要创建非连续的数组

         */
         
        // console.log(arr.length);
        // console.log(arr);

        /*
        修改length

            如果修改的length大于原长度，则多出部分会空出来
            如果修改的length小于原长度，则多出的元素会被删除

        */
       arr.length = 10;



    //    console.log(arr.length);
    //    console.log(arr);


    arr[4] = 50;
    arr[5] = 60;

    //向数组的最后一个位置添加元素
    //语法：数组[数组.length] = 值;

    arr[arr.length] = 70;
    arr[arr.length] = 80;
    arr[arr.length] = 90;


         console.log("数组最后一个值：" +  arr[arr.length] );


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

68.数组字面量

<!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 type="text/javascript">



        //创建一个数组
        // var arr = new Array();通过对象创建太麻烦了

        // arr[0]  = 123;
        // arr.hello = "abc";


        //使用字面量来创建数组
        //语法：[]
        var arr = [];
        // var arr = [];

        // console.log(typeof arr);
        //使用字面量创建数组时，可以在创建时就指定数组中的元素
        var arr = [1,2,3,4,5,10];

        // console.log(arr.length);//6
        console.log(arr[3]);//通过索引取值 4


        //使用构造函数创建数组时，也可以同时添加元素，将要添加的元素作为构造函数的参数传递
        //元素之间使用,使用逗号，隔开
        var arr2 = new Array(10,20,30);
        // console.log(arr2);


        //创建一个数组数组中只有一个元素10
        arr = [10];
        arr2 = new Array(10);
        
        //数组中的元素可以是任意数据类型
        // arr = ["hello",1,true,null,undefined];

        //也可以是对象
        var obj = {name:"孙悟空"};
        arr[arr.length] = obj;
        arr = [{ name:"孙悟空"},{name:"沙和尚"},{name:"猪八戒"}];

        //也可以是一个函数
        arr = [function(){alert(1)},function(){alert(2)}];

        // arr[0]();
        // console.log(arr);
        // console.log(arr[0]);//10

        //数组也可以放数组，如下数组称为二维数组
        arr = [[1,2,3],[3,4,5],[5,6,7]];
        console.log(arr[1]);
        


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

69.数组的方法

<!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 type="text/javascript">

        //创建一个数组
        var arr = ["孙悟空","猪八戒","沙和尚"];

        /*
        push()
        该方法可以向数组的末尾添加一个或多个元素，并返回数组的新的长度
        可以将要添加的元素将会自动添加到数组的末尾

        该方法会将数组新的长度作为返回值返回    
               var result =  arr.push("唐僧","蜘蛛精","白骨精");

        */

       var result =  arr.push("唐僧","蜘蛛精","白骨精");

        console.log(arr);
        // console.log("result = " + result);


        /*
        pop()
        该方法可以删除数组的最后一个元素
        -调一次删一次
        -该方法可以删除数组的最后一个元素，并将被删除的元素作为返回值返回

        */

        // var result = arr.pop();
       
        // console.log("result = " + result);



        /*
        unshift()
        -向数组开头添加一个或多个元素，并返回新的数组长度
        -向前边插入元素以后，其他元素索引会依次调整
        */

        console.log(arr);

        arr.unshift("牛魔王","二郎神");
        console.log(arr);

        
        /*
        shift()
        可以删除数组的第一个元素，并将被删除的元素作为返回值返回
        
        */

        result = arr.shift();

        console.log(arr);
        console.log("result = "+ result);


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

70.数组的遍历

<!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 type="text/javascript">

        //创建一个数组
        var arr = ["孙悟空","猪八戒","沙和尚","tans","123"];

        //所谓的遍历数组，就是将数组中的所有元素都取出来
        // console.log(arr[0]);
        // console.log(arr[1]);
        // console.log(arr[2]);
        // console.log(arr[3]);

        for(var i = 0;i < arr.length ; i++ ){
            
            console.log(arr[i]);

        }






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

71.数组的练习

<!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 type="text/javascript">


        function Person(name , age , gender){

            this.name = name;
            this.age = age;
        }

        //修改Person原型的toString
        Person.prototype.toString = function(){

            return "Person[name="+this.name+",age = " + this.age + "]";
        };

        //创建一个Person对象
        var per = new Person("孙悟空",18);
        var per2 = new Person("孙悟空2",28);

        var per3 = new Person("孙悟空3",8);
        var per4 = new Person("孙悟空4",16);
        var per5 = new Person("孙悟空5",38);


        /*
        将这些对象Person对象放入一个数组中
        */
       var perArr = [per,per2,per3,per4,per5];
        console.log(perArr);

        /*
        创建一个函数，可以将perArr中的满18岁的Person提取出来，
        然后封装到一个新的数组中并返回

        arr
        形参，要提取信息的数组
        */

        function getAdult(arr){

                //创建一个新的数组
                var newArr = [];
                //遍历arr，获取arr中的Person对象

                for(var i = 0 ; i < arr.length ; i++){
                        var p  = arr[i];
                //判断Person对象的age是否大于18，则将这个对象添加到newArr中
                    if(p.age >= 18 ){
                 //如果大于等于18，则将这个对象添加到newArr中       
                //将对象放入新的数组中
                newArr.push(p);

                    }
                        
                }
                //将新的数组返回
                return newArr;
        }

        var result = getAdult(perArr);
        console.log(result);

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

72.forEach

<!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 type="text/javascript">

        var arr = ["孙悟空","猪八戒","沙和尚","唐僧"];

        /*

        forEach()IE8不支持
        
        forEach()需要一个函数作为参数
        --像这种函数，有我们创建但是不由我们调用的，我们称之为回调函数
        --数组中有几个元素，函数就执行几次，每次执行时，浏览器会将遍历到的元素以实参的形式传递进来，
        我们可以来定义形参，来读取这些内容

        --浏览器会在回调函数中传递三个函数
        第一个参数，就是当前正在遍历的元素
        第二个参数，就是当前正在遍历元素的索引 
        第三个参数，就是正在遍历的数组
        */

        arr.forEach(function(value,index,obj){

                console.log(value);
                
        });
    </script>
</head>
<body>
    
</body>
</html>

73.slice和splice

<!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 type="text/javascript">



        var arr = ["孙悟空","猪八戒","沙和尚","唐僧","白骨精"];

        /*
        slice()
        --可以从数组中提取指定元素
        --该方法不会改变元素的数组，而是将截取的元素封装到一个新的数组中返回
        --参数：

        1.截取开始的位置索引,包含开启索引
        2.截取结束的位置的索引，不包含结束索引

            --第二个参数可以省略不写，此时会截取从开始索引往后的所有元素

         索引可以传递一个负值,如果传递一个负值，则从后往前计算

         --1.倒数第一个
         --2.倒数第二个


        */

       var result = arr.slice(0,2);

       result = arr.slice(3);

       result = arr.slice(1,-2);
        // console.log(result);


        /*
        splice()更好用一点！！
          --可以用于删除数组中的指定元素
          --使用splice()会影响到原数组，会将指定元素从数组中删除
            并将被删除的元素作为返回值返回
         --参数：
         第一个，表示开始位置的索引
         第二个，表示删除的数量
         第三个及以后。。
                可以传递一些新的元素，这些元素将会自动插入到开始位置索引前边

         
         
        */
        arr = ["孙悟空","猪八戒","沙和尚","唐僧","白骨精"];
       var result =  arr.splice(1,1,"牛魔王","铁扇公主","红孩儿");//第一个一是插入的位置


       console.log(arr);
        // console.log(result);


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

74.Splice练习

<!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 type="text/javascript">


            //创建一个数组
            var arr = [1,2,3,2,1,3,4,2,5,2];

            //去除数组中重复的数字
            //获取数组中的每一个元素
            for( var i = 0;i < arr.length; i++ ){

                    // console.log(arr[i]);

                    /*
                    获取当前元素后的所有元素
                    */

                    for(var j = i + 1 ; j < arr.length;j++ ){
                        
                        // console.log("------->" + arr[j] );
                        //判断两个元素的值是否相等
                        if(arr[i] == arr[j]){

                            //如果相等则证明出现了重复元素,则删除j对应的元素
                            arr.splice(j,1);

                            j--;

                        }

                    }

            }
                console.log(arr);

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

75.数组的剩余方法

<!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 type="text/javascript">

        var arr = ["孙悟空","猪八戒","沙和尚"];
        var arr2 = ["孙悟空2","猪八戒3","沙和尚4"];
        var arr3 = ["孙悟空3","猪八戒4","沙和尚5"];



        /*
        concat()可以连接两个或多个数组,并将新的数组返回

        --该方法不会对原数组产生影响
        */


        
       var result =  arr.concat(arr2,arr3,"牛魔王","铁扇公主");
    //    console.log(result);



        /*
        join()
        -该方法可以将数组转换成一个字符串
        --该方法不会对原数组产生影响,而是将转换后的字符串作为结果返回

        --在join()中可以指定一个字符串作为参数，这个字符串将会成为数组中元素的连接符
            如果不指定连接符，则默认使用，（逗号）作为连接符
        */

        arr = ["孙悟空","猪八戒","沙和尚"];

        result = arr.join("-");//转换成String
        
        console.log(result);

        /*
        reverse()
        --该方法用来反转数组(前边的去后边，后边的去前边)
        --该方法会直接修改原数组
        */

        arr.reverse();
        // console.log(arr);
        arr = ["b","d","e","a","c"];
        
        /*
        sort()
        --可以用来对数组进行排序
        --也会影响原数组，默认会按照Unicode编码进行排序
        所以对数字排序有可能得到错误的结果


        我们可以在sort()添加一个回调函数，来指定排序规则
            回调函数需要定义两个形参，
            浏览器将会分别使用数组中的元素作为实参去调用回调函数
            使用哪个元素调用不确定，但是肯定的是在数组中a一定在b前边

        --浏览器会根据回调函数的返回值来决定元素的顺序，
            如果返回一个大于0的值，则元素会交换位置   
            如果返回一个小于0的值，则元素位置不变
            如果返回一个0,则认为两个元素相等，也不交换位置
        */
        arr = [5,4,2,1,3,6,8,7];
        arr.sort(function(a,b){

            // if( a > b ){
            //     return 1;
            // }else if(a < b ){
            //     return -1;
            // }else{
            //     return 0;
            // }

            //升序排列
            // return a - b;
            //降序排列
            return b - a ;

        });
        console.log(arr);

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

76.call和apply

<!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 type="text/javascript">

        function fun(){

            alert(this.name);
        }

        /*
        call()和apply()
            -这两个方法都是函数对象的方法，需要通过函数对象来调用
            -当对函数调用call()和apply()都会调用函数执行
            -在调用call和apply()可以将一个对象指定为第一个参数

            此时这个对象将会成为函数执行的this
        */

        var obj = {name:"obj"};
        var obj2 = {name:"obj2"};
        


        fun.call(obj);
        fun.apply(obj);

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