JavaScript的第8天-CSDN博客

本文链接：https://blog.csdn.net/qq_46426476/article/details/122184530

原型的原型

<!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 Fun1(){
           age:18;
           gender:"男";
       }
       var a=new Fun1();
        //    向Fun1的原型中添加一个name属性
       Fun1.prototype.name="这是一个原型中的属性name";
       console.log(a.name);         //这是一个原型中的属性name
       
        // 使用in检查对象中是否含有某个属性时，
        // 如果对象中没有但是原型中有，也会返回true
        console.log("name" in a);   //true

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

        //a对象中没有这个方法(属性)
        console.log(a.hasOwnProperty("hasOwnProperty"));        //false
        //说明a的原型中没有hasOwnProperty这个方法(属性)
        console.log(a.__proto__.hasOwnProperty("hasOwnProperty"));   //false





        /*
            原型对象也是对象，所以它也有原型
                当我们使用一个对象的属性或方法时，会先在自身中寻找，
                    自身中如果有，则直接使用
                    如果没有则去原型对象中寻找，如果原型对象中有，则使用
                    如果没有则去原型的原型中寻找,直到找到Object对象中的原型，
                    Object对象中的原型没有原型，如果在Object中依然没有找到，则返回undefined
        */

        //说明a的原型有原型(a的上级是Object对象，a.__proto__.__proto__为寻找到Object对象的原型)
        console.log(a.__proto__.__proto__); //返回{constructor: ƒ, __defineGetter__: ƒ, __defineSetter__: ƒ, hasOwnProperty: ƒ, __lookupGetter__: ƒ, …}
        //说明a的原型的原型中有hasOwnProperty这个方法(属性)
        console.log(a.__proto__.__proto__.hasOwnProperty("hasOwnProperty"));        //true
        //说明Object对象的原型为null
        console.log(a.__proto__.__proto__.__proto__);


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

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>
        //创建一个构造函数
        function Person(name,age,gender){
            this.name=name;
            this.age=age;
            this.gender=gender;
        }
        // 创建一个实例
        var a=new Person("新建道路",16,"男");

        //toString这个方法是Object原型中方法
        // console.log(a.__proto__.__proto__.hasOwnProperty("toString"));      //true

        /**
         * 如果我们希望在输出对象时不输出[Object Object]，可以为对象添加一个toString()方法
         然后在控制台调用toString打印出这个方法,
         且重要声明:在console.log()语句中打印变量并不是调用这个变量的toString方法
         **/
        Person.prototype.toString=function(){
            return "Person[name="+this.name+",age="+this.age+",gender="+this.gender+"]";
        };
        console.log(a);            //Person {name: '新建道路', age: 16, gender: '男', toString: ƒ}
        console.log(a.toString()); //这是重写后的toString方法
    </script>
</head>
<body>
    
</body>
</html>

数组的方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        //创建一个数组
        var arr = ["孙悟空","猪八戒","猴子"];

        /* push()
              ---该方法可以向数组的末尾添加一个或多个元素，并返回数组的新的长度
              ---可以将要添加的元素作为方法的参数传递，
                  这样这些元素将会自动添加到数组的末尾
              ---该方法会将数组新的长度作为返回值返回
         */
         var a=arr.push("八戒","唐飒","属于");
         console.log(a);      //6

         /* pop()
              ---该方法可以删除数组的最后一个元素,并将被删除的元素作为返回值返回
          */
          var b = arr.pop();
          console.log(arr);     //['孙悟空', '猪八戒', '猴子', '八戒', '唐飒']

          /* unshift()
                ---向数组开头添加一个或多个元素，并返回新的数组长度
                ---向前边插入元素以后，其他元素索引会依次调整
          */
          var c=arr.unshift("开头");
          console.log(c);       //6
          console.log(arr);     //['开头', '孙悟空', '猪八戒', '猴子', '八戒', '唐飒']

          /* shift()
                ---可以删除数组的第一个元素，并将被删除的元素作为返回值返回
             */
          var d=arr.shift();
          console.log(d);       //开头
          console.log(arr);     //['孙悟空', '猪八戒', '猴子', '八戒', '唐飒']
    </script>
</head>
<body>
    
</body>
</html>

