JavaScript之WebAPIs-BOM

BOM操作浏览器

一、Window对象

1.1 BOM（浏览器对象模型）

• window对象是一个全局对象，是js中的顶级对象
• document、alert()、console.log()都是window的属性，基本BOM的属性和方法都是我window的
• 所有通过var定义再全局作用域中的变量、函数都会变成window对象的属性和方法
• window对象下的属性和方法调用时可以略window

1.2 定时器-延时函数

延时函数与间歇函数不同，只执行一次
语法：setTimeout(回调函数,等待的毫秒数)
清楚延时函数：

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

【注意】：延时器需要等待，后面的代码先执行，每一次调用延时器都会产生一个新的延时器

1.3 js执行机制

JavaScript是单线程的，为了解决这个问题，利用多核CPU的计算能力，出现了同步和异步
同步和异步的本质区别：这条流水线上各个流程的执行顺序不同

• 同步任务
  同步任务都在主线程上执行，形成一个执行栈
• 异步任务
  就是的异步任务通过回调函数实现，异步任务相关添加到任务队列中，任务队列也叫消息队列
  异步任务一般有三个类型：① 普通事件（click、resize） ② 资源加载（load、error） ③ 定时器（setInterval、setTimeout）
  执行步骤：① 先执行执行栈中的同步任务 ② 异步任务放到任务队列 ③ 当执行栈中的同步任务执行完毕时，系统或依次读取任务队列中的异步任务
• 事件循环（event loop）：由于主线程不断地重复获取任务、执行任务再获取任务、在执行，这种机制就叫事件循环

1.4 location对象

location的数据类型是对象，它拆分并保存了url地址的各个部分
常用属性和方法：

1. href属性
   获取完整的url地址，赋值时用于地址的跳转

   // 可以得到当前文件url地址
   console.log(location.href)
   // 可以通过js方式跳转到目标地址
   location.href = 'http://www.itcast.cn'
   

2. search属性
   获取地址中携带的参数，符号？后面部分
3. hash属性
   获取地址中携带的参数，符号#后面部分
4. reload()方法：
   刷新页面，可以传入参数，传入true表示强制刷新

1.5 navigator对象

navigator的数据类型是对象，记录了浏览器自身的相关信息
常用属性和方法：

1. 通过userAgent检测浏览器版本及平台

// 检测userAgent(浏览器信息)
!(function (){const userAgent = navigator.userAgent//验证是否为Android或iPhoneconst 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}
})();

1.6 history对象

history的数据类型是对象，管理历史记录： 前进、后退、历史记录
常见属性和方法：

• back() 后退功能
• forward() 前进功能
• go(参数) 前进后退，参数如果是1就前进一个页面如果是-1就后退一个页面

二、本地存储

• 数据存储在用户浏览器中
• 设置、读取方便、甚至页面刷新不丢失数据
• 容量较大，sessionStorage和localStorage约5M左右
• 常见使用场景：页面刷新数据不丢失
  1. localStorage
     作用：可以把数据永久的存储在本地（用户的电脑），除非手动删除，否则关闭页面也会存在
     特性：① 可以多窗口共享 ② 以键值对形式存储使用
     语法：
     • 存储（有就是存储，没有就是修改） localStorage.setItem(key,value)
     • 获取 localStorage.getItem(key)
     • 删除 localStorage.removeItem(key)
       【注意】：本地存储只能存储字符串类型
  2. sessionStorage
     关闭浏览器时数据消失
     特性：① 生命周期为关闭浏览器窗口 ② 在同一个窗口下数据可以共享 ③ 以键值对的形式存储使用 ④ 用法与localStorage基本相同
• 存储复杂数据类型
  解决本地存储只能存储字符串类型数据的问题
  把对象转换为JSON字符串：JSON.stringify(obj)
  把JSON字符串转换为对象：JSON.parse(localStorage.getItem('obj'))
  JSON对象：属性和值都有引号，且引号都用双引号

三、补充

数组中的map方法

遍历数组处理数据，并且返回新的数组
map也叫映射，有返回值，forEach没有
语法：

数组名.map(function (数组元素，元素索引) {})

数组中的join方法

用于把数组中的所有元素转换成一个字符串
转换后的数组元素通过参数里指定的分隔符进行分割，若为空字符串(‘’),则所有元素之间没有任何字符,参数为空则用逗号分隔
语法：

// 数组名.join('')
const arr = ['red颜色','blue颜色','green颜色']
console.log(arr.join(''))

数组中的forEach方法(重点)

遍历数组中的每个元素，无返回值，适合遍历数组对象
语法：

数组名.forEach(function (数组元素，元素索引) {})

数组中的filter方法(重点)

筛选数组符合条件的元素，并返回筛选之后元素的新数组，不改变原数组，只能写比较运算符
语法： currentValue必须写，index可选

数组名.filter(function (currentValue, index) {return 筛选条件
})

eg：