第三十八天：JavaScript高级（类+ECMAScript内置对象+BOM模型）_javascript中如何用es6中的类来操作bom-CSDN博客

本文链接：https://blog.csdn.net/qq_38250571/article/details/111033076

1. 类

ES6新特性

1.1 方式1：类java

注意：

构造方法统一使用constructor关键字声明
成员变量不需要定义，直接使用即可
类中的方法定义的时候不要使用function关键字，否则表示定义出来的是一个函数对象，会报错。

<script>
    //定义Person类
    class Person{

        // 不需要声明成员变量

        //构造方法，使用固定关键字constructor
        constructor(name,age){
            this.name = name;
            this.age = age;
        }

        //show方法，不要使用function关键字
        show(){
            document.write(this.name + "," + this.age + "<br>");
        }

        //eat方法
        eat(){
            document.write("吃饭...");
        }
    }

    //使用Person类
    let p = new Person("张三",23);
    p.show();
    p.eat();
</script>
</html>

1.2 方式2：字面量

在定义类的时候就已经创建好了对象

<script>
    //定义person
    // {}   对象
    // []   数组
    let person = {
        name : "张三",
        age : 23,
        hobby : ["听课","学习"],

        //   : 后面匿名函数
        eat : function () {
            document.write("吃饭...");
        }
    };


    //使用person
    document.write(person.name + "," + person.age + "," + person.hobby[0] + "," + person.hobby[1] + "<br>");
    person.eat();
</script>

1.3 继承

类似于Java，js中所有类都直接或间接继承了Object类。

<script>
    // js中有继承，extends关键字、super、this、重写、顶层父类Object，与Java类似。
    // 没有访问权限修饰符
    //定义Person类
    class Person{
        //构造方法
        constructor(name,age){
            this.name = name;
            this.age = age;
        }

        //eat方法
        eat(){
            document.write("吃饭...");
        }
    }

    //定义Worker类继承Person
    class Worker extends Person{
        constructor(name,age,salary){
            super(name,age);
            this.salary = salary;
        }

        show(){
            document.write(this.name + "," + this.age + "," + this.salary + "<br>");
        }
    }

    //使用Worker
    let w = new Worker("张三",23,10000);
	w = new Person("李四",24);
    w.show();
    w.eat();
</script>

2. `ECMAScript`内置对象

JavaScript = ECMAScript（基础语法 + 内置对象） + DOM +BOM

内置对象，其实就是es6中说的内置类（工具类）。前台做体验，后台做安全。

2.1 Number

<script>
    //1. parseFloat()  将传入的字符串浮点数转为浮点数
    document.write(Number.parseFloat("3.14") + "<br>");
    document.write(typeof (Number.parseFloat("3.14")) + "<br>");

    //2. parseInt()    将传入的字符串整数转为整数
    document.write(Number.parseInt("100") + "<br>");
    document.write(Number.parseInt("200abc") + "<br>"); // 从数字开始转换，直到不是数字为止

    document.write(Number.parseInt("abc") + "<br>"); // 转换失败  结果就是NaN 是一个占位符
    document.write(NaN == NaN); //false
    document.write((Number.parseInt("abc") == Number.parseInt("abc")) + "<br>");//false 转换失败  结果就是NaN 是一个占位符 六亲不认

    document.write(typeof (Number.parseInt("abc")) + "<br>");
    document.write(Number.isNaN((Number.parseInt("abc"))) + "<br>"); // 通过isNaN判断是否是NaN

</script>

2.2 Math

<script>
    //1. ceil(x) 向上取整
    document.write(Math.ceil(4.4) + "<br>");    // 5
    
    //2. floor(x) 向下取整
    document.write(Math.floor(4.4) + "<br>");   // 4
    
    //3. round(x) 把数四舍五入为最接近的整数
    document.write(Math.round(4.1) + "<br>");   // 4
    document.write(Math.round(4.6) + "<br>");   // 5
    
    //4. random() 随机数,返回的是0.0-1.0之间范围(含头不含尾)[0,1)
    document.write(Math.random() + "<br>"); // 随机数
    
    //5. pow(x,y) 幂运算 x的y次方
    document.write(Math.pow(2,3) + "<br>"); // 8
</script>

2.3 Date(重点)

new Date()、getTime()重点

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Date</title>
</head>
<body>
<img src="">
</body>
<script>
    //构造方法
    //1. Date()  根据当前时间创建对象
    let d1 = new Date();
    document.write(d1 + "<br>");

    //2. Date(value) 根据指定毫秒值创建对象
    let d2 = new Date(10000);
    document.write(d2 + "<br>");

    //3. Date(year,month,[day,hours,minutes,seconds,milliseconds]) 根据指定字段创建对象(月份是0~11)
    let d3 = new Date(2222,2,2,20,20,20);
    document.write(d3 + "<br>");

    //成员方法
    //1. getFullYear() 获取年份
    document.write(d3.getFullYear() + "<br>");

    //2. getMonth() 获取月份
    document.write(d3.getMonth() + "<br>");

    //3. getDate() 获取天数
    document.write(d3.getDate() + "<br>");

    //4. toLocaleString() 返回本地日期格式的字符串
    document.write(d3.toLocaleString() + "<br>");


    //5. 获取指定时间对象的毫秒值
    let time = d1.getTime();
    document.write(time)

    // 使用当前时间的毫秒值作为参数传递，避免一些静态资源（图片、音视频）走缓存
    document.querySelector("img").src =
        "https://blog.sunxiaowei.net/usr/uploads/2020/08/2020080409-0-aliyun-typecho-1596505972.png?time="+d1.getTime();
</script>

2.4 String

<script>
    //1. 构造方法创建字符串对象
    let s1 = new String("hello");
    document.write(s1 + "<br>");

    //2. 直接赋值
    let s2 = "hello";
    document.write(s2 + "<br>");

    //属性
    //1. length   获取字符串的长度
    document.write(s2.length + "<br>");

    //成员方法
    //1. charAt(index)     获取指定索引处的字符串
    document.write(s2.charAt(1) + "<br>");

    //2. indexOf(value)    获取指定字符串第一次出现的索引位置
    //2. lastIndexOf(value)    获取指定字符串最后一次出现的索引位置
    document.write(s2.indexOf("l") + "<br>");

    //3. substring(start,end)   根据指定索引范围截取字符串(含头不含尾)[start, end)
    document.write(s2.substring(2,4) + "<br>");

    //4. split(value)   根据指定规则切割字符串，返回数组
    let s3 = "张三,23,男";
    let arr = s3.split(",");
    for(let i = 0; i < arr.length; i++) {
        document.write(arr[i] + "<br>");
    }

    //5. replace(old,new)   使用新字符串替换老字符串
    let s4 = "你会不会跳伞啊？让我落地成盒。你妹的。";
    let s5 = s4.replace("你妹的","***");
    document.write(s5 + "<br>");
</script>

2.5 RegExp(重点)

<script>
    /*
        方括号
            用于查找/校验某一个范围内的字符：
            [a]     匹配a字符
            [abc]   匹配a b c中任意一个
            [^abc]  匹配除了a b c之外，任意一个
            [a-z]   匹配所有小写字母中任意一个
            [a-zA-Z_0-9]   匹配所有小、大写字母、数字、_中任意一个

        元字符
            拥有特殊含义的字符，为了简化方括号的写法
            .                   匹配任意字符一个
            \.                  匹配“.”这个字符
            \w  = [a-zA-Z_0-9]   匹配所单词字符中任意一个
            \d  =   [0-9]       匹配所有数字中任意一个
            \W  = [^a-zA-Z_0-9]   匹配除了单词字符之外，所有字符中任意一个
            \D  =   [^0-9]       匹配所有非数字中任意一个
        量词
            [a]+  至少有一个a字符
            [a]*   任意个a字符
            [a]?   最多有一个a字符串
            [a]{m}    m个a
            [a]{m,}   至少有m个a
            [a]{,n}   最多有n个a
            [a]{m,n}   最少有m个，最多有n个a
        边界
            ^   匹配开始
            $   匹配结束


        创建正则对象，这个对象中包含规则，使用这个包含规则的正则对象，校验某个字符串是否符合要求。

        正则对象创建
            方式1：
                let regObj  = new RegExp("^规则字符串$")
                如果规则中要求被校验的字符串中需要有“\”这个字符，需要写两个 “\\”，需要写4个
                eg: let regObj = new RegExp("^[abc]\\\\[0-9]$")
            方式2：
                let regObj = /^规则字符串$/;
                如果规则中要求被校验的字符串中需要有“\”这个字符，只需要写一个“\”即可，需要写2个
                eg：let regObj = "/^[abc]\\[0-9]$/"

        正则对象的使用
            准备一个正则对象
            let regObj = /^规则字符串$/;
            被校验字符串
            String str = "qw1231asdfa";

            boolean result = regObj.test(str);

            result true | false
                符合规则为true
                否则为false
     */

    //1.验证手机号
    //规则：第一位1，第二位358，第三到十一位必须是数字。总长度11
    // let reg1 = /^\\[1][358][0-9]{9}$/;
        
    
    let reg1 = new RegExp("^\\\\[1][358][0-9]{9}$");
    document.write(reg1.test("\\18688888888") + "<br>");

    //2.验证用户名
    //规则：字母、数字、下划线组成。总长度4~16
    let reg2 = /^[a-zA-Z_0-9]{4,16}$/;
    document.write(reg2.test("zhang_san123"));
</script>

Java中的正则API：Pattern、Matcher

public final class Patternextends Objectimplements Serializable正则表达式的编译表示形式。 

指定为字符串的正则表达式必须首先被编译为此类的实例。然后，可将得到的模式用于创建 Matcher 对象，依照正则表达式，该对象可以与任意字符序列匹配。执行匹配所涉及的所有状态都驻留在匹配器中，所以多个匹配器可以共享同一模式。 

因此，典型的调用顺序是 

 Pattern p = Pattern.compile("a*b");
 Matcher m = p.matcher("aaaaab");
 boolean b = m.matches();
在仅使用一次正则表达式时，可以方便地通过此类定义 matches 方法。此方法编译表达式并在单个调用中将输入序列与其匹配。语句 

 boolean b = Pattern.matches("a*b", "aaaaab");
等效于上面的三个语句，尽管对于重复的匹配而言它效率不高，因为它不允许重用已编译的模式。

2.6 Array

<script>

    // 数组
        // 元素没有类型限制
        // 长度可变

    let arr = [1,2,3,4,5];

    //1. push(元素)    添加元素到数组的末尾
    arr.push(6);
    document.write(arr + "<br>");

    //2. pop()         删除数组末尾的元素
    arr.pop();
    document.write(arr + "<br>");

    //3. shift()       删除数组最前面的元素
    arr.shift();
    document.write(arr + "<br>");

    //4. includes(元素)  判断数组中是否包含指定的元素
    document.write(arr.includes(2) + "<br>");

    //5. reverse()      反转数组元素
    arr.reverse();
    document.write(arr + "<br>");

    //6. sort()         对数组元素排序
    arr.sort();
    document.write(arr + "<br>");

</script>

2.7 set

<script>
    // Set()   创建集合对象
    // 特点：唯一，有序（与java不同,存取顺序一致）
    let s = new Set();

    // add(元素)   添加元素
    s.add("b");
    s.add("a");
    s.add("c");
    s.add("c");

    // size属性（与java不同）    获取集合的长度
    document.write(s.size + "<br>");    // 3

    // keys()      获取key迭代器对象
    // 用法与java不同，类似于数据库查询出结果集遍历
    let st = s.keys();
    for(let i = 0; i < s.size; i++){
        document.write(st.next().value + "<br>");
    }


    // delete(元素) 删除指定元素
    document.write(s.delete("c") + "<br>");
    let st2 = s.keys();
    for(let i = 0; i < s.size; i++){
        document.write(st2.next().value + "<br>");
    }
</script>

2.9 Map

<script>
    // Map()   创建Map集合对象
    // key特点：唯一，有序（与java不同,存取顺序一致）
    let map = new Map();

    // set(key,value)  添加元素
    map.set("张三",23);
    map.set("李四",24);
    map.set("李四",25);

    // size属性     获取集合的长度
    document.write(map.size + "<br>");

    // get(key)     根据key获取value
    document.write(map.get("李四") + "<br>");

    // entries()    获取迭代器对象
    // 用法与java不同，类似于数据库查询出结果集遍历
    let et = map.entries();
    for(let i = 0; i < map.size; i++){
        document.write(et.next().value + "<br>");
    }

    // delete(key)  根据key删除键值对
    document.write(map.delete("李四") + "<br>");
    let et2 = map.entries();
    for(let i = 0; i < map.size; i++){
        document.write(et2.next().value + "<br>");
    }
</script>

2.10 Json(重点)

Json是一种轻量级的数据交换格式。本质是一个特定格式的字符串。

轻量级：相对于XML来说，Json本身就是一串字符串，数据量小且生成和解析简单。

数据交换格式：与语言无关，用于客户端和服务器传递数据的使用字符串的格式。