数组的遍历

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        /* 
            使用for循环将数组遍历出来
        */
       //创建一个数组
       var a= ["张三","王二","李四"];
       //使用for循环遍历数组
       for (let i = 0; i < a.length; i++) {
           console.log(a[i]);  //张三 王二 李四
       }


        /**    
         * for循环遍历数组练习
         * */
        function Fun1(name,age) {
                this.name=name;
                this.age=age;
        }
        var per1=new Fun1("这是",19);
        var per2=new Fun1("三",29);
        var per3=new Fun1("四",9);
        var per4=new Fun1("打完卡",59);
        // 题目:把满18岁的数据提取出来形成一个数组


        // 重写Fun1的toString方法
        Fun1.prototype.toString=function(){
                return "Fun1[name="+this.name+",age="+this.age+"]";
        };
        // 把数据放入一个数组中
        var arr=[per1,per2,per3,per4];
        //定义一个方法用来获取年龄满18岁的数据
        // arr作为形参，调用方法时传入实参
        function getAdult(arr) {
                // 创建一个新数组
            var newArr=[];
            // for循环遍历
            for (let i = 0; i < arr.length; i++) {
                // 判断，年龄大于等于18分离出来
                if(arr[i].age>=18){
                    // 使用push()添加到新数组
                    newArr.push(arr[i]);
                }
            }
            return newArr;
        }
        //调用方法
        var fleshArr=getAdult(arr);
        // 打印新数组
        console.log(fleshArr.toString()); //Fun1[name=这是,age=19],Fun1[name=三,age=29],Fun1[name=打完卡,age=59]

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

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>
        /* 
            一般我们使用for循环去遍历数组
                JS中还为我们提供了一个方法，用来遍历数组
            forEach()
                ---这个方法只支持IE8以上的浏览器
                    IE8及以下的浏览器不支持该方法，所以需要兼容IE8，
                    则不要使用forEach，还是使用for循环来遍历
        */
       
        //创建一个数组
        var arr=["往往","掉今晚","单位","掉文件"];

        /* 
            forEach()需要一个函数作为参数
                ---像这种函数，由我们创建但是不由我们调用的，我们称为回调函数
                ---数组中有几个元素函数就会执行几次，每次执行时，浏览器会将遍历到的元素
                    以实参的形式传递进来，我们可以来定义形参，来读取这些内容
                ---浏览器会在回调函数中传递三个参数:
                    第一个参数:就是当前正在遍历的元素
                    第二个参数:就是当前正在遍历的元素的索引
                    第三个参数:就是正在遍历的数组
        */
       arr.forEach(function(value,index,obj){
           console.log(value);  //往往 掉今晚 单位 掉文件
           console.log(index);  //0 1 2 3
           console.log(obj);    //['往往', '掉今晚', '单位', '掉文件']
       })
    </script>
</head>
<body>
    
</body>
</html>

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>
        //创建一个数组
        var arr=["往往","掉今晚","单位","掉文件","嗲文件","哦年纪"];
        /* 
            slice()
                ---可以用来从数组中提取指定的元素
                ---该方法不会改变元素数组，而是将截取到的元素封装到一个新的数组中返回
                ---参数:
                    1,截取开始的位置的索引,包含开始索引
                    var jie = arr.slice(1,3);  //['掉今晚', '单位']


                    2，截取结束的位置的索引，不包含结束索引
                        ---第二个参数可以省略不写，此时会截取从开始索引往后的所有元素
                        jie=arr.slice(1);    //['掉今晚', '单位', '掉文件', '嗲文件', '哦年纪']


                    ---索引可以传递一个负值，如果传递一个负值,则从后往前计算
                            -1 倒数第一个
                            -2 倒数第二个
                    jie=arr.slice(1,-2);    //['掉今晚', '单位', '掉文件']
        */

        //  
        var jie = arr.slice(1,3);  //['掉今晚', '单位']
        jie=arr.slice(1);    //['掉今晚', '单位', '掉文件', '嗲文件', '哦年纪']
        jie=arr.slice(1,-2);    //['掉今晚', '单位', '掉文件']
        console.log(jie);   
        
        

        //创建一个数组
        var arr1=["往往","掉今晚","单位","掉文件","嗲文件","哦年纪"];
        /* 
            splice()
                ---可以用于删除数组中的指定的元素
                ---使用splice()会影响到原数组，会将指定元素从原数组中删除
                    并将被删除的元素作为返回值返回
                ---参数:
                    第一个:表示开始位置的索引
                    第二个:表示删除的数量
                    第三个及以后。。
                        可以传递一些新的元素，这些元素将会自动插入到开始位置索引前边
                        或者替换这些删掉的元素
        */

        //    删除索引为1开始的元素，数量为2
        //    var result=arr1.splice(1,2);     //['掉今晚', '单位']

        //在删除的位置添加指定的元素
    //    var result=arr1.splice(1,2,"朱大伟","妲己");   //['往往', '朱大伟', '妲己', '掉文件', '嗲文件', '哦年纪']
       
        //在索引为1的位置添加元素
        var result=arr1.splice(1,0,"豆娃啤","哦哈");   //['往往', '豆娃啤', '哦哈', '掉今晚', '单位', '掉文件', '嗲文件', '哦年纪']

        //输出原数组
       console.log(arr1);       //['往往', '朱大伟', '妲己', '掉文件', '嗲文件', '哦年纪']
       console.log(result);     //[]
    </script>
</head>
<body>
    
</body>
</html>