前端WebAPIs回顾4

Window对象

BOM(浏览器对象模型)

BOM对象包含window（navigator、location、document、history、screen）

定时器-延时函数

setTimeout定时器

const timer=setTimeout(()=>fn,wait)
clearTimeout(timer)

JS执行机制（事件循环-event loop）

JS是单线程语言，代码从上往下执行，需要前一个任务完成后才能做下一个任务，如果存在延时操作的任务时会造成任务运行时间长，阻塞页面渲染。
为了解决这个问题，HTML5提出Web Worker标准，允许js脚本创建多线程，因此产生了同步(顺序执行)与异步(同时执行)。
同步任务在主线程上执行，形成一个执行栈
异步任务通过回调函数实现的（事件监听、资源加载、定时器），结束后添加到任务队列（消息队列）中
执行过程：先执行执行栈中的同步任务；异步任务经过webAPI进行执行；将执行完毕的异步任务放入任务队列中；等待执行栈中的同步任务执行完毕;将顺序读取任务队列中的异步任务;加入执行栈开始执行。

location对象

location对象拆分并保存了url地址的各个组成部分
常用属性：herf(用于js跳转页面)、hash（获取地址中的hash值，即url中#后的部分）、reload(boolean)（刷新当前页面）

navigator对象

navigator对象记录浏览器的相关信息
常用属性和方法：userAgent(检测浏览器的版本及平台)

histroy对象

history对象主要管理历史对象（页面的前进、后退、历史记录等）
常用属性和方法：**back()用于后退、forward()前进功能、go(arg)**arg为正整数，-1为后退一个页面，1为前进一个页面

本地存储

数据存储在用户浏览器中，在页面刷新时不丢失网页数据
localStorage:将数据永远存储在本地，关闭页面也会存在，可以多窗口共享

//SET
localStorage.setItem(key,value)//(string,string)
// GET
localStorage.getItem(key)//(string)
// REMOVE
localStorage.removeItem(key)//(string)

sessionStorage:数据存储在网页，当关闭浏览器时数据消失，在同一个窗口中共享

//SET
sessionStorage.setItem(key,value)//(string,string)
// GET
sessionStorage.getItem(key)//(string)
// REMOVE
sessionStorage.removeItem(key)//(string)

存储复杂数据

JSON.stringify(obj)//return obj`s JSON
JSON.oarse(json)//return json`s OBJ

forEach map join

forEach可以遍历数组并处理，无返回值
map可以遍历数组处理数据，并返回新的数组
**join(arg)**将数组转为字符串，arg作为分隔符

arr.forEach(fn(ele,index))
arr.map(fn(ele,index))
arr.join('')