BOM (浏览器对象模型)

定时器 — 延时函数

setTimeout(function(){}, time) //只执行一次

清除延时函数

let timer = setTimeout(function(){}, time)
clearTimeout(timer)

JavaScript的执行机制

单线程，同一时间只能做一件事

为了解决这个问题,利用多核CPU的计算能力，HTML5提出Web Worker标准,允许JavaScript脚本创建多个线程。于是,JS中出现了同步和异步。

本质区别：各个流程的执行顺序不同

同步任务都在主线程上执行，形成一个执行栈

异步任务是通过回调函数实现

一般而言，有以下三种类型：

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

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

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

异步任务相关添加到任务队列中( 任务队列也称为消息队列)。

执行顺序

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

location对象

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

● 常用属性和方法:

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

➢ search属性获取地址中携带的参数, 符号?后面部分

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

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

navigator对象

● navigator的数据类型是对象,记录浏览器本身的相关信息

检测浏览器的版本及平台

//检测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() //可以后退功能
history.forward() //前进功能
history.go(参数) //前进后退功能参数如果是1前进1个页面如果是-1后退1个页面

本地存储

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

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

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

localStorage *

作用：可以将数据永久存储在本地，除非手动删除

特性:

可以多窗口页面共享(同一浏览器可以共享)
1. 以键值对的形式存储使用
2. 只能存储字符串数据类型

localStorage.setItem('key','value')  //存储数据
localStorage.getItem('key')  //获取数据
localStorage.removeItem('key')  //删除数据

sessionStorage

特性:

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

➢ 在同一个窗口(页面)下数据可以共享

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

➢ 用法跟localStorage基本相同

存储复杂数据类型的方式

转换成JSON字符串存储, 本质还是字符串数据类型

localStorage.setItem('key',JSON.stringify(value))

把JSON字符串转换成对象

JSON.parse(localStorage.getItem('key'))

数组方法

map方法 (迭代数组)

可以处理数据，并且返回一个新的数组

const arr = ['a', 'b', 'c']
const newArr = arr.map(function (item, i){
    console.log(item) //数组元素
    console.log(i) //下标
    return item + '老师'
})
console.log(newArr)  //['a老师', 'b老师','c老师']

join方法

用于把数组中的所有元素转换成一个字符串

const arr = ['a', 'b', 'c']
console.log(arr.join('')) //abc

forEach 遍历数组方法

不返回值，适用于遍历数组对象

const arr.forEach(function (item, i)){
                  
}  

filter

筛选并返回

const arr = [10,20,30]
const newArr=arr.filter(function (item, i)){
     return item >= 20
}  // 20 30

WGenji-Blog

JavaScript-BOM