Json组成规则：

由键值对组成，由{}包裹；
键和值都用""包裹，键值之间使用:拼接，多组键值对之间使用,分割；键的双引号可以省略不写。
key可以为字符串，value可以为数字、字符串、布尔、数组、json对象、json对象数组

分类：

Json对象：{"key1": "value1", "key2":"value2"}
Json数组：[{"key1": "value1"，"key2":"value2"},{"key3"："value3"，"key4":"value4"}]
复杂Json：{"k1"："v1"，"k2":[{"k21"："v21"，"k22":"v22"},{"k3"："v3"，"k4":"v4"}]}

使用：

前端中，Json中有两种形式(json对象<js对象>，Json格式字符串)
- 以Json对象（js对象）的形式存在，我们称之为Json对象。当我们需要使用Json中数据的时候，可以通过json对象.key获取对应的值；
- 以Json格式的字符串形式存在，我们称之为Json字符串。当我们需要在前端需要和后台交换数据的时候，会把Json对象转成Json字符串；
- 两种形式可以使用JSON类完成转换。stringify(json对象)转成str，parse(str)解析json对象。
前后台交换数据，一般都是通过字符串作为载体。所以说，如果要把某个json对象的内容传递到后台，一般先要把它转成json格式的字符串，然后再发送。

<script>
    // Json是一种轻量级的数据交换格式
    // 数据交换
    // 前台  js对象
    // 后台  student对象
    // 前后台  String字符串
    // 字符串就可以作为前后台数据交换的一个数据类型

    /*
        在前台页面中  把js对象  --> json格式字符串  是为了方便发送到后台   --> Stringify
        在前台页面中  把Json格式字符串  --> js对象  是为了方便操作数据（js对象.属性）  --->parse
            转换的时候使用JSON这个类
     */

    //定义天气对象
    let weather = {
        city : "北京",
        date : "2088-08-08",
        wendu : "10° ~ 23°",
        shidu : "22%"
    };

    //1.将天气对象转换为JSON格式的字符串
    let str = JSON.stringify(weather);
    document.write(str + "<br>");
    
    //2.将JSON格式字符串解析成JS对象
    let weather2 = JSON.parse(str);
    document.write("城市：" + weather2.city + "<br>");
    document.write("日期：" + weather2.date + "<br>");
    document.write("温度：" + weather2.wendu + "<br>");
    document.write("湿度：" + weather2.shidu + "<br>");
</script>

2.11 综合练习

<body>
    <div class="login-form-wrap">
        <h1>程序员管理</h1>
        <form class="login-form" action="#" id="regist" method="get" autocomplete="off">
            <label>
                <input type="text" id="username" name="username" placeholder="Username..." value="">
            </label>
            <label>
                <input type="password" id="password" name="password" placeholder="Password..." value="">
            </label>
            <input type="submit" value="注册">
        </form>
    </div>
</body>
<script>
    // 用户名框、密码框失去焦点时自动校验
    // 点击注册按钮时再校验
    // 分别封装用户名校验和密码校验

    // 封装用户名校验函数对象
    function checkUsername(){
        let username = document.getElementById("username").value;
        let reg1 = /^[a-zA-Z]{4,16}$/;
        if(!reg1.test(username)) {
            alert("用户名不符合规则，请输入4到16位的纯字母！");
            return false;
        }
        return true;
    }

    // 封装密码校验函数对象
    function checkPassword(){
        let password = document.getElementById("password").value;
        let reg2 = /^[\d]{6}$/;
        if(!reg2.test(password)) {
            alert("密码不符合规则，请输入6位纯数字的密码！");
            return false;
        }
    }

    // 绑定事件
    document.getElementById("username").onblur = checkUsername;
    document.getElementById("password").onblur = checkPassword;

    //1.为表单绑定提交事件
    document.getElementById("regist").onsubmit = function() {
        // return false;
        let b = checkUsername();
        let b1 = checkPassword();
        return b && b1;
    }
</script>

3. BOM模型

BOM Browser Object Model 浏览器对象模型

把浏览器中各个组成部分封装成了对象，方便我们操作。

JavaScript = ECMAScript + DOM +BOM

3.1 window对象(重点)

js体系中最顶层的对象。表示一个浏览器窗口(浏览器一个标签)。

该对象的所有方法和属性，直接在js代码中使用即可，不用通过任何对象调用。

document是window的一个属性，所以我们直接写document即可，不需要写window.document；其他四个BOM对象也是一样。

