目录
- BOM操作浏览器
- 一、Window对象
- 1.1 BOM(浏览器对象模型)
- 1.2 定时器-延时函数
- 1.3 js执行机制
- 1.4 location对象
- 1.5 navigator对象
- 1.6 history对象
- 二、本地存储
- 三、补充
- 数组中的map方法
- 数组中的join方法
- 数组中的forEach方法(重点)
- 数组中的filter方法(重点)
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地址的各个部分
常用属性和方法:
- href属性
获取完整的url地址,赋值时用于地址的跳转// 可以得到当前文件url地址 console.log(location.href) // 可以通过js方式跳转到目标地址 location.href = 'http://www.itcast.cn'
- search属性
获取地址中携带的参数,符号?后面部分 - hash属性
获取地址中携带的参数,符号#后面部分 - reload()方法:
刷新页面,可以传入参数,传入true表示强制刷新
1.5 navigator对象
navigator的数据类型是对象,记录了浏览器自身的相关信息
常用属性和方法:
- 通过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左右
- 常见使用场景:页面刷新数据不丢失
- localStorage
作用:可以把数据永久的存储在本地(用户的电脑),除非手动删除,否则关闭页面也会存在
特性:① 可以多窗口共享 ② 以键值对形式存储使用
语法:- 存储(有就是存储,没有就是修改)
localStorage.setItem(key,value)
- 获取
localStorage.getItem(key)
- 删除
localStorage.removeItem(key)
【注意】:本地存储只能存储字符串类型
- 存储(有就是存储,没有就是修改)
- sessionStorage
关闭浏览器时数据消失
特性:① 生命周期为关闭浏览器窗口 ② 在同一个窗口下数据可以共享 ③ 以键值对的形式存储使用 ④ 用法与localStorage基本相同
- 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: