05-黑马js开发-bom-基础

一、关于Bom

• window对象是一个全局对象，也可以说是JavaScript中的顶级对象

• 像document、alert()、console.log()这些都是window的属性，基本BOM的属性和方法都是window的。

• 所有通过var定义在全局作用域中的变量、函数都会变成window对象的属性和方法

• window对象下的属性和方法调用的时候可以省略window

1.定时函数

• JavaScript内置的一个用来让代码延迟执行的函数，叫setTimeout

• 语法：setTimeout(回调函数，等待的毫秒数）

• setTimeout仅仅执行一次，平时省略window

• 清除延迟函数：

  let timer=setTimeout(回调函数，等待的毫秒数）;
  clearTimeout(timer);
  

2.间歇函数

• 语法：setInterval(回调函数,间隔的毫秒数）；

• 清除间歇函数

     let interval=setInterval(回调函数，间隔时间毫秒数)
     clearInterval（interval);
  

两种定时器对比：执行的数次的差别

• 延时函数：只执行一次

• 间歇函数：每隔一段时间执行一次，除非手动清除；

---

二、JS执行机制

JS 的异步是通过回调函数实现的。
一般而言，异步任务有以下三种类型:

1. 普通事件，如 click、resize 等

2. 资源加载，如 load、error 等

3. 定时器，包括 setInterval、setTimeout 等

重点：Js执行的顺序

1. 先执行执行栈中的同步任务

2. 异步任务放入任务队列中。

3. 一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行。

---

三、location对象

• location 的数据类型是对象，它拆分并保存了 URL 地址的各个组成部分

• 常用的属性和方法：

  • href 属性获取完整的 URL 地址，对其赋值时用于地址的跳转

  • search 属性获取地址中携带的参数，符号 ？后面部分

  • hash 属性获取地址中的啥希值，符号 # 后面部分

  • reload 方法用来刷新当前页面，传入参数 true 时表示强制刷新

• location也是属于window的，完整调用方式：window.location

四、navigatior对象

• navigator的数据类型是对象，该对象下记录了浏览器自身的相关信息。

• 常用属性和方法：

  • 通过userAgent检测浏览器的版本和平台

       //检测userAgent（浏览器信息）
       !function(){
             const userAgent = navigator.userAgent
                 // 验证是否为Android或iPhone
                const android = userAgent.match(/(Android);?[\s\/]+([\d.]+)?/)
                const iphone = userAgent.match(/(iPhone\sOS)\s([\d_]+)/)
                 // 如果是Android或iPhone，则跳转至移动站点
                if (android || iphone) {
                    location.href = 'http://m.itcast.cn'
                }
       }
    

五、history对象

• history的数据类型是对象，主要管理历史记录，搞对象与浏览器地址栏的操作相对应，如前进、后退、历史记录等

• 常用属性和方法：

  history对象方法	作用
  back()	可以后退功能
  forward()	前进功能
  go(参数)	前进后退功能 参数如果是1 前进1个页面 如果是-1 后退1个页面

• history 对象一般在实际开发中比较少用，但是会在一些 OA 办公系统中见到。

---

六、本地存储

1. 数据存储在用户浏览器中；

2. 设置、读取方便、甚至页面刷新不丢失数据；

3. 容量较大、sessionStorage和localStorage约5M左右；

1.本地存储分类-localStorage

• 作用：可以将数据永久存储在本地（用户的电脑），除非手动删除，否则关闭页面也会存在；

• 特性：

  • 可以多窗口（页面）共享（同一浏览器可以共享）

  • 以键值对的形式存储使用

• 语法：

  • 存储数据：localStorage.setItem(key,value)

  • 获取数据：localStorage.getItem(key)

  • 删除数据：localStorage.removeItem(key)

注意：浏览器中查看localStorage的内容，在检查-应用-local Storage中查看；

2.本地存储分类-sessionStorage

• 特性：

  • 生命周期为关闭浏览器窗口；

  • 在同一个窗口（页面）下数据可以共享；

  • 以键值对的形式存储使用；

  • 用法跟localStorage基本相同；

• 语法：

  • 存储数据：sessionStorage.setItem(key,value)

  • 删除数据：sessionStorage.removeItem(key)

  • 获取数据：sessionStorage.getItem(key)

注意：本地存储只能存储字符串数据类型；

3. 存储复杂数据类型

• 本地只能存储字符串，无法存储复杂数据类型

• 可以将复杂数据类型转成json字符串，存储到本地

• 语法：

  const obj={
      uname:"huangyueze",
      age:19,
      gender:"男"
  }
  //存储
  localStorage.setItem("goods",JSON.stringify(goods));
  //取出来 
  const obj1=JSON.parse(localStorage.getItem("goods"))
  

4. 拼接字符串的新思路（效率更高，开发常用的写法）

• 利用map()和json()数组方法实现字符串拼接；

1. map（）方法的使用

   • 数组map方法，处理数据并且返回一个对应的数组；

   • 用法：

        const arr = ["red", "blue", "black"];
        const newArr = arr.map(function (ele, index) {
          console.log(ele); //数组元素
          console.log(index); //数组索引号
          return ele + "颜色";
        });
         console.log(newArr); // ['red颜色','blue颜色','green颜色']

• map()也称为映射，指两个元素的集合之间元素相互“对应”的关系；

• map（）重点在于有返回值，forEach没有返回值；

2. json方法

   • 用于把数组转换成字符串

   • 用法：

             const arr = ["red", "blue", "black"];
             //参数为空，表示默认用逗号分隔
             console.log(arr.join()); //red,blue,black
             //分隔符是用空字符串代替
             console.log(arr.json(""));
     

七、正则表达式

• 正则表达式是用于匹配字符串中字符串组合的模式。在JavaScript中，正则表达式也是对象。

• 通常用来查找、替换那些复合正则表达式的文本，大部分语言都有正则表达式；

1. 正则表达式

1. 判断是否有符合规则的字符串，语法 test（）

   1. 定义正则表达式语法

      const 变量名=/表达式/

   2. 判断是否有符合规则的字符串：

      regObj.test(被检测的字符串);

   示例：

         const str = "我们学习前端，希望学习前端能够高薪毕业！！";
         //1、定义规则
         const reg = /前端/;
         //2.是否匹配
         console.log(reg.test(str)); //true
   

2. 检索（查找）符合规则的字符串 ：exec()

   1. 语法：regObj.exec(被检测字符串）

   2. 返回的是一个字符串；

2. 元字符

• 普通字符：大多数的字符仅能通过描述他们本身，这些字符称作普通字符，例如字母喝数字；

• 元字符（特殊字符）：具有一些特殊的含义的字符，可以极大提高灵活性和强大的匹配功能；

例如：

• 规定用户只能输入英文26个英文字母，普通字符的话abcdefghijklm…

• 但是换成元字符写法：[a-z]

为了方便记忆和学习，我们对众多的元字符进行了分类：

• 边界符：表示位置、开头和结尾，必须用什么开头、用什么结尾；

• 量词：表示重复次数；

• 字符类：比如\d表示0~9；

1. 边界符

   • 正则表达式中的边界符（位置符）用来提示字符所处的位置，主要有两个字符；

     边界符	说明
     ^	表示匹配行首的文本（以谁开始）
     $	表示匹配行尾的文本（以谁结束）

     如果“^”和“$”同时出现，表示精确匹配；意味着两个字符串一模一样才匹配；

2. 量词

   • 量词用来设定某个模式出现的次数；

     量词	说明
     *	重复零次或更多次
     +	重复一次或更多次
     ？	重复零次或一次
     ｛n｝	重复n次
     ｛n,}	重复n次或更多次
     ｛n,m｝	重复N到m次

     注意：逗号之间不能有空格！！

3. 字符类

   1. 【】匹配字符合集

      • 后面的字符串只要包含【】中任意一个字符，都返回true；

2. 【】里面加上“-”连字符，表示一个范围

console.log(/^[a-z]$/.test("c")//true

3. 【】里面加上 ^ 取反符号,比如匹配小写

4. .点代表匹配除换行符之外的任何单个字符

4. 字符类-预定义类

   预定义：指的是某些常见模式的简写方式

   预定类	说明
   \d	匹配0-9之间的任意数字，相当于[0-9]
   \D	匹配所有0-9以外的字符，相当于[^0-9]
   \w	匹配任意的字母，数字和下划线，相当于[A-Za-z0-9_]
   \W	匹配所有字符、数字和下划线以外的字符，相当于[^A-Za-z0-9_]
   \s	匹配空格（包括换行符、制表符、空格符等），相当于[\t\r\n\v\f]
   \S	匹配非空格的字符，相当于[^\t\r\n\v\f]

   举例：

   日期格式：^\d{4}-\d{1,2}-\d{1,2}
   

5. 修饰符

   • 修饰符约束正则执行的某些细节行为，如是否区分大小写，是否支持多行匹配；

   • 语法：/表达式/修饰符

   • i是单词ignore的缩写，正则匹配时字符不区分大小写；

   • g是单词global的缩写，匹配所有满足正则表达式的结果；

        console.log(/a/i.test("a"));   //true
        console.log(/a/i.test("A"));    //true
   

6. 替换replace替换

   语法：字符串.replace(/正则表达式/,‘替换的文本’)；

正则表达式里面的或与与用|和&来连接

八、常用事件

事件名称	常用于组件	作用
change	input	检测输入内容是否改变
click	所有组件	点击事件
submit	form	表单提交事件
mouseover	所有组件	鼠标经过事件
mouseenter	所有组件	鼠标进入事件
mouselevel	所有组件	鼠标离开事件
mousemove	组件	鼠标移动