JavaScript-02基础

最新推荐文章于 2024-07-30 22:36:34 发布

xiaoai_tx

最新推荐文章于 2024-07-30 22:36:34 发布

阅读量112

点赞数

文章标签： javascript js

本文链接：https://blog.csdn.net/xiaoai_tx/article/details/106931931

版权

this指向问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        /*
            - 解析器在调用函数时，会向函数内部传递一个隐含参数this，this指向一个对象
            - 指向的对象称为函数执行的上下文对象
            - 根据函数调用方式不同，this会指向不同对象
                1. 以函数形式调用，this就是window
                2. 以方法调用，this就是调用的对象
        */

        function test(){
            console.log(this)
        };

        test();



        /*  测试this指向*/

        var name = "全局";

        function point(){
            console.log(this.name);
            console.log("这是什么鬼");
        };

        var obj = {
            name :"张全蛋",
            sayname:point
        };

        var obj2 = {
            name: "富士康",
            sayname:point
        };

        obj.sayname;
        obj2.name;
    </script>
</head>
<body>
    
</body>
</html>

批量创建对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        /* 工厂方法批量创建对象*/

        function create(name, age, gender){
            var obj = new Object();

            obj.name = name;
            obj.age = age;
            obj.gender = gender;

            obj.sayname = function(){
                alert(this.name)
            }
            return obj;
        }

        var obj1 = create("zhangsan",18,"male");
        console.log(obj1)
    </script>
</head>
<body>
    
</body>
</html>

构造函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        /* 
            构造函数创建对象
                - 使用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 = fun;
        }
        
        function fun(){                 // 使用该方法定义为全局变量会导致冲突等
                alert(this.name);
            }

        var per1 = new Person("lisi", 18, "男")
        var per2 = new Person("wangwu", 25, "女")
        console.log(per1);
        console
        
    </script>
</head>
<body>
    
</body>
</html>

原型对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>

                /*
            原型：prototype
                - 原型对象相当于公共区域，所有同一个类的实例都能访问到该原型对象
                故可以将对象中的公共内容，统一到原型对象中。

                - 访问对象属性或方法时，优先在对象自身寻找，然后向上到原型对象中寻找

            - 使用in检查对象中是否含有某个属性时，对象中没有而原型中有会显示true
            - 使用对象的hasOwnProperty()检查对象自身是否还有属性。有则返回true
            - 
            - 原型中还有原型作为原型的对象，可以使用__proto__.__proto__.hasOwnProperty()寻找
                直到找到object对象的原型，
        */

        function Person(name, age, gender){
                    this.name = name;
                    this.age = age;
                    this.gender = gender;
                
                }
                
                Person.prototype.sayname =   function(){
                        alert(this.name);
                    }              

                var per1 = new Person("lisi", 18, "男")
                var per2 = new Person("wangwu", 25, "女")
                console.log(per1);


                // 检查自身是否有属性
                console.log(per2.hasOwnProperty("age"));
    

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

tostring方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        /*
            toString:
        */

        function ts(name, age, gender){
            this.name = name;
            this.age = age;
            this.gender = gender;
        }

        // 修改成Ts原型的toString
        ts.prototype.toString = function(){
            return "[name = " + this.name + ", age = " + this.age + ", gender = " + this.gender+"]";
        }

        var person = new ts("刘亦菲", 30, "女"); 


        var result = person.toString();
        console.log("result = " + result);
    </script>
</head>
<body>
    
</body>
</html>

数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        /*
            数组中添加元素       -- 语法： 数组[索引] = 值
            读取数组中的元素     -- 语法： 数组[索引]

            - 连续数组，使用length读取数组长度
            - 非连续数组，获取数组长度为索引值+1
        */

        var arr = new Array();
        arr[0] = 12;
        arr[1] = 13;
        arr[2] = 14;

        console.log(arr[0]);
        console.log(arr.length);
        // 修改数组长度
        // 设置数组长度时，若设置长度大于自身长度，则自动增加长度
        // 若小于自身长度，则删除多余长度的值
        arr.length = 5;

        console.log(arr.length);

        // 末尾增加一个数
        arr[arr.length] = 60;
        console.log(arr);


        var obj = {name: "张三",age: 18, gender: "男"}
        /* 使用字面创建数组*/
        var arr1 = [10, 100, 1000, 10000, 100000];
        var arr2 = [10, "杨幂", true, obj];

        console.log(arr2[3]);
    </script>
</head>
<body>
    
</body>
</html>

数组方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        /*
            数组方法：
                - push    在数组末尾增加一个或多个元素，并且返回数组新长度
                - pop     删除数组中最后一个元素，并且将被删除元素作为返回值
                - unshift   在数组前增加一个或多个元素，并且返回新的数组长度
                - shift     删除数组开始处的一个元素，并且返回该元素
                - concat   连接多个数组,不改变原数组
                - join      将数组转换成为字符串，并返回一个新值
                - reverse    数组反转，会修改原数组
                - sort       对数组排序,对于数字排序默认是使用Unicode码排序

        */

        //  push
        var arr = ["张三", 18, "男"];
        var arr2 = ["李四",21,"随便"]
        arr.push("土木三班", "sange");
        console.log(arr);

        // pop

        var result = arr.pop();
        console.log(result);
        console.log(arr);

        // unshift

        arr.unshift("开始", "love");
        console.log(arr);

        // shift
        var result1 = arr.shift();
        console.log(result1);
        console.log(arr);

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

        // concat
        var result2 = arr.concat(arr2);
        console.log(result2);

        // join  在括号内可以自定义连接符号
        var result3 = arr2.join("_@");
        console.log(result3);

        // reverse  反转数组，将数组元素反转，
        arr.reverse();
        console.log(arr);

        // sort
        /*
            - 使用sort()并添加回调函数可指定排序规则
            - 如果返回一个大于0的值，元素交换位置，如果返回小于或者等于0的数，不交换
            
            需要升序排列，则a-b
            需要降序排列，则b-a
        */

        var arr5 = [1,5,2,3,8,9,6,7,4,5,2,1]
        arr5.sort(function(a,b){
            return a-b;
        })

        console.log(arr5);

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

练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 构造函数    

          function Ts(name, age, gender){
            this.name = name;
            this.age = age;
            this.gender = gender;
        }

        Ts.prototype.toString = function(){
            return "[name = " + this.name + ", age = " + this.age + ", gender = " + this.gender+"]";
        }

        var person = new Ts("刘亦菲", 30, "女");
        var person2 = new Ts("胡歌",40, "男");
        var person3 = new Ts("tf",16,"nan");


        var perArr = [person, person2, person3];

        console.log(perArr);

        

        // 创建函数，将成年人提取，封装到新数组后返回
        function getAdult(arr){

            var newArr = [];

            for(var i = 0; i<arr.length; i++){

                var p = arr[i];
            
                if (p.age >= 18){
                    
                    newArr.push(p);
                }
            }
            return newArr;
        }

        var result1 = getAdult(perArr);
        console.log(result1);
    </script>
</head>
<body>
    
</body>
</html>

slice

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        /*
            - slice        数组中提取指定元素并返回一个新数组
                语法：数组名.slice(开始索引，结束索引)
                    注：不包含最后一位

            - splice        删除数组中的指定元素，并将删除元素作为返回值返回
                语法：数组名.splice(索引,数量,"新元素")
                注：在数组3位之后添加元素时，元素是以索引值为0开始加入数组
        */


        var arr = ["张","李","王","刘"];

        var result1 = arr.slice(0,3);
        console.log(result1);

        var result2 = arr.splice(0,2,"艾","何");  // 将删除的元素以数组返回
        console.log(result2);

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

splice

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script>
        // 删除数组中的重复元素

        var arr = [1,2,3,5,4,1,2,3,5,6,1,3,2,5,4,6,8,7,7,7,8,2];

        // 遍历数组中的每一个元素
        for (var i = 0; i<arr.length; i++){
           //  console.log(arr[i]);

            // 遍历除i之外的所有元素
            for (var j = i+1; j<arr.length;j++){

                // 比较第一次遍历的i和第二次遍历的j，并且删除j
                if (arr[i] == arr[j]){
                    arr.splice(j,1);

                    // 当删除了位于j索引位置处的元素时，位于j+1处的元素会取代原先处于j处的元素
                    // 此时，遍历已经遍历该处，故不会重复执行该处遍历，故需要在此处在继续遍历一次
                    j--
                }
            }
        }

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

call 和apply

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        /*
            函数方法：call 和 apply
           -  call和apply可以将一个对象指定为第一个参数，
              统一传递

            - call 方法可以将实参在对象之后依次传递      fun1.call(obj3,"call",10);
            - apply 方法需要将实参封装到数组种           fun1.apply(obj3,["apply","数组"])
        */

        function fun(){
            alert(this.name);
        }

        var obj = {name:"aaa",
                   sayName:function(){
                       alert(this.name)
                   }
            }

        var obj2 = {name:"obj22222"};

        // fun.call(obj);    用来测试obj1 this的指向
        obj.sayName.apply(obj2);

        // 测试call和alert区别
        function fun1(a,b){
            console.log(a);
            console.log(b);
        }

        var obj3 = {name:"obj33333",
                    sayName:function(){
                        alert(this.name);
                    }
                };
        var obj4 = {name:"obj444444"};

        fun1.call(obj3,"call",10);

        fun1.apply(obj3,["apply","数组"])
    </script>
</head>
<body>
    
</body>
</html>

arguments

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        /*
            调用函数时；浏览器会传递两个隐含的参数
                 1. 函数的上下文对象this
                 2. 封装实参的对象arguments
                    - arguments是一个类数组对象，通过索引操作数据，获取长度
                    - 在调用函数时，传递的实参会在arguments中保存
                    - arguments.length可以用来获取实参的长度
                    - arguments.callee用来指向当前执行的函数
        */
    </script>
</head>
<body>
    
</body>
</html>

date
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var d = new Date();
        var d2 = new Date("12/12/2020 11:30")

        console.log(d);
        console.log(d2);

        /*
            getDate()       返回一个月中的某一天（1~31）
            getDay()        返回一周中的某一天（0~6）
            getMonth()      返回月份（0-11）
            getFullYear()   以四位数字返回年份
            getTime()       获取当前日期的时间戳
                - 时间戳，是指从格林威治时间1970/1/1 0时到当前日期的毫秒数
            
        */

        var date = d.getDate();
        var date1 = d.getDay();
        var year = d.getFullYear();

        var time = d2.getTime();


        console.log(date);
        console.log(date1);
        console.log(year);
        console.log(time);

        // 获取当前时间戳

        time2 = Date.now();
        console.log(time2);
    </script>
</head>
<body>
    
</body>
</html>

math

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        /*
            PI()          π
            abs()         取绝对值
            ceil()        向上取整
            floor()       向下取整
            round()       四舍五入
            random()      随机生成一个0到1之间的随机数
            max()         获取最大值
            pow(x,y)      返回x的y次方
            sqrt()        开方
        */

        console.log(Math.PI);
        console.log(Math.abs(-12));
        console.log(Math.ceil(-10.5));  // 值 -10
        console.log(Math.ceil(10.5));   // 值 11
        console.log(Math.floor(10.2));  // 10
        console.log(Math.round(4.5));   // 5
        console.log(Math.random());
        console.log(Math.max(10,20,50));
        console.log(Math.pow(2,3));
        

        /*
            生成一个x-y之间的随机数
            - Math.round(Math.random()*(y-x)+x

        */
        console.log(Math.round(Math.random()*9+1));

        // 随机生成10个0-10之间的随机数
        for(var i = 0; i<10; i++){
            console.log("随机数是："+ Math.round(Math.random()*9+1));
        };
    </script>
</head>
<body>
    
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        /*
            length              获取字符串长度
            charAt()            返回字符串指定位置的字符
            charCodeAt()        返回指定位置字符串的Unicode编码
            concat()            连接多个字符串,不过用+ 比较方便
            indexOf()           返回指定字符串第一次出现的索引位置，没有则返回-1
                - 可指定第二个参数，用来表示查找位置
            lastIndexOf         从后往前查找
            slice()             截取一定长度的字符串，左闭右开，包括左边，可接受负值
            substring()         截取字符串，不接受负值，且会自动调整参数
            substr(开始位置，长度)  截取
            split()             将字符串拆分成为数组
                - 需要将一个字符串作为拆分对象,传入空值可以将每个字符转化为数组
            toUpperCase()       将字符串转换成为大写
            toLowerCase()       将字符串转换成为小写

        */
        var str = "Please give my Lover a mojito!"
        

        console.log(str.length);
        console.log(str[10]);          // e
        console.log(str.charAt(10));   // e
        console.log(str.charCodeAt(10));
        console.log(str.concat(" aaa"));
        console.log(str + " Cccccc11118789")
        console.log(str.indexOf("l"));  // 1
        console.log(str.indexOf("Q"));  // -1
        console.log(str.indexOf("e",3));  // 从第四位开始查找   5
        console.log(str.slice(2, 10));    // ease giv
        console.log(str.substr(2,5));
        console.log(str.split(" "));
        console.log(str.toUpperCase());
        console.log(str.toLowerCase());

        // 根据字符串编码获取字符
        console.log(String.fromCodePoint(455));
    </script>
</head>
<body>
    
</body>
</html>

正则
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        /*
            创建正则表达式语法：
                var 变量 = new RegExp("正则表达式","匹配模式")
            匹配模式：
                - i       忽略大小写
                - g       全局匹配

            字面量创建语法：
                var 变量 = /正则表达式/匹配模式；
                [a-z]               任意小写
                [A-Z]               任意大写
                [A-z]               任意字母
                [0-9]               数字
                [^ ]                除了

        */

        var reg = new RegExp("ab", "i");
        var str = "adsdcczcz";

        var reg2 = /[a-z]/i;
        console.log(reg2.test(str));

        console.log(reg.test(str));
    </script>
</head>
<body>
    
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>

        // split 将字符串拆分    定义全局
        var str = "a1b2c3d4f5";
        var result = str.split(/[0-9]/);

        console.log(result);

        // search 查找子字符串并返回该字符串的索引
        var str2 = "abc fafsfsa adc ssfsa agc";
        var result2 = str2.search(/a[bdg]c/);

        console.log(result2);

        // match 根据字符串将符合条件的内容提取出来

        var str3 = "53sfg465fh48hd165df4gAS56S4D86SADS2S11";

        console.log(str3.match(/[A-z]/gi));

        // replace(替换字符串，替换内容)
        console.log(str3.replace(/[0-9]/g, "-"));
    </script>
</head>
<body>
    
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        /*
            {n}             重复出现n次
            {m-n}           出现m-n 次
            {m-}            至少出现m次
            +               至少一次
            *               0个或多个
            ?               0个或1个
            ^a              以a开头  /^a/
            a$              以a结尾  /a$/
            \               转义字符
            .               除换行和空格的所有字符
            \w              任意数字，字母，下划线_
            \W              除数字，字母，下划线_
            \d              任意数字
            \D              除了数字
            \s              空格
            \S              除了空格
            \b              单词边界，即某个完整单词
            \D              除了单词边界
        */
    </script>
</head>
<body>
    
</body>
</html>

xiaoai_tx

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript-02基础

this指向问题<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script> /*
复制链接

扫一扫