3.1.2 常用方法

方法

onload 网页加载完成事件，页面加载完成后自动触发。
scrollTo() 把内容滚动到指定的坐标
alert() 弹窗提示
confirm() 确认提示
prompt() 弹窗输入
setTimeout() 设置一次性定时器
setInterval() 设置周期性定时器

属性

其他四个BOM对象
document对象

代码

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>window窗口对象</title>
    <script>

        /*
            1. 定时器定义的两种方式
                方式1： setTimeout("函数调用的代码片段", 延时时间的毫秒值);
                方式2： setTimeout(函数对象, 延时时间的毫秒值);
            2. 定时器的应用场景
                某个函数或者某段代码的执行，不想通过用户的交互来触发的时候，就可以使用定时器来实现。
            3. onload事件 ，一般称之为js的程序入口

            4. window
                获取另外4个BOM对象 Location  Navigator History Screen

            5. window对象可以直接使用无需声明，而且可以省略

            6. window常用的一些方法和属性
                方法
                    alert()     弹窗警告
                    prompt()    弹窗输入提示
                    confirm()   弹窗确认
                    scrollTo(x,y) 把内容滚动到指定的坐标。

         */



        //一、定时器
        function fun(){
            alert("该起床了！");
        }
    
        //设置一次性定时器
        // 方式1： setTimeout("函数调用的代码片段", 延时时间的毫秒值);
        // let d1 = setTimeout("fun()",3000);
        // 方式2： setTimeout(函数对象, 延时时间的毫秒值);
        let d1 = setTimeout(fun,3000);


        //取消一次性定时器
        //clearTimeout(d1);
    
        //设置循环定时器
        //let d2 = setInterval("fun()",3000);
        //let d2 = setInterval(fun,3000);
        //取消循环定时器
        //clearInterval(d2);
    
        //加载事件，js程序的入口
        window.onload = function(){
            let div = document.getElementById("div");
            alert(div);
        }
    </script>
</head>
<body>
    <div id="div">dddd</div>
</body>
<!-- <script>
    //一、定时器
    function fun(){
        alert("该起床了！");
    }

    //设置一次性定时器
    //let d1 = setTimeout("fun()",3000);
    //取消一次性定时器
    //clearTimeout(d1);

    //设置循环定时器
    //let d2 = setInterval("fun()",3000);
    //取消循环定时器
    //clearInterval(d2);

    //加载事件
    let div = document.getElementById("div");
    alert(div);
</script> -->
</html>

3.2 location对象

地址栏管理对象。

获取/改变地址栏信息

应用场景

当页面的动效不需要用户触发的时候，一般都通过计时器实现。

href属性

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>location地址栏对象</title>
    <style>
        p{
            text-align: center;
        }
        span{
            color: red;
        }
    </style>
</head>
<body>
    <p>
        注册成功！<span id="time">5</span>秒之后自动跳转到首页...
    </p>
</body>
<script>
    //1.定义方法。改变秒数，跳转页面
    let num = 5;
    function showTime() {
        num--;
        let span = document.getElementById("time");
        span.innerHTML = num;

        if(num <= 0) {
            //跳转首页 跨域访问
            // location.href = "index.html";
            location.href = "http://google.com.hk";
            // 清除定时器
            clearInterval(interval);

            // 结束函数
            return;
        }
    }

    //2.设置循环定时器，每1秒钟执行showTime方法
    let interval = setInterval("showTime()",1000);
</script>

通过setTimeout和display完成动态广告的案例

<body>
    <!-- 广告图片 -->
    <img src="img/ad_big.jpg" id="ad_big" width="100%" style="display: none;"/>

    
</body>
<script>
    //1.设置定时器，3秒后显示广告图片
    setTimeout(function(){
        let img = document.getElementById("ad_big");
        img.style.display = "block";
    },3000);

    //2.设置定时器，3秒后隐藏广告图片
    setTimeout(function(){
        let img = document.getElementById("ad_big");
        img.style.display = "none";
    },6000);
</script>

自动显示广告并隐藏案例

3.3 navigator对象

浏览器的配置管理对象（Cookie）

<body>
    <h3>js获取cookie是否禁用的状态</h3>
</body>
<script>

    let cookieEnabled = navigator.cookieEnabled;
    alert(cookieEnabled);

</script>
</html>

history对象

当前标签页的历史记录管理对象

screen对象

电脑屏幕管理